v-linkify

The source code for v-linkify a VueJS Directive.

A simple Vue directive to turn URL's, emails and phone numbers into clickable links. Supports Vue 2 and Vue 3. NO dependencies!

Installation

npm install v-linkify

Install globally

main.js (Vue 2)

import Vue from 'vue';
import vLinkify from 'v-linkify';

Vue.use(vLinkify)

main.js (Vue 3)

import { createApp } from 'vue';
import App from './App.vue';
import vLinkify from 'v-linkify';

const app = createApp(App);
app.use(vLinkify);
app.mount('#app');

Install locally

component.vue

import { vLinkify as linkify } from  "v-linkify";

export default {
   directives: {
      linkify
   }
}

Basic Usage

<template>
   <div v-linkify>
      v-linkify https://github.com/maorbarel/v-linkify
      Vue directive to parse links (urls, emails, phones, etc.)
      in text into clickable links
   </div>
</template>

Advanced Usage

<template>
   <div v-linkify="{ className: 'myClassName', target: '_self', rel: 'nofollow' }">
      v-linkify https://github.com/maorbarel/v-linkify
      Vue directive to parse links (urls, emails, phones, etc.)
      in text into clickable links
   </div>
</template>

Options

• className | String
• target | String, _blank By default
• rel | String, noopener noreferrer By default

Authors

Maor Barel

License

---

MIT © Maor Barel