特定の決まった処理を使い回す場合に、コンポーネント内のロジックに都度記述するのは手間ですし、保守性も下がってしまいます。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ディレクトリで処理を管理することで、コードの見通しが良くなり、運用・保守コストも削減できるのではないでしょうか。