特定の決まった処理を使い回す場合に、コンポーネント内のロジックに都度記述するのは手間ですし、保守性も下がってしまいます。Nuxt.jsではそんな場合にpluginsディレクトリへ処理を記述したjavascriptファイルを配置することで、コンポーネント内で呼び出すことができます。
ということで、下記の通り、プロジェクト内にある「plugins」フォルダの中に、任意の名前でjsファイルを用意します。
/PROJECT ROOT
┣ plugins
┣ *********.js
pluginsフォルダ内のjsファイルには下記のように処理を記述していきます。まずはvueをインポートしておきます。そして、「Vue.prototype.」に続けて、処理を定義する関数名を$マークに続けて指定します。ここではサンプルとして、日付文字列を年月日のフォーマットに整形する処理を記述しています。
【/plugins/example.js】
import Vue from 'vue' Vue.prototype.$dateTimeToJaDate = (dateTimeString) => { if (dateTimeString) { const date = new Date(dateTimeString) return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日` } return '' }
処理を記述したら、「nuxt.config.js」にて、「plugins」のキーで、それぞれ用意したpluginsのjsファイルを指定していきます。パスはルートディレクトリからのルートパスで指定します。作成した分だけ個別に記述していきます。
【nuxt.config.js】※一部抜粋
export default { plugins: [ { src: '~/plugins/example.js', ssr: false }, { src: '~/plugins/*********.js', ssr: false }, ........ ], ........ }
これで、plugins内で定義した処理をコンポーネント内で自由に呼び出せるようになります。例えば下記のようなケースで、日付情報を出力する場合にそのままですと、整形される前の文字列として表示されてしまいます。
【Vue】※一部抜粋
<template> <div id="app"> <div v-for="(item, index) in items" :key="index"> <span class="date-display">{{ item.date }}</span> </div> </div> </template> // HTML <span class="date-display">2019-02-27T12:53:17+09:00</span>
そこで、pluginsで定義した関数を挟むことで、その関数内での処理が実行される形になります。pluginsで定義した関数を記述する場合には$マークに続けて、関数名を記述すればOKです。
【Vue】※一部抜粋
<template> <div id="app"> <div v-for="(item, index) in items" :key="index"> <span class="date-display">{{ $dateTimeToJaDate(item.date) }}</span> </div> </div> </template> // HTML <span class="date-display">2019年2月27日</span>
ウェブアプリケーションを作成する場合には、決まった処理を使い回すケースが多いかと思います。そんな時にはpluginディレクトリで処理を管理することで、コードの見通しが良くなり、運用・保守コストも削減できるのではないでしょうか。