fix: persist user's locale (#527)

Author: DDeenis

app/composables/useSettings.ts

@@ -1,6 +1,7 @@
 import type { RemovableRef } from '@vueuse/core'
 import { useLocalStorage } from '@vueuse/core'
 import { ACCENT_COLORS } from '#shared/utils/constants'
+import type { LocaleObject } from '@nuxtjs/i18n'
 
 type AccentColorId = keyof typeof ACCENT_COLORS
 
@@ -16,6 +17,8 @@ export interface AppSettings {
   accentColorId: AccentColorId | null
   /** Hide platform-specific packages (e.g., @scope/pkg-linux-x64) from search results */
   hidePlatformPackages: boolean
+  /** User-selected locale */
+  selectedLocale: LocaleObject['code'] | null
   sidebar: {
     collapsed: string[]
   }
@@ -26,6 +29,7 @@ const DEFAULT_SETTINGS: AppSettings = {
   includeTypesInInstall: true,
   accentColorId: null,
   hidePlatformPackages: true,
+  selectedLocale: null,
   sidebar: {
     collapsed: [],
   },

app/pages/settings.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 const router = useRouter()
 const { settings } = useSettings()
-const { locale, locales, setLocale } = useI18n()
+const { locale, locales, setLocale: setNuxti18nLocale } = useI18n()
 const colorMode = useColorMode()
 const { currentLocaleStatus, isSourceLocale } = useI18nStatus()
 
@@ -28,6 +28,11 @@ defineOgImageComponent('Default', {
   description: () => $t('settings.tagline'),
   primaryColor: '#60a5fa',
 })
+
+const setLocale: typeof setNuxti18nLocale = locale => {
+  settings.value.selectedLocale = locale
+  return setNuxti18nLocale(locale)
+}
 </script>
 
 <template>

app/plugins/i18n-loader.client.ts

@@ -0,0 +1,20 @@
+export default defineNuxtPlugin({
+  enforce: 'post',
+  env: { islands: false },
+  setup() {
+    const { $i18n } = useNuxtApp()
+    const { locale, locales, setLocale } = $i18n
+    const { settings } = useSettings()
+    const settingsLocale = settings.value.selectedLocale
+
+    if (
+      settingsLocale &&
+      //   Check if the value is a supported locale
+      locales.value.map(l => l.code).includes(settingsLocale) &&
+      //   Check if the value is not a current locale
+      settingsLocale !== locale.value
+    ) {
+      setLocale(settingsLocale)
+    }
+  },
+})