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

vue-linkify

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

Install

This directive can be installed as a module:

 npm install vue-linkify

Usage example

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

Use the v-linkified directive

<script>
export default {
  data () {
    return {
      raw: 'Greetings from vuejsfeed.com'
    }
  }
}
</script>

Pass the text along with URL or email.

The above config will result in the following code:

Greetings from <a href="http://vuejsfeed.com" class="linkified" target="_blank">vuejsfeed.com</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.