https://github.com/phanan/vue-linkify
A simple Vue directive to turn URL's and emails into clickable links
https://github.com/phanan/vue-linkify
vue vue-directive
Last synced: over 1 year ago
JSON representation
A simple Vue directive to turn URL's and emails into clickable links
- Host: GitHub
- URL: https://github.com/phanan/vue-linkify
- Owner: phanan
- Created: 2016-12-15T08:54:57.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2021-03-24T00:36:20.000Z (about 5 years ago)
- Last Synced: 2025-02-27T17:35:13.972Z (over 1 year ago)
- Topics: vue, vue-directive
- Language: JavaScript
- Size: 42 KB
- Stars: 83
- Watchers: 2
- Forks: 16
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-linkify [](https://travis-ci.org/phanan/vue-linkify)
> A simple Vue directive to turn URL's and emails into clickable links. Based on SoapBox's [Linkify](https://github.com/SoapBox/linkifyjs).
## Install
This directive can be installed as a module:
``` bash
$ npm install vue-linkify
```
or, if you're not in a module environment, just include it as a ``.
## 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:
``` js
import linkify from 'vue-linkify'
Vue.directive('linkified', linkify)
```
And then you use it away:
``` html
<template>
<div id="app">
<div v-html="raw" v-linkified />
</div>
</template>
<script>
export default {
data () {
return {
raw: 'Hello from vuejs.org'
}
}
}
```
The above snippet will yield:
``` html
Hello from vuejs.org
```
## ~~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:
``` html
```
will yield a slightly different HTML:
``` html
Hello from vuejs.org
```
A list of available options is available [here](http://soapbox.github.io/linkifyjs/docs/options.html).
## License
MIT © [Phan An](http://phanan.net)