nuxtjsで日付を扱う（@nuxtjs/date-fns）

nuxtjs vue

日付の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}}