時刻表記するのに便利なJavaScriptプラグイン「Moment.js」のプロジェクト終了が決まっていたらしい。そうとは知らず当ブログのNuxt.jsプロジェクトで取り入れていたので、別のプラグイン「Day.js」に移行することにした。
moment.js
「日付処理系ライブラリの決定版「Moment.js」を使ってNuxt.jsでの日付操作を楽にしよう | PAPADAYS.COM」を参考に行ったmoment.jsの設定は以下の通り。
plugin/moment.js
import Vue from 'vue'
import moment from 'moment'
// YYYY年MM月DD日形式で表示するようfilterを定義
Vue.filter('format-date', function (value) {
const date = moment(value);
return date.format("YYYY年MM月DD日");
})
nuxt.config.js
// グローバルでpluginを使えるようにする
plugins: [
{src: '~/plugins/day'},
],
// モジュールを登録
modules: [
'@nuxtjs/moment',
],
// 日本語化
moment: {
locales: ['ja']
},
vueファイル内の表示したい箇所に記述
<time>{{ new Date() | format-date }}</time>
これをday.jsの仕様に変更していく。
moment.jsをday.jsに変更
moment.jsのアンインストールとday.jsのインストール
npm install @nuxtjs/moment
npm install dayjs
pluginフォルダ内にday.jsを作成する。moment.jsと異なるのは、日本語化設定はnuxt.config.jsではなくday.js内で行う点である。
※2022年5月5日追記 Vue3系で
filter
非推奨になる予定なので、先々の対応のためにfilter
を使わない記法に変更
day.js
// 日本語化できるようインポート
import 'dayjs/locale/ja'
import Vue from 'vue'
import dayjs from 'dayjs'
// 日本語化設定
dayjs.locale('ja')
// Vue3系でfilter非推奨のため、以下に変更
Vue.prototoye.$dayjs = dayjs
nuxt.config.js
// グローバルでpluginを使えるようにする
plugins: [
{src: '~/plugins/day'},
],
vueファイル内の記法はmoment.jsと同じなので、変更する必要はない。
CardList.vue
<li class="c-meta c-meta--published mr-2">
<svg class="c-icon-xs align-text-bottom inline-block"><title>公開日アイコン</title><desc></desc><use xlink:href="#published"/></svg><time :datetime="post.published">{{ post.published | date-format }}</time>
</li>
CardList.vue
<li class="c-meta c-meta--published mr-2">
<svg class="c-icon-xs align-text-bottom inline-block"><title>公開日アイコン</title><desc></desc><use xlink:href="#published"/></svg><time :datetime="$dayjs(post.published).format('YYYY-MM-DD')">{{ $dayjs(post.published).format('YYYY年MM月DD日') }}</time>
</li>