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

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

  • 公開日アイコン

Ad Area

時刻表記するのに便利なJavaScriptプラグイン「Moment.js」のプロジェクト終了が決まっていたらしい。そうとは知らず当ブログのNuxt.jsプロジェクトで取り入れていたので、別のプラグイン「Day.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のインストール

npm install @nuxtjs/moment

npm install dayjs

pluginフォルダ内にday.jsを作成する。moment.jsと異なるのは、日本語化設定はnuxt.config.jsではなくday.js内で行う点である。

day.js
// 日本語化できるようインポート
import 'dayjs/locale/ja'
import Vue from 'vue'
import dayjs from 'dayjs'

// 日本語化設定
dayjs.locale('ja')

// momentをdayjsに置換するだけ
Vue.filter('format-date', function (value) {
  const date = dayjs(value);
  return date.format("YYYY.MM.DD(ddd)");
})
nuxt.config.js
// グローバルでpluginを使えるようにする記述だけでOK
plugins: [
  {src: '~/plugins/day'},
],

vueファイル内の記法はmoment.jsと同じなので、変更する必要はない。

参考ページ

Ad Area