22
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

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

127_0_0_1_3000_posts.png

解決への道のり

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

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

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

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

こうなったら発想を転換して、AxiosモジュールのようにMoment.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

参考文献

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
22
Help us understand the problem. What are the problem?