# vue-linkify

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

Latest version **1.0.1** (published 2016-12-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-linkify
pnpm add vue-linkify
yarn add vue-linkify
bun add vue-linkify
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2016-12-15 |
| First published | 2016-12-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Phan An |
| Maintainers | phanan |
| Keywords | vue, vuejs, component, directive, url, urlify, link, linkify |

## Links

- npm: https://www.npmjs.com/package/vue-linkify
- npm.io page: https://npm.io/package/vue-linkify

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^2.1.6
- [linkifyjs](https://npm.io/package/linkifyjs.md) ^2.1.3

## Alternatives

- [base64url](https://npm.io/package/base64url.md) — 6.1M weekly downloads
- [get-installed-path](https://npm.io/package/get-installed-path.md) — 502.9K weekly downloads
- [@uppy/url](https://npm.io/package/@uppy/url.md) — 185.8K weekly downloads
- [@d3fc/d3fc-shape](https://npm.io/package/@d3fc/d3fc-shape.md) — 16.2K weekly downloads
- [localizer](https://npm.io/package/localizer.md) — 226 weekly downloads

## Recent versions

- 1.0.1 (latest) — 2016-12-15

## README

# 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 `<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:

``` 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'
    }
  }
}
</script>
```

The above snippet will yield:

``` html
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:

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

will yield a slightly different HTML:

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

A list of available options is available [here](http://soapbox.github.io/linkifyjs/docs/options.html).

## License

MIT &copy; [Phan An](http://phanan.net)

---
_Source: https://npm.io/package/vue-linkify · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._