Nuxt Dayjs i18n

Extend dayjs-nuxt plugin with automatic i18n locale switching, computed plugins and provide format function.

• ✨  Release Notes
• 👾  Playground

Instructions

• It automatically call dayjs.locale('en') when i18n.setLocale('en') is called.
• Always use i18n.setLocale('en') function instead of setting i18n.locale.value = 'en', because value setting not fire the i18n:beforeLocaleSwitch and i18n:localeSwitched nuxt hooks.
• Don't use dayjs.locale function, because it doesn't called back the i18n.setLocale.
• You can change locales locally with dayjs().locale('en') function.

Quick Setup

1. Add nuxt-dayjs-i18n dependency to your project

# Using pnpm
pnpm add -D @gabortorma/nuxt-dayjs-i18n

# Using yarn
yarn add --dev @gabortorma/nuxt-dayjs-i18n

# Using npm
npm install --save-dev @gabortorma/nuxt-dayjs-i18n

2. Add nuxt-dayjs-i18n to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@gabortorma/nuxt-dayjs-i18n', '@nuxtjs/i18n', 'nuxt-dayjs'],
})

Configuration

You can specify the plugins, set ato provide format function

export default defineNuxtConfig({
  i18n: {
    locales: [{
      code: 'en-gb',
      language: 'en-GB',
      file: 'en-gb.ts',
      name: 'English',
    }, {
      // use same code with dayjs locale file names:
      // https://github.com/iamkun/dayjs/tree/dev/src/locale
      code: 'hu',
      language: 'hu-HU',
      file: 'hu.ts',
      name: 'Magyar',
    }],
  },
  dayjs: {
    // locales: ['en-gb', 'hu'],
    // locales not needed, it automatically comes from i18n

    // defaultLocale: 'en'
    // !! don't use defaultLocale, it comes from i18n
  },
  dayjsI18n: {
    computedPlugins: true, // you can specify in array: ['localiztedFormat', 'relativeTime', 'localeData']
    provideFormat: true, // provide $df for Vue
  }
})

Debug options removed

Use CONSOLA_LEVEL environment variable instead.

Basic usage

You can check dayjs-nuxt

Usage in computed value

Original dayjs function lost reactivity in computed value and does not change when the locale is changed. These three computed plugin provides a solution for this.

Localized format

const formatInComputed = computed(() => dayjs(new Date()).format('L LTS'))
// still reactive, format result value changes when locale is changed by i18n.setLocale

Relative time

computedFrom

const fromInComputed = computed(() => dayjs(new Date()).from('2023-01-01'))
// still reactive, from result value changes when locale is changed by i18n.setLocale

computedFromNow

const fromNowInComputed = computed(() => dayjs(new Date()).fromNow())
// still reactive, fromNow result value changes when locale is changed by i18n.setLocale

computedTo

const toInComputed = computed(() => dayjs(new Date()).to('2023-01-01'))
// still reactive, to result value changes when locale is changed by i18n.setLocale

computedToNow

const toNowInComputed = computed(() => dayjs(new Date()).toNow())
// still reactive, toNow result value changes when locale is changed by i18n.setLocale

Locale data

const monthsInComputed = computed(() => dayjs.localeData().months())
// still reactive, months result value changes when locale is changed by i18n.setLocale

dayjs.localeData().xxxx()
// still reactive, result value of any function of localeData changes when locale is changed by i18n.setLocale

You can check more examples in Playground

Provided format

You can use the provided format function anywhere.

<template>
  <div>
    {{ $df('2023-09-07 15:00:02', 'L LTS') }}
    // en-US output: 09/07/2023 3:00:02 PM
  </div>
</template>

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release