How to use vue-linkify to convert links from plain-text to clickable links


A simple Vue directive to turn URL's and emails into clickable links.


This directive can be installed as a module:

 npm install vue-linkify

Usage example

  <div id="app">
     <div v-html="raw" v-linkified />

Use the v-linkified directive

export default {
  data () {
    return {
      raw: 'Greetings from'

Pass the text along with URL or email.

The above config will result in the following code:

Greetings from <a href="" class="linkified" target="_blank"></a>

Or you could set the tag name to use for each link, for cases where you can’t use anchor tags.

<div v-html="raw" v-linkified:options="{ tagName: 'span' }" />

For a list of more options see the Linkify JS plugin.

Check vue-linkify out on GiHub, by Phan An.