日付のformatをちょろっと変えたいと思ったのに、それなりに嵌ってしまったのでメモ。
version
nuxt@2.14.9 vue@2.6.12
ライブラリ（@nuxtjs/date-fns）
jsって日付の扱いが微妙で、ライブラリ使うのが無難なんですが、ググるとmomentの例がいくつかありました。 しかし、momentはもうメンテナンスモードという扱いで、新しいプロジェクトで利用するには推奨されていません。 Moment.js | Docs
いくつか代替ライブラリはあるのですが、nuxtjsで利用するには、下記が便利そうでした。
nuxt-community/date-fns-module: Modern JavaScript date utility library - date-fns for Nuxt.js https://github.com/nuxt-community/date-fns-module/
利用方法
現在のnuxtjsでは、vueは2系であるため modules に設定します。
# nuxt.config.js modules: [ + '@nuxtjs/date-fns',
基本これで、 $dateFns が利用できるようになります。
templateで以下のようにすれば利用できます。
{{$dateFns.format(new Date(), 'yyyy-MM-dd')}}
jsで利用したければ、以下のようにすれば良いです。
asyncData({ $dateFns }) {
return {
dateFormatted: $dateFns.format(new Date())
}
}
はまったところ
こういうのって、共通化（global filter化）したいんですが、$dateFns は asyncData であり、vueのfilterはasyncDataが扱えない？ようです。（この辺り正しく理解はできてないですが）
ではどうするか？
date-fns/format を直接使うで、とりあえずしのぎました。
なんかこの辺り他に良い方法がありそうなんですが、、、
# plugins/filter.js
import Vue from 'vue'
import format from 'date-fns/format'
Vue.filter('formatDate', (date) => {
return format(date, 'yyyy-MM-dd')
})
# nuxt.config.js plugins: [ + '~/plugins/filter.js' ],
そうすると、こんな感じで利用できます。
{{article.date | formatDate}}
