phanan / vue-linkify

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

vue-linkify

A simple Vue directive to turn URL's and emails into clickable links. Based on SoapBox's Linkify.

Install

This directive can be installed as a module:

$ npm install vue-linkify

or, if you're not in a module environment, just include it as a <script>.

Basic Usage

In a browser environment, you should now have a v-linkified directive set up for free. If you're in a module environment, just import and register it as you please:

import linkify from 'vue-linkify'

Vue.directive('linkified', linkify)

And then you use it away:

<template>
  <div id="app">
    <div v-html="raw" v-linkified />
  </div>
</template>
<script>
export default {
  data () {
    return {
      raw: 'Hello from vuejs.org'
    }
  }
}
</script>

The above snippet will yield:

Hello from <a href="http://vuejs.org" class="linkified" target="_blank">vuejs.org</a>

Advanced Slightly Less Basic Usage

You can also pass an options argument, which takes an Object, into the directive to control its behavior. For example, modifying the above template into something like this:

<template>
  <div id="app">
    <div v-html="raw" v-linkified:options="{ className: 'foo' }" />
  </div>
</template>

will yield a slightly different HTML:

Hello from <a href="http://vuejs.org" class="foo" target="_blank">vuejs.org</a>

A list of available options is available here.

License

MIT © Phan An

vue-linkify's Issues

I already add events to options but It's not works.

<span v-if="message.message" v-html="message.message" v-linkified:options="{ events: { click: event => { alert('click') } } }" > {{ message.message }} </span>

del

Cannot linkify custom schema

This work great for most scenarios however I am required to also linkify some custom app schemas which are failing to linkify currently.

For example these work:

www.examplesite.com
examplesite.com
https://examplesite.com

This half works:

custom-scheme://examplesite.com

A custom schema only half works - by that i mean the text 'custom-scheme:' is not part of the link but '//examplesite.com' is linkified.

Is there any way to solve this, or a way to update to ensure the whole text is linkifed?

<script> tag doesn't work because of require command in vue-linkify.min.js

@phanan

Unsafe Injection of HTML

The way the library works via v-html allows someone to inject arbitrary html if they can control the input string to linkify. An example is here

The linkify notes on this are available here:

I'm not sure any code changes are necessary, but a disclaimer that only trusted strings should be passed in the Readme might be appropriate. Vue obviously makes this disclaimer in their documentation, but I think it is worth reiterating it in this project just because it is likely that users of this library would want to use it with untrusted strings of text.

Breaks reactivity

When I use this plugin on a DIV which has something like

<div v-linkified>{{ item.summary }}</div>

the vue-linkify plugin breaks reactivity of Vue.
When I update item.summary it is not reflected in the div.

How can I best fix this?

Plugins?

Does this library support the enabling of linkify plugins (like hashtag, mentions, etc.)? If so, what is the process for enabling them?

Does this support linkify-string?

How can I use the directive so HTML is escaped like here: http://soapbox.github.io/linkifyjs/docs/linkify-string.html ?

Does not trigger re-render on props change

TL;DR

Hi, thank you very much for this awesome library!

Although this works with many cases, I found a situation where v-linkified component does not re-render after changes via props, data, computed, etc.

Reproduction

Demo:
https://vue-linkify-not-working-demo.vercel.app/

Source Code:
https://github.com/yuichkun/repro-vue-linkify-bug

Possible Fix?

I guess this bug derives from the fact that this library gets text values from el.innerHTML, so if there's a way to get text from vNode, it could avoid referencing the old value??

I'm not too familiar with Vue.js but if @phanan is busy, I'm up for trying making up a fix PR myself :)

Does this plugin can work with SSR?

I tried this plugin with Nuxt.js. Everything works fine except SSR - plugin works only on client side.
Can vue-linkify prepare HTML on server side? Thanx.

plugins/vue-linkify.js:

import Vue from 'vue'
import linkify from 'vue-linkify'
Vue.directive('linkified', linkify)

template:

<p v-html="studio.text" v-linkified:options="{ nl2br: true }"></p>

Mention support?

Does this plugin support mentions as linkifyjs?

newline character

Hello there,

I have a string that i want to display with linkify. In it there are newline characters "\n". Unfortunally this doesn't insert these in the text. My code:

<div
  class="mx-10"
  v-linkified
  v-html="nextEventTime.announcement"
></div>

I have tried using {{}} but this breaks reactivity. Any ideas to fix this?