経緯

• nuxt.js で カスタムディレクティブ(Vue.js) を追加する方法メモ

概要

• /plugins 以下にファイルを作成し、そこに記述する
• 追加したファイルを nuxt.config.jsに記述する

スクリプト

• 文字列の中の URL をリンクに変換するカスタムディレクトリを作る

プラグインの作成

• /plugins 以下に auto-link.js ファイルを作成

import Vue from 'vue'

Vue.directive('auto-link', {
  inserted: function(el) {
    el.innerHTML = el.innerHTML.replace(
      /(https?:\/\/[a-zA-Z0-9\-_.:@!~*'(¥);/?&=+$,%#]+)/g,
      '<a href=$1 target="_blank">$1</a>'
    )
  }
})

nuxt.config.js

• nuxt.config.js 内の plugins に作成した ファイルへのパスを追加

module.exports = {
~~中略~~
  plugins: [
    '~plugins/auto-link.js'
  ]
}

結果

• テンプレート内でカスタムディレクティブが使用可能になる

<template>
    <div v-auto-link>{{description}}</div>
</template>
<script>
export default {
  data() {
    return {
      description: 'http://imatomix.com'
    }
</script>