'Change dayjs locale in Nuxt3

I cannot change dayjs language display when I change the language.

in plugin/dayjs.js

import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime.js'
import utc from 'dayjs/plugin/utc.js'
import timezone from 'dayjs/plugin/timezone.js'
import updateLocale from 'dayjs/plugin/updateLocale.js'
import 'dayjs/locale/th'
import 'dayjs/locale/en'

export default defineNuxtPlugin((nuxtApp) => {
  dayjs.extend(relativeTime)
  dayjs.extend(utc)
  dayjs.extend(timezone)
  dayjs.extend(updateLocale)

  dayjs.locale('th')
  nuxtApp.provide('dayjs', dayjs)
}

in composable

import * as dayjs from 'dayjs'
...
const setLocale = (l) => {
    dayjs.locale(l)
    //dayjs.updateLocale(l)  <- Try this already
   ...
}
...

On pages, I check the current locale but it can switch between 'th' and 'en' but dayjs display the English language.

$dayjs().locale()

P.S. I try to use @nuxt/[email protected] but It does not work so I change to dayjs.

P.S.2 relativeTime plugin is changed but the display time format isn't changed.

ref. https://github.com/nuxt-community/dayjs-module/issues/376



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source