{"id":12516,"library":"vue-linkify","title":"Vue Linkify Directive","description":"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.","status":"abandoned","version":"1.0.1","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","vue","vuejs","component","directive","url","urlify","link","linkify"],"install":[{"cmd":"npm install vue-linkify","lang":"bash","label":"npm"},{"cmd":"yarn add vue-linkify","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-linkify","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core library for URL and email detection and conversion.","package":"linkifyjs","optional":false}],"imports":[{"note":"Primarily designed for module environments, though browser global is mentioned for `<script>` tag usage. The `linkify` symbol refers to the directive definition object.","wrong":"const linkify = require('vue-linkify')","symbol":"linkify","correct":"import linkify from 'vue-linkify'"},{"note":"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.","wrong":"app.directive('linkified', linkify)","symbol":"Vue.directive","correct":"Vue.directive('linkified', linkify)"},{"note":"The directive is applied directly to an element, typically combined with `v-html` if the content is dynamically rendered.","symbol":"v-linkified","correct":"<div v-html=\"raw\" v-linkified />"}],"quickstart":{"code":"import Vue from 'vue';\nimport linkify from 'vue-linkify';\n\nVue.directive('linkified', linkify);\n\nnew Vue({\n  el: '#app',\n  data: {\n    raw: 'Hello from vuejs.org. My email is user@example.com and phone is +1-555-LINK-ME.'\n  },\n  template: `\n    <div id=\"app\">\n      <p>Original text:</p>\n      <p>{{ raw }}</p>\n      <p>Linkified text:</p>\n      <div v-html=\"raw\" v-linkified:options=\"{ className: 'my-link', target: '_blank' }\" />\n    </div>\n  `\n});","lang":"javascript","description":"Demonstrates how to import and register the `v-linkified` directive globally in a Vue 2 application, applying it to HTML content with custom options."},"warnings":[{"fix":"For Vue 3 projects, consider alternatives like `vue-3-linkify` or `v-linkify` which are designed for Vue 3.","message":"This 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.","severity":"breaking","affected_versions":">=2.x"},{"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.","message":"The `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+).","severity":"gotcha","affected_versions":"1.0.1"},{"fix":"Always sanitize any user-generated or untrusted HTML content before binding it with `v-html`. Consider using a dedicated sanitization library.","message":"Using `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.","severity":"gotcha","affected_versions":"1.0.1"},{"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.","message":"The 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.","severity":"gotcha","affected_versions":"1.0.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"Attempting to use `vue-linkify` (a Vue 2 directive) in a Vue 3 application, where the directive registration API has changed.","error":"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?"}],"ecosystem":"npm"}