feat: i18n lazy load
parent
ccffe9daa8
commit
07209a7d29
7
app.vue
7
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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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
|
||||
})
|
||||
}
|
|
@ -6,7 +6,7 @@ const { error } = defineProps<{
|
|||
error: Partial<NuxtError>
|
||||
}>()
|
||||
|
||||
usePageHeader()
|
||||
setupPageHeader()
|
||||
|
||||
// add more custom status codes messages here
|
||||
const errorCodes: Record<number, string> = {
|
||||
|
|
|
@ -104,8 +104,7 @@ export default defineNuxtConfig({
|
|||
vueI18n: {
|
||||
fallbackLocale: 'en-US',
|
||||
},
|
||||
// TODO:
|
||||
// lazy: true,
|
||||
lazy: true,
|
||||
},
|
||||
})
|
||||
|
||||
|
|
Loading…
Reference in New Issue