vue-autolink-component
Probably the easiest autolink solution for Vue.js
Features & characteristics:
- convert url to 'a tag'.
- consider \n.
Install & basic usage
npm install vue-autolink-component<template> <div> <VueAutolinkComponent :message="text"></VueAutolinkComponent> </div></template> <script>import VueAutolinkComponent from "vue-autolink-component";import "vue-autolink-component/dist/vue-autolink-component.css"; export default { components: { VueAutolinkComponent }, data() { return { text: `a text including URL like https://www.google.com/` }; }};</script>The output will be
If you would like to change styles for linked word, just do like below.
<style scoped>.vue-autolink-component >>> .vue-autokink-component__link { /* Note! this is a default setting. */ color: #0026ca; cursor: pointer; text-decoration: none;}</style>