NuxtN
Nuxt•11mo ago
Reinier Kaper

Hydration error with i18n

We're facing hydration errors with nuxt-i18n, because the locale isn't set "fast enough" in a production build for our date formatting utilities.
We use dayjs and we have a watcher for the locale switching in App.vue:
const { locale } = useI18n()
watch(locale, (newLocale) => {
  dates.locale(newLocale)
}, {
  immediate: true,
})


Unfortunately this seems to be too slow in a prod build. Probably because Vue resolves App.vue last, not first.

I tried setting it in a plugin, but nuxt-i18n throws an error when the composable is used in a pluing (bug?).
Not sure how to proceed, this seems like a pretty common thing to do?
Was this page helpful?