【Nuxt.js / filter】filter機能で金額をカンマ区切りにする

ふぐ

Nuxt.jsfilter機能を使用して、数字をカンマ区切りで表示する

plugins/filter.jsを作成

import Vue from 'vue'

Vue.filter('price', function (value) {
 return Number(value).toLocaleString();
});

nuxt.config.jsで読み込む

  plugins: [
    { src: '~/plugins/filter' },
  ],

使ってみる

<p>{{ fruits.price | price }}円</p>