feat: save locale in cookies, set lang and dir html attrs

app/pages/settings.vue

@@ -2,12 +2,18 @@
 const router = useRouter()
 const { settings } = useSettings()
 const { locale, locales, setLocale } = useI18n()
+const localeCookie = useCookie('npmx-locale')
 const colorMode = useColorMode()
 
 const availableLocales = computed(() =>
   locales.value.map(l => (typeof l === 'string' ? { code: l, name: l } : l)),
 )
 
+async function handleLocaleChange(nextLocale: typeof locale.value) {
+  localeCookie.value = nextLocale
+  await setLocale(nextLocale)
+}
+
 /**
  * Check if it's safe to navigate back (previous page was same origin).
  * Uses document.referrer to verify the user came from this site.
@@ -144,7 +150,9 @@ useSeoMeta({
             id="language-select"
             :value="locale"
             class="w-full bg-bg-muted border border-border rounded-md px-2 py-1.5 text-sm text-fg focus:outline-none focus:ring-2 focus:ring-fg/50 cursor-pointer"
-            @change="setLocale(($event.target as HTMLSelectElement).value as typeof locale)"
+            @change="
+              handleLocaleChange(($event.target as HTMLSelectElement).value as typeof locale)
+            "
           >
             <option v-for="loc in availableLocales" :key="loc.code" :value="loc.code">
               {{ loc.name }}

app/plugins/i18n-head.ts

@@ -0,0 +1,7 @@
+export default defineNuxtPlugin(() => {
+  const localeHead = useLocaleHead({ dir: true, lang: true, seo: true })
+
+  useHead(() => ({
+    htmlAttrs: localeHead.value.htmlAttrs,
+  }))
+})

nuxt.config.ts

@@ -47,7 +47,6 @@ export default defineNuxtConfig({
 
   app: {
     head: {
-      htmlAttrs: { lang: 'en' },
       link: [
         {
           rel: 'search',
@@ -180,7 +179,12 @@ export default defineNuxtConfig({
   i18n: {
     defaultLocale: 'en',
     strategy: 'no_prefix',
-    detectBrowserLanguage: false,
+    detectBrowserLanguage: {
+      useCookie: true,
+      cookieKey: 'npmx-locale',
+      fallbackLocale: 'en-US',
+      alwaysRedirect: false,
+    },
     langDir: 'locales',
     locales: [
       { code: 'en', language: 'en-US', name: 'English', file: 'en.json' },