はじめに

dateUtilとかstringUtilとかよく作ったなー。きっとみんなもいろんなutilを作ったことがあると思います。で、Nuxt.jsでは代わりにfilterというものを使います。これ凄い便利なんです。早速導入手順をどうぞ。

導入手順

Step1. my-filter.jsの作成

filterを定義する為の新規ファイルを作成します。せっかくなので試しに3桁カンマとお尻に円を付けてくれるfilterを作ってみます。

// plugins/my-filter.js

import Vue from 'vue'

Vue.filter('format-price', function (value) {
  return `${value.toLocaleString()}円`
})

Step2. my-filter.jsの読み込み

次は作成したfilterを読み込みます。

// nuxt.config.js

module.exports = {
  ~ 中略 ~
  plugins: [
    '~/plugins/my-filter.js',
  ],
}

配置するディレクトリとファイル名は任意なので好きなのでOK。

Step3. filterを適用させる

なんでも良いので適当なコンポーネントの<template>タグ内に{{ 10000 | format-price }}と書いてみてください。

<template>
  <span>{{ 10000 | format-price }}</span>
</template>

10,000円と表示されていればOKです。

余談

ちなみにfilterは複数適用させることも可能です。試しに先ほど作成したfilterの3桁カンマを付ける処理と、お尻に円を付けてくれる処理を分けてみましょう。

// plugins/my-filter.js

import Vue from 'vue'

Vue.filter('format-locale', function (value) {
  return `${value.toLocaleString()}`;
})

Vue.filter('format-price', function (value) {
  return `${value}円`;
})

さきほど{{ 10000 | format-price }}と書いたところを{{ 10000 | format-locale | format-price }}と変えてみてください。

<template>
  <span>{{ 10000 | format-locale | format-price }}</span>
</template>

結果はさきほどと一緒で10,000円となりましたよね。

さいごに

特にimportも必要ないし、気軽に使えるので便利です。アプリの規模が大きくなればなるほど使い所も増えて来るので覚えておいて損はないです。その際はfilterを定義するファイルは小分けにすることを勧めます。ではでは。