Nuxt3でDayJSを使用する

上手く動くのに時間がかかったのでメモ

Day.jsをインストール

npm i dayjs

pluginsの作成

plugins/以下にdayjs.tsを新規作成する：

import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime.js'
import { defineNuxtPlugin } from '#app'

export default defineNuxtPlugin((nuxtApp) => {
    dayjs.extend(relativeTime)
    nuxtApp.provide('dayjs', dayjs)
})

declare module '#app' {
    interface NuxtApp {
        dayjs: dayjs.Dayjs
    }
}
declare module '@vue/runtime-core' {
    interface ComponentCustomProperties {
        dayjs(date?: dayjs.ConfigType): dayjs.Dayjs
    }
}

呼び出すときは以下のようにする：

const nuxtApp = useNuxtApp();
const dt = nuxtApp.$dayjs().format('YYYY-MM-DD')

• もっとスマートなやり方もあるような。
• $dayjsの$はおまじない(死語)だと思っています。

参考