Nuxt.jsでフィルタ(Filter)を使う

Vue.jsで文字列のフォーマットなどに使うフィルター(Filter)を、Nuxt.jsでも使う方法を紹介します。

スポンサーリンク

pluginsディレクトリにフィルタを作る

Nuxt.jsでは、フィルタのコードは、pluginsディレクトリの中に作成します。

今回は、先頭１文字目を大文字にするフィルタを作ってみました。
ファイル名は任意の名前でOKです。

[ /plugins/myFilter.js ]

import Vue from 'vue'

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

nuxt.config.jsを編集

上で作成したフィルタを読み込ませる為、nuxt.config.jsを編集します。
plugins内に、作成したフィルタのファイルパスを追記します。

[ /nuxt.config.js ]

const pkg = require('./package')

module.exports = {

~~ 中略 ~~

  plugins: [
    '~/plugins/myFilter.js'
  ],
}

フィルタの作成と設定は、これで完了です。
この後は、今回作成したcapitalizeフィルタを実際使っていきます。

スポンサーリンク

フィルタの使い方

フィルタの使い方は当然ですが、Vue.jsとまったく同じです。

mustache 展開で使う場合

{{ message | capitalize }}

v-bind 式で使う場合

<div v-bind:id="myid | capitalize"></div>

さいごに

フィルタをどこに置いたらいいか、分かりませんでしたが、pluginsに置けばとりあえず動きました。
置き場所間違っていたらごめんなさい。。。

参考にしたもの

[Vue公式] フィルター