vue-3-linkify v1.1.0

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

Warning This Usage is for Version 2. If you want to use Version 1, please read the Version 1 README.md.

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>

Options

<template>
  <div v-linkify:options="{
    linkify: {
      target: '_blank',
    },
    xss: {
      whiteList: {
        a: ['href', 'title', 'target'],
      },
    }
  }">
    ...
  </div>
</template>

You can set options to customize the behavior. There are two following options: Linkify and JS XSS.

Linkify

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

You can use the following linkify options with linkify key.

XSS

<template>
  <div v-linkify:options="{
    xss: {
      whiteList: {
        a: ['href', 'title', 'target'],
      },
    }
  }">
    ...
  </div>
</template>

jsxss options with xss key.

Event listener

<template>
  <div v-linkify:options="{
    linkify: {
      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.