JavaScript

【Nuxt.js × moment.js】日時表示操作を簡単にしよう!- Nuxt.jsにmoment.jsを適用させる方法

こんにちは。どんぶラッコです。

みなさん、moment.js はご存知でしょうか?

https://momentjs.com/

プレーンなJavaScriptでは時間の操作が面倒臭いです。

そんな時に使うのがこの moment.js

例えば、現在日時の表示を “2020-03-31” の形式にしたいなーと思ったら↓のように記述するだけです。

moment().format('YYYY-MM-DD');

また、地味に面倒くさい “月末を取得する” なんて処理に対しても便利なメソッドが準備されています。

moment().endOf('month').format('YYYY-MM-DD');
moment().daysInMonth() // こっちは日付だけ

くそ便利!

これをNuxt.jsにも適用させていきたいと思います。

@nuxtjs/moment をインストール

使うのは、 @nuxt.js/moment ライブラリです。 Nuxt Community で提供されているプラグインです。

1. パッケージを追加

まずは、お使いのNuxtプロジェクトにインストールします。

お使いのパッケージ管理ツール (npm or yarn)を使ってインストールしましょう。

yarn add --dev @nuxtjs/moment 
# or
npm install --save-dev @nuxtjs/moment

2. nuxt.config.jsを編集

次に nuxt.config.jsを編集します。 この時、ついでに locale を日本に設定してしまいましょう。

export default {
  buildModules: [
    '@nuxtjs/moment'
  ],
  moment: {
    // ここにオプションが記述できる
    locales: ['ja']
}

これで設定は完了です。

使い方

使い方は簡単。公式ドキュメントの moment() 部分を this.$moment()に読み換えるだけです。

this.$moment().format('YYYY-MM-DD');
// moment().format('YYYY-MM-DD');

すごく簡単に使えるようになっちゃいますよね!

余談: なんでこんな風に使えるの?

試しに @nuxtjs/moment/lib/plugin.jsの中身を見てみましょう。

import moment from 'moment'

<%= options.locales.map(l => `import 'moment/locale/${l}'`).join('\n') %>

<%= options.plugins.map(p => `import '${p}'`).join('\n') %>

<% if(options.defaultLocale) { %>moment.locale('<%= options.defaultLocale %>')<% } %>

<% if(options.defaultTimezone) { %>moment.tz.setDefault('<%= options.defaultTimezone %>')<% } %>

export default (ctx, inject) => {
  ctx.$moment = moment
  inject('moment', moment)
}

ここでinjectしてるから $moment として使えるんですね!

https://ja.nuxtjs.org/guide/plugins/


便利ライブラリを使ってどんどんカスタマイズしちゃいましょう♪

ABOUT ME
どんぶラッコ
ECコンサルタント、システムエンジニアを経て、quintet株式会社CTOに就任。普段はNuxt.jsやLaravelを使用しています。

\面白いと思ったら/

記事のシェア & Twitter のフォロー をお願いします!

@proglearn
RELATED POST

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です