feat: i18n lazy load

This commit is contained in:
Anthony Fu 2022-11-30 08:22:35 +08:00
parent ccffe9daa8
commit 07209a7d29
6 changed files with 25 additions and 17 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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>

View file

@ -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
})
}

View file

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

View file

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