From 6b901317832fc77c1470bc5886f1a9b80be97a84 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Sun, 15 Jan 2023 23:15:03 +0800
Subject: [PATCH] fix: i18n hydration on dev

---
 plugins/setup-head-script.server.ts             |  3 +--
 plugins/{setup-i18n.ts => setup-i18n.client.ts} | 16 +++++-----------
 2 files changed, 6 insertions(+), 13 deletions(-)
 rename plugins/{setup-i18n.ts => setup-i18n.client.ts} (63%)

diff --git a/plugins/setup-head-script.server.ts b/plugins/setup-head-script.server.ts
index 21c46b63..b7a8a99f 100644
--- 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 b/plugins/setup-i18n.client.ts
similarity index 63%
rename from plugins/setup-i18n.ts
rename to plugins/setup-i18n.client.ts
index 3ea23f27..c8ee103f 100644
--- a/plugins/setup-i18n.ts
+++ b/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 })
 })