[Nuxt.js]グローバルフィルターを作成する

Advertisements
Nuxt.jsJavaScript

Nuxtのファイル構成を意識したNuxt.jsでのグローバルフィルターの作成方法です。Vueのやり方だと上手く行かなかったため、備忘録。

<template>
  <div>
    <Header />
    <v-container>
      <!-- local filter -->
      <h2>Mustash</h2>
      <p>{{ price | numberFormat }}</p>
      <p>{{ text | toUpperCase }}</p>
      <h2>b-vind</h2>
      <input type="text" :value="price | numberFormat" />
      <input type="text" :value="text | toUpperCase" />
    </v-container>
  </div>
</template>


<script>
export default {
    data() {
      return {
        price: 25400,
        text: 'Hello, Nuxt.js!',
    }
  },
}
</script>
グローバルフィルターは別のjsファイルに記述
import Vue from 'vue'

Vue.filter('toUpperCase', (value) => {
  return value.toUpperCase()
})

Vue.filter('numberFormat', (value) => {
  return value.toLocaleString()
}

nuxt.config.jsに追記

export default {
  plugins: [ { src: '~plugins/filter.js' } ],
}

おしまい

 

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