refactor: setup

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>

components/settings/SettingsFontSize.vue

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

components/settings/SettingsLanguage.vue

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

composables/setups.ts

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

error.vue

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

plugins/setup-emojis.ts

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

plugins/setup-i18n.ts

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