Using DayJS in Nuxt 3 as plugin

Currently Nuxt 3 is in RC stage, hopefully in June it will be released... Lots of plugins are still being rewritten/adopted for a new version. DayJS is no exception, so we have to manually create a plugin and use it.

Let's create a file dayjs.ts: /plugins/dayjs.ts

import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime.js'

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
  }
}

Now we can use it in our templates, like this:

$dayjs().format()

If VSCode still not recognizing dayjs, then just reload typescript server, or restart vite server.