refactor: setup
parent
970b6538e2
commit
3079867e2a
3
app.vue
3
app.vue
|
@ -1,10 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
setupPageHeader()
|
||||
setupEmojis()
|
||||
provideGlobalCommands()
|
||||
|
||||
await setupI18n()
|
||||
|
||||
// We want to trigger rerendering the page when account changes
|
||||
const key = computed(() => `${currentUser.value?.server ?? currentServer.value}:${currentUser.value?.account.id || ''}`)
|
||||
</script>
|
||||
|
|
|
@ -7,7 +7,7 @@ const fontSize = useFontSizeRef()
|
|||
|
||||
<template>
|
||||
<select v-model="fontSize">
|
||||
<option v-for="size in sizes" :key="size" :value="size">
|
||||
<option v-for="size in sizes" :key="size" :value="size" :selected="fontSize === size">
|
||||
{{ size }}
|
||||
</option>
|
||||
</select>
|
||||
|
|
|
@ -8,7 +8,7 @@ const { locales } = useI18n() as { locales: ComputedRef<LocaleObject[]> }
|
|||
|
||||
<template>
|
||||
<select :value="locale" @input="e => setLocale((e.target as any).value)">
|
||||
<option v-for="item in locales" :key="item.code" :value="item.code">
|
||||
<option v-for="item in locales" :key="item.code" :value="item.code" :selected="locale === item.code">
|
||||
{{ item.name }}
|
||||
</option>
|
||||
</select>
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import { pwaInfo } from 'virtual:pwa-info'
|
||||
import type { Link } from '@unhead/schema'
|
||||
import type { Directions } from 'vue-i18n-routing'
|
||||
import { APP_NAME, COOKIE_MAX_AGE, STORAGE_KEY_LANG } from '~/constants'
|
||||
import { APP_NAME } from '~/constants'
|
||||
import type { LocaleObject } from '#i18n'
|
||||
|
||||
export function setupPageHeader() {
|
||||
|
@ -46,37 +46,3 @@ export function setupPageHeader() {
|
|||
link,
|
||||
})
|
||||
}
|
||||
|
||||
export async function setupI18n() {
|
||||
const { locale, setLocale, locales } = useI18n()
|
||||
const cookieLocale = useCookie(STORAGE_KEY_LANG, { maxAge: COOKIE_MAX_AGE })
|
||||
const isFirstVisit = cookieLocale.value == null
|
||||
|
||||
if (process.client && isFirstVisit) {
|
||||
const userLang = (navigator.language || 'en-US').toLowerCase()
|
||||
// cause vue-i18n not explicit export LocaleObject type
|
||||
const supportLocales = unref(locales) as { code: string }[]
|
||||
const lang = supportLocales.find(locale => userLang.startsWith(locale.code.toLowerCase()))?.code
|
||||
|| supportLocales.find(locale => userLang.startsWith(locale.code.split('-')[0]))?.code
|
||||
cookieLocale.value = lang || 'en-US'
|
||||
}
|
||||
|
||||
if (cookieLocale.value && cookieLocale.value !== locale.value)
|
||||
await setLocale(cookieLocale.value)
|
||||
|
||||
if (process.client) {
|
||||
watchEffect(() => {
|
||||
cookieLocale.value = locale.value
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export async function setupEmojis() {
|
||||
if (process.client) {
|
||||
const promise = import('@emoji-mart/data').then(r => r.default)
|
||||
const { init } = await import('emoji-mart')
|
||||
init({
|
||||
data: () => promise,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
|
@ -6,8 +6,6 @@ const { error } = defineProps<{
|
|||
error: Partial<NuxtError>
|
||||
}>()
|
||||
|
||||
setupPageHeader()
|
||||
|
||||
// add more custom status codes messages here
|
||||
const errorCodes: Record<number, string> = {
|
||||
404: 'Page not found',
|
||||
|
|
|
@ -0,0 +1,9 @@
|
|||
export default defineNuxtPlugin(() => {
|
||||
if (process.server)
|
||||
return
|
||||
|
||||
const promise = import('@emoji-mart/data').then(r => r.default)
|
||||
import('emoji-mart').then(r => r.init({
|
||||
data: () => promise,
|
||||
}))
|
||||
})
|
|
@ -0,0 +1,26 @@
|
|||
import { COOKIE_MAX_AGE, STORAGE_KEY_LANG } from '~/constants'
|
||||
|
||||
export default defineNuxtPlugin(async (nuxt) => {
|
||||
const i18n = nuxt.vueApp.config.globalProperties.$i18n
|
||||
const { setLocale, locales } = nuxt.vueApp.config.globalProperties.$i18n
|
||||
const cookieLocale = useCookie(STORAGE_KEY_LANG, { maxAge: COOKIE_MAX_AGE })
|
||||
const isFirstVisit = cookieLocale.value == null
|
||||
|
||||
if (process.client && isFirstVisit) {
|
||||
const userLang = (navigator.language || 'en-US').toLowerCase()
|
||||
// cause vue-i18n not explicit export LocaleObject type
|
||||
const supportLocales = unref(locales) as { code: string }[]
|
||||
const lang = supportLocales.find(locale => userLang.startsWith(locale.code.toLowerCase()))?.code
|
||||
|| supportLocales.find(locale => userLang.startsWith(locale.code.split('-')[0]))?.code
|
||||
cookieLocale.value = lang || 'en-US'
|
||||
}
|
||||
|
||||
if (cookieLocale.value && cookieLocale.value !== i18n.locale)
|
||||
await setLocale(cookieLocale.value)
|
||||
|
||||
if (process.client) {
|
||||
watchEffect(() => {
|
||||
cookieLocale.value = i18n.locale
|
||||
})
|
||||
}
|
||||
})
|
Loading…
Reference in New Issue