Nuxt Dayjs i18n
Extend dayjs-nuxt plugin with automatic i18n locale switching, computed plugins and provide format function.
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
- 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
- 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