Nuxt 3 で days.js で formatDate

Nuxt 2 などでは @nuxtjs/dayjs などを使うのがセオリーでしたが、 Nuxt 3 ではこの辺は使わず plugins を作成して daysjs を直接利用するのがセオリーとなりました。

また、Nuxt 3 では plugins は自動的に読み込まれるので、 nuxt.config.js で plugins: ["~/plugins/days.js"] など指定している場合は削除します。

環境

• https://github.com/nuxt/nuxt
  • v3.8.1
• https://github.com/iamkun/dayjs/
  • v1.11.10

plugins を作成する

Nuxt 3 からは自動的に plugins ディレクトリ配下が読み込まれます。

~/plugins/daysjs.js

import dayjs from "dayjs"
import { defineNuxtPlugin } from "#app"

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.provide("formatDate", (value) => {
    const date = dayjs(value)
    return date.format("YYYY.M.D(ddd.)")
  })
})

nuxtApp.provide を使うと $ 経由で <template> 内で使用できます。

使用法

Vue ファイル側で import は特に必要がありません。

blog.vue

{{ $formatDate(date) }}

date には date: 2023-11-14T04:44:00+0900 のような String が渡ってくるものとするとき、以下のように出力されます。

2023.11.14(Tue.)

感想

• Nuxt 3 だいぶシンプルになったなぁ
• 手作りホームページもライブラリアップデートしました