vue-autolink-component v1.7.1

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>