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

1# Using pnpm
2pnpm add -D @gabortorma/nuxt-dayjs-i18n
3
4# Using yarn
5yarn add --dev @gabortorma/nuxt-dayjs-i18n
6
7# Using npm
8npm install --save-dev @gabortorma/nuxt-dayjs-i18n

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

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

Configuration

You can specify the plugins, set ato provide format function

1export default defineNuxtConfig({
2  i18n: {
3    locales: [{
4      code: 'en-gb',
5      language: 'en-GB',
6      file: 'en-gb.ts',
7      name: 'English',
8    }, {
9      // use same code with dayjs locale file names:
10      // https://github.com/iamkun/dayjs/tree/dev/src/locale
11      code: 'hu',
12      language: 'hu-HU',
13      file: 'hu.ts',
14      name: 'Magyar',
15    }],
16  },
17  dayjs: {
18    // locales: ['en-gb', 'hu'],
19    // locales not needed, it automatically comes from i18n
20
21    // defaultLocale: 'en'
22    // !! don't use defaultLocale, it comes from i18n
23  },
24  dayjsI18n: {
25    computedPlugins: true, // you can specify in array: ['localiztedFormat', 'relativeTime', 'localeData']
26    provideFormat: true, // provide $df for Vue
27  }
28})

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

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

Relative time

computedFrom

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

computedFromNow

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

computedTo

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

computedToNow

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

Locale data

1const monthsInComputed = computed(() => dayjs.localeData().months())
2// still reactive, months result value changes when locale is changed by i18n.setLocale
3
4dayjs.localeData().xxxx()
5// 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.

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

Development

1# Install dependencies
2npm install
3
4# Generate type stubs
5npm run dev:prepare
6
7# Develop with the playground
8npm run dev
9
10# Build the playground
11npm run dev:build
12
13# Run ESLint
14npm run lint
15
16# Run Vitest
17npm run test
18npm run test:watch
19
20# Release new version
21npm run release