Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

参考文献

idani
井谷(いだに)と申します。 前職では、cakePHPとjQueryとVue.jsを使って、メール配信、SMS配信、セミナー募集システム、かんたんな決済処理、アフィリエイトシステムなどを開発していました。 使える言語は、C、C++、Perl、C#、PHP、JSになります。 昔々、Gentoo Linuxの翻訳作業をしていました。
https://hirotae.com/
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