とても便利だったNuxt2のフィルタ（のようなもの）をNuxt3で実現する方法

Nuxt.JS

Nuxt2では、フィルタを定義することにより、数値等を定義したフォーマットで表示することが出来ました。

plugins/filter.js

import Vue from 'vue'
Vue.filter('currencyJPY', (value) => `￥${value.toLocaleString()`)
<template>
  <h1>Bank Account Balance</h1>
  <p>{{ accountBalance | currencyJPY }}</p>
</template>

マスタッシュ構文の中で「 number | currencyJPY 」と記述するだけで、数値を「￥1,000」と表示することが出来、非常に便利でした。

あいにくNuxt3には、この機能が用意されていませんので、なんとか使い勝手の似た方法は無いかと探してみたところ、こんな方法にたどり着きました。

plugins/filter.ts

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.config.globalProperties.$filters = {
    currencyJPY: (value: number) => `￥${value.toLocaleString()}`,
  }
})
<template>
  <h1>Bank Account Balance</h1>
  <p>{{ $filters.currencyJPY(accountBalance) }}</p>
</template>

ようは、グローバルに使えるフィルタ関数を追加したというだけなのですが…

うん、こんなことしなくても、コンポーザブルでいいわ、やっぱり

composables/useFilter.ts

export const useFilterCurrencyJPY = (value: number) => `￥${value.toLocaleString()}`
<template>
  <h1>Bank Account Balance</h1>
  <p>{{ useFilterCurrencyJPY(accountBalance) }}</p>
</template>

コメント

タイトルとURLをコピーしました