https://github.com/say8425/vue-3-linkify

🌐 Vue 3 directive to turn URL and emails into anchor tag that use Linkify.js
https://github.com/say8425/vue-3-linkify

directive linkify linkifyjs vue vue3 vuejs

Last synced: 3 months ago
JSON representation

🌐 Vue 3 directive to turn URL and emails into anchor tag that use Linkify.js

• Host: GitHub
• URL: https://github.com/say8425/vue-3-linkify
• Owner: say8425
• Created: 2022-03-13T11:54:16.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-07-20T08:45:15.000Z (almost 3 years ago)
• Last Synced: 2025-03-26T20:22:25.476Z (4 months ago)
• Topics: directive, linkify, linkifyjs, vue, vue3, vuejs
• Language: TypeScript
• Homepage:
• Size: 47.9 KB
• Stars: 4
• Watchers: 2
• Forks: 2
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Vue 3 Linkify 

[![NPM](https://img.shields.io/npm/v/vue-3-linkify?color=cb3837&logo=npm)](https://www.npmjs.com/package/vue-3-linkify)

[![Test](https://github.com/say8425/vue-3-linkify/actions/workflows/test.yml/badge.svg)](https://github.com/say8425/vue-3-linkify/actions/workflows/test.yml)

[![Release](https://github.com/say8425/vue-3-linkify/actions/workflows/release.yml/badge.svg)](https://github.com/say8425/vue-3-linkify/actions/workflows/release.yml)

[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/say8425/vue-3-linkify/blob/master/LICENSE)

Vue 3 directive to turn URL and emails into anchor tag that use [Linkify.js](https://linkify.js.org/).

[![Demo vue-3-linkify](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-3-linkify-demo-pizsri?eslint=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2FApp.vue&theme=dark)

## Installation

```shell

npm install --save vue-3-linkify

```

```shell

yarn add vue-3-linkify

```

Recommended to use npm or yarn to install.

## Usage

### Register plugin

```typescript

import { createApp } from "vue";

import App from "./App.vue";

import Vue3linkify from "vue-3-linkify";

const app = createApp(App);

app.use(Vue3linkify)

app.mount('#app')

```

### Use directive

```vue

  


    ...

  


```

### Use directive with options

```vue

  


    ...

  


```

You can use the [linkify options](https://linkify.js.org/docs/options.html).

### Add event listener

```vue

  


    ...

  


```

Unfortunately, the [events option](https://linkify.js.org/docs/options.html#events) is not supported in linkify.js.

But you can add event listeners to [attributes options](https://linkify.js.org/docs/options.html#attributes) manually.