vue-linkify
v1.0.1
Published
A simple Vue directive to turn URL's and emails into clickable links
Downloads
25,892
Maintainers
Readme
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