Настраиваем dayjs с локализациями в Nuxt

Эта заметка и все фрагменты кода написаны болью, которую достаточно долгое время вызывал у меня баг в этом блоге с мерцающими датами из-за неверного определения локали во время рендеринга на стороне сервера.

К сожалению, не все хуки Nuxt работают как ожидается именно при рендеринге в статический сайт из-за чего разборки и фикс затянулись на относительно продолжительное время. Ниже краткий гайд на простой и эффективный сетап, который я использую в данный момент.

Устанавливаем dayjs используя любой пакетный менеджер:

Terminal

npm install dayjs

Есть достаточно много способов, с помощью которых мы можем настроить использование dayjs по проекту, но я предпочитаю Nuxt плагины.

Хук i18n:localeSwitched нужен только если вы используете @nuxtjs/i18n (что в целом логично, если вам нужен мультиязычный сайт). Он позволяет переключать локализацию dayjs при переключении локали сайта.

Используем дефолтную схему с vue.provide(...), чтобы инжектить dayjs в нужных нам местах.

plugins/dayjs.ts

import dayjs from 'dayjs'

import dayjs_en from 'dayjs/locale/en'
import dayjs_ru from 'dayjs/locale/ru'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.provide('dayjs', dayjs);

  nuxtApp.hook('i18n:localeSwitched', ({ newLocale }) => {
    dayjs.locale(newLocale === 'ru' ? dayjs_ru : dayjs_en)
  })
});

Регистрируем плагин в nuxt.config.ts:

nuxt.config.ts

export default defineNuxtConfig({
  ...
  plugins: [
    '~/plugins/dayjs.ts'
  ],
  ...

И используем в нужных нам местах через inject('dayjs'):

components/NoteCard.vue

<script setup>
const dayjs = inject('dayjs')
const { locale } = useI18n()
...
</script>

<template>
  ...
  <span>{{ dayjs(props.date).locale(locale).format('MMMM D, YYYY') }}</span>
  ...
</template>

В текущей версии Nuxt я вынужден использовать .locale(locale) в дополнение к основному плагину, чтобы избежать ошибок и мерцаний при рендеринге на сервере/клиенте.

Не стану в этой заметке объяснять, почему вы должны использовать dayjs, а не всеми излюбленный momentjs. Возможно, разберем этот вопросик в следующий раз — пока же просто доверьтесь и делайте правильный выбор.