Nuxt.jsプロジェクト内で共通の処理をpluginsディレクトリにて管理する
最終更新日: 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ディレクトリで処理を管理することで、コードの見通しが良くなり、運用・保守コストも削減できるのではないでしょうか。
sponserd
keyword search
recent posts
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #2
- Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
Shopifyでオリジナルテーマ制作やテーマカスタマイズで使えるTips #1
- ViteでReactとReact Routerを使ってみる
ViteでReactとReact Routerを使ってみる
- ViteでPugのコンパイル環境を導入する
ViteでPugのコンパイル環境を導入する
- ViteでMarkuplintとPrettierを使える環境を構築する
ViteでMarkuplintとPrettierを使える環境を構築する
- ViteでStylelintとESlintを使える環境を構築する
ViteでStylelintとESlintを使える環境を構築する
- マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
マウスオーバーしたセルを含む行列がハイライトするテーブルを作成する:has()擬似クラスの活用例
- ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
ViteでVue.jsとVuex(Pinia)とVue Routerを使ってみる
categories