feat: i18n lazy load

app.vue

@@ -1,5 +1,6 @@
 <script setup>
-usePageHeader()
+setupPageHeader()
+await setupI18n()
 
 // We want to trigger rerendering the page when account changes
 const key = computed(() => useMasto().instances.config.url || 'default')
@@ -10,7 +11,5 @@ const key = computed(() => useMasto().instances.config.url || 'default')
   <NuxtLayout :key="key">
     <NuxtPage />
   </NuxtLayout>
-  <TeleportTarget
-    id="teleport-end"
-  />
+  <TeleportTarget id="teleport-end" />
 </template>

components/nav/SelectLanguage.vue

@@ -1,15 +1,9 @@
 <script lang="ts" setup>
 import type { ComputedRef } from 'vue'
 import type { LocaleObject } from '#i18n'
-import { STORAGE_KEY_LANG } from '~/constants'
 
 const { locale, t, setLocale } = useI18n()
 const { locales } = useI18n() as { locales: ComputedRef<LocaleObject[]> }
-useLocalStorage(STORAGE_KEY_LANG, locale)
-
-const handleLocale = async (locale: string) => {
-  await setLocale(locale)
-}
 </script>
 
 <template>
@@ -24,7 +18,7 @@ const handleLocale = async (locale: string) => {
           v-for="item in locales"
           :key="item.code"
           :checked="item.code === locale"
-          @click="handleLocale(item.code)"
+          @click="setLocale(item.code)"
         >
           {{ item.name }}
         </CommonDropdownItem>

components/user/UserSwitcher.vue

@@ -14,7 +14,8 @@ const router = useRouter()
 const switchUser = (user: UserLogin) => {
   if (user.account.id === currentUser.value?.account.id)
     router.push(getAccountPath(user.account))
-  else loginTo(user)
+  else
+    loginTo(user)
 }
 </script>
 

composables/setups.ts

@@ -1,10 +1,11 @@
-import { APP_NAME } from '~/constants'
+import { APP_NAME, STORAGE_KEY_LANG } from '~/constants'
 
 const isDev = process.dev
 const isPreview = window.location.hostname.includes('deploy-preview')
 
-export function usePageHeader() {
+export function setupPageHeader() {
   const i18n = useI18n()
+
   useHeadFixed({
     htmlAttrs: {
       lang: () => i18n.locale.value,
@@ -21,3 +22,17 @@ export function usePageHeader() {
   // eslint-disable-next-line no-unused-expressions
   isDark.value
 }
+
+export async function setupI18n() {
+  // TODO: guess user language
+
+  const { locale, setLocale } = useI18n()
+  const localeStorage = useLocalStorage(STORAGE_KEY_LANG, locale.value)
+
+  if (localeStorage.value !== locale.value)
+    await setLocale(localeStorage.value)
+
+  watchEffect(() => {
+    localeStorage.value = locale.value
+  })
+}

error.vue

@@ -6,7 +6,7 @@ const { error } = defineProps<{
   error: Partial<NuxtError>
 }>()
 
-usePageHeader()
+setupPageHeader()
 
 // add more custom status codes messages here
 const errorCodes: Record<number, string> = {

nuxt.config.ts

@@ -104,8 +104,7 @@ export default defineNuxtConfig({
     vueI18n: {
       fallbackLocale: 'en-US',
     },
-    // TODO:
-    // lazy: true,
+    lazy: true,
   },
 })