Edited 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


参考文献