OWNED MEDIAウェブ制作に役立つコンテンツを発信中!

Nuxt.jsプロジェクト内で共通の処理をpluginsディレクトリにて管理する

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

この記事を書いた人

Twitter

SPONSORED

    KEYWORD SEARCH

    RECENT POSTS

    合同会社デザインサプライ -DesignSupply. LLC-

    サイト制作・開発 / 各種デザイン制作 / ウェブプロモーション企画

    合同会社デザインサプライ(DesignSupply. LLC)

    Office:大阪府大阪市天王寺区清水谷町3-22
    Email:info@designsupply-web.com
    • Twitter
    • Github
    CONTACT USSCROLL TO TOP
      • Facebook
      • Twitter
      • Github
      • Instagram