2018-1-25 23:56
nuxt vue

Nuxt でカスタムディレクティブを追加

経緯

概要

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

スクリプト

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

プラグインの作成

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

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 に作成した ファイルへのパスを追加

nuxt.config.js

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>