fix: i18n hydration on dev

jayredk · Jan 15, 2023 · 6b90131 · 6b90131
1 parent f96a941
commit 6b90131
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 13 deletions.
diff --git a/plugins/setup-head-script.server.ts b/plugins/setup-head-script.server.ts
@@ -10,8 +10,7 @@ export default defineNuxtPlugin(() => {
       {
         innerHTML: `
 ;(function() {
-  const handle = localStorage.getItem('${STORAGE_KEY_CURRENT_USER_HANDLE}')
-  if (!handle) { return }
+  const handle = localStorage.getItem('${STORAGE_KEY_CURRENT_USER_HANDLE}') || '[anonymous]'
   const allSettings = JSON.parse(localStorage.getItem('${STORAGE_KEY_SETTINGS}') || '{}')
   const settings = allSettings[handle]
   if (!settings) { return }

diff --git a/plugins/setup-i18n.ts → plugins/setup-i18n.client.ts b/plugins/setup-i18n.ts → plugins/setup-i18n.client.ts
@@ -4,21 +4,15 @@ import type { LocaleObject } from 'vue-i18n-routing'
 export default defineNuxtPlugin(async (nuxt) => {
   const i18n = nuxt.vueApp.config.globalProperties.$i18n as VueI18n
   const { setLocale, locales } = i18n
-  const supportLanguages = (locales as LocaleObject[]).map(locale => locale.code)
   const userSettings = useUserSettings()
-  const lang = userSettings.value.language
+  const lang = $computed(() => userSettings.value.language)
 
-  if (process.client && !supportLanguages.includes(lang))
+  const supportLanguages = (locales as LocaleObject[]).map(locale => locale.code)
+  if (!supportLanguages.includes(lang))
     userSettings.value.language = getDefaultLanguage(locales as string[])
 
-  if (process.server) {
-    if (lang !== i18n.locale)
-      await setLocale(lang)
-    return
-  }
-
-  watch(() => userSettings.value.language, (lang) => {
-    if (lang !== i18n.locale)
+  watch([$$(lang), isHydrated], () => {
+    if (isHydrated.value && lang !== i18n.locale)
       setLocale(lang)
   }, { immediate: true })
 })