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: 17 days 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 (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2021-03-24T00:36:20.000Z (over 3 years ago)
• Last Synced: 2024-10-14T10:46:26.274Z (about 1 month 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 [![Build Status](https://travis-ci.org/phanan/vue-linkify.svg?branch=master)](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)