vue-linkify

library1.0.1jsnpmunverified

The `vue-linkify` package provides a simple Vue.js directive (`v-linkified`) designed to automatically convert URLs and email addresses within plain text into clickable HTML `<a>` links. This package is built upon the core `linkifyjs` library. Last updated in December 2016 with version 1.0.1, it is primarily compatible with Vue.js 2.x applications and is considered abandoned. Due to its age, it does not support Vue 3.x and incorporates an older version of `linkifyjs`, lacking features and breaking changes introduced in more recent `linkifyjs` releases. Newer alternatives exist for Vue 3 environments.

web-framework

npm install vue-linkify

package ↗

INSTALL

IMPORT

SIG · VUE-LINKIFY

vue-linkify

web-frameworkjavascriptv1.0.1

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

linkify

✓ import linkify from 'vue-linkify'

✗ const linkify = require('vue-linkify')

Primarily designed for module environments, though browser global is mentioned for `<script>` tag usage. The `linkify` symbol refers to the directive definition object.

Vue.directive

✓ Vue.directive('linkified', linkify)

✗ app.directive('linkified', linkify)

This package is for Vue 2.x. Vue 3.x applications use `app.directive` on an application instance, and the directive definition object structure differs.

v-linkified

✓ <div v-html="raw" v-linkified />

The directive is applied directly to an element, typically combined with `v-html` if the content is dynamically rendered.

Demonstrates how to import and register the `v-linkified` directive globally in a Vue 2 application, applying it to HTML content with custom options.

import Vue from 'vue'; import linkify from 'vue-linkify'; Vue.directive('linkified', linkify); new Vue({ el: '#app', data: { raw: 'Hello from vuejs.org. My email is user@example.com and phone is +1-555-LINK-ME.' }, template: ` <div id="app"> <p>Original text:</p> <p>{{ raw }}</p> <p>Linkified text:</p> <div v-html="raw" v-linkified:options="{ className: 'my-link', target: '_blank' }" /> </div> ` });

Debug

Known issues

breakingThis package is not compatible with Vue 3.x. Vue 3 introduced breaking changes to the directive registration API. You will need to use a different, actively maintained `linkify` directive for Vue 3.

fix

For Vue 3 projects, consider alternatives like `vue-3-linkify` or `v-linkify` which are designed for Vue 3.

affects: >=2.x

gotchaThe `vue-linkify` package is very old (last updated 2016) and uses an outdated version of `linkifyjs`. It will not include features, performance improvements, or bug fixes present in modern `linkifyjs` versions (e.g., v3.0.0+).

fix

If modern `linkifyjs` features or security patches are required, it is recommended to use an actively maintained Vue wrapper or implement `linkifyjs` directly within a custom directive or component.

affects: 1.0.1

gotchaUsing `v-html` along with `v-linkified` can pose security risks if the `raw` content is not sanitized before being passed to `v-html`. Malicious scripts embedded in `raw` content could be executed.

fix

Always sanitize any user-generated or untrusted HTML content before binding it with `v-html`. Consider using a dedicated sanitization library.

affects: 1.0.1

gotchaThe default behavior of `linkifyjs` (which `vue-linkify` is based on) in older versions might differ from modern expectations regarding `target="_blank"` and `rel="noopener noreferrer"` attributes for security. Newer `linkifyjs` versions removed these defaults.

fix

Manually specify `target: '_blank'` and `rel: 'noopener noreferrer'` within the directive options if this behavior is desired for security best practices when opening links in new tabs. However, note that this package uses an older `linkifyjs` version so support for some `rel` attributes might be limited.

affects: 1.0.1

Errors

Common errors & fixes

Error: Property "directive" must be a function or an object with a "get" and/or "set" method. Did you register a Vue 2.x directive in a Vue 3.x app?

Attempting to use `vue-linkify` (a Vue 2 directive) in a Vue 3 application, where the directive registration API has changed.

fix

This package is for Vue 2.x. For Vue 3, you must use a Vue 3-compatible linkify directive, such as `vue-3-linkify` or `v-linkify`. Register it using `app.directive()` after creating the Vue app instance.

Upgrade

Version history

1.0.1latest on npm

Audit

Dependencies

linkifyjsrequiredCore library for URL and email detection and conversion.

Agent activity

13 hits · last 30 days

node

OpenAI (training)

Resources

packagehttps://www.npmjs.com/package/vue-linkify ↗