Nuxt.jsの日付処理系プラグインをmoment.jsからday.jsに移行する

この記事は最終更新日から 1 年以上が経過しており、内容が古くなっている可能性があります。

時刻表記するのに便利な 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>

参考ページ

Suzunatsu

このブログについて

コーディングやWeb関連技術の記事と、買い物など日々のメモから成り立っています。 →少しだけ詳しく

この記事がお役に立ちましたら、サポートをお願いします。

記事トップに戻る

広告