Vue Linkify Directive

Common errors

• 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?

  cause 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.

Warnings

• breaking 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.
  Fix: For Vue 3 projects, consider alternatives like `vue-3-linkify` or `v-linkify` which are designed for Vue 3.
• gotcha 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+).
  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.
• gotcha 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.
  Fix: Always sanitize any user-generated or untrusted HTML content before binding it with `v-html`. Consider using a dedicated sanitization library.
• gotcha 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.
  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.

Install

• npm install vue-linkify npm
• yarn add vue-linkify yarn
• pnpm add vue-linkify pnpm

Imports

• linkify
  wrong:

  const linkify = require('vue-linkify')

  correct:

  import linkify from '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
  wrong:

  app.directive('linkified', linkify)

  correct:

  Vue.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.

Quickstart

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>
  `
});