Nuxt.jsのvuexでMoment.jsを利用する

2018/11/07 22:59 編集
moment.jsよりdate-fnsが良いらしいので、書き直しました。
=> Nuxt.jsでVueコンポーネントでもVuexでもdate-fnsを使う

はじめに

Nuxt.jsを使っていて、VuexでMoment.jsがうまく動作しませんでした。そして、動かすまでの内容です。

経緯・敬意

@potato4d 花谷氏のNuxt.jsビギナーズガイドで勉強しています。
とてもよい学びになっています。ありがとうございます。

サンプルコードで、Nuxt.jsのプラグインとして、Moment.jsを導入されていますが、以下のようなエラーが発生してしまいました。

plugins/moment.js

import 'moment/locale/ja'
import moment from 'moment'
moment.locale('ja')
export default moment

解決への道のり

「nuxt format.replace is not a function」で検索すると、Problem with third-party pluginsというIssuが見つかりました（ただし解決済み）。

また、Qiitaで検索すると、 @dasisyouyu さんの記事がありましたので、早速導入。

• nuxtでmomentを動かす
• nuxtでmomentが使えない

しかし、Vuexで動作しませんでしたOrz...

@dasisyouyu さんもIssueを投げられていました^^；

• can't use in store.

こうなったら発想を転換して、AxiosモジュールのようにMoment.jsが使えると嬉しいなっと考えました。

プラグインについては、以下にかかれています。結構、簡単にインジェクションできますね。

• Nuxt.jsドキュメント プラグイン〜注入する

moment.jsを日本語ロケールで初期化して、引数を渡してあげればよさそうです。
こんな感じにしました。

plugin/moment.js

import 'moment/locale/ja'
import moment from 'moment'

moment.locale('ja')
export default ({ app }, inject) => {
  inject('moment', args => moment(args))
}

作成したmoment.jsプラグインを導入するために、「nuxt.config.js」に追記します。

nuxt.config.js

module.exports = {
・・・
plugins: [
  '@/plugins/vuetify',
  '@/plugins/axios',
  '@/plugins/moment' ＜ーこれを追記
],
・・・
}

これでvuexでも使えるようになりました。

store/posts.js

export const actions = {
  async publishPost({ commit }, { payload }) {
    const created_at = this.$moment().format()
  }
}

おまけ〜moment.jsのロケールをしぼる。

moment.jsをそのままバンドルすると、様々な言語ファイルが入っているためファイルサイズが肥大化してしまいます。

このためmoment-locales-webpack-pluginを使って、必要な言語（ここではja）以外は削除するようにします。
※en-usはデフォルト言語なので削除ができないそうです。

yarn add moment-locales-webpack-plugin --dev

nuxt.config.js

const MomentLocalesPlugin = require('moment-locales-webpack-plugin')

module.exports = {
・・・一部省略
  build: {
    vendeer: ['moment'],
    plugins: [
      new MomentLocalesPlugin({
        localesToKeep: ['es-us', 'ja']
      })
    ]
  }
}

この設定をすることで、168KiB節約することができました！

設定前：　e9b3116a7e644604073c.js    **587 KiB**       9  [emitted]  [big]  vendors.app
設定後：　6421c4c6c45adabb8508.js    **419 KiB**       9  [emitted]  [big]  vendors.app

参考文献

• Nuxt.jsドキュメント プラグイン〜注入する
• Nuxt.js Webpack プラグインを追加するには？