Vue 3 Linkify

Vue 3 directive to turn URL and emails into anchor tag that use Linkify.js.

Installation

npm install --save vue-3-linkify

yarn add vue-3-linkify

Recommended to use npm or yarn to install.

Usage

Register plugin

import { createApp } from "vue";
import App from "./App.vue";
import Vue3linkify from "vue-3-linkify";

const app = createApp(App);

app.use(Vue3linkify)
app.mount('#app')

Use directive

<template>
  <div v-linkify>
    ...
  </div>
</template>

Use directive with options

<template>
  <div v-linkify:options="{
    target: '_blank',
  }">
    ...
  </div>
</template>

You can use the linkify options.

Add event listener

<template>
  <div v-linkify:options="{
    target: '_blank',
    attributes: {
      onclick: 'event.stopPropagation()',
    },
  }">
    ...
  </div>
</template>

Unfortunately, the events option is not supported in linkify.js. But you can add event listeners to attributes options manually.