dayjs reverts to defaultLocale when rendered server side
So I've got the case that the global language changes depending on some api data:
async fetch() {
const res = await this.$apollo.query({
query: eventSeriesBySlug,
variables: {
'slug': this.$route.params.slug
}
});
this.eventSeries = res.data.eventSeriesBySlug;
// "en"
this.locale = this.eventSeries.language.short;
// i18n works fine and the page updates
this.$i18n.setLocale(this.locale);
// just updates and stays at the locale when rendered client side
this.$dayjs.locale(this.locale);
}
The page / dayjs shows up for like 1 second in the right language but then switches back to whatever is standing in the nuxt config. (also watchable with {{ $dayjs.locale() }} "en" => "de" in my case)
dayjs: {
locales: ['en', 'de'],
defaultLocale: 'de',
defaultTimeZone: 'Europe/Berlin',
plugins: [
'utc', // import 'dayjs/plugin/utc'
'timezone' // import 'dayjs/plugin/timezone'
] // Your Day.js plugin
},
I'm not sure if this is a bug or a missing feature or if there's a workaround for this (but stackoverflow is suspicious quiet on this).
Edit: This just happens when rendered server side! Client side it's fine. But when doing a hard reload, the switch appears. Link: https://stackoverflow.com/questions/71557315/set-global-dayjs-locale-at-nuxt-ssr
I also experience this issue, in that locales are ignored when SSR. This isn't an issue for all formats, as often it doesn't matter, but is and issue when formatting 'd' for instance, which would start Monday 0 got en-gb, but Sunday 0 for default.