この記事は最終更新日から 2 年以上が経過しており、内容が古くなっている可能性があります。
時刻表記するのに便利な JavaScript プラグイン「Moment.js」のプロジェクト終了が決まっていたらしい。そうとは知らず当ブログの Nuxt.js プロジェクトで取り入れていたので、別のプラグイン「Day.js」に移行することにした。
moment.js
「日付処理系ライブラリの決定版「Moment.js」を使って Nuxt.js での日付操作を楽にしよう | PAPADAYS.COM」を参考に行った 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日");
});
// グローバルで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を使わない記法に変更
// 日本語化できるようインポート
import "dayjs/locale/ja";
import Vue from "vue";
import dayjs from "dayjs";
// 日本語化設定
dayjs.locale("ja");
// Vue3系でfilter非推奨のため、以下に変更
Vue.prototoye.$dayjs = dayjs;
// グローバルでpluginを使えるようにする
plugins: [
{src: '~/plugins/day'},
],
vue ファイル内の記法は moment.js と同じなので、変更する必要はない。
<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>
<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>
参考ページ
☕コーヒーをおごる
