こんにちは。どんぶラッコです。
みなさん、moment.js はご存知でしょうか？
プレーンな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/moment2. 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/
便利ライブラリを使ってどんどんカスタマイズしちゃいましょう♪
