fix: fallback when cookie is wrong

package.json

@@ -32,6 +32,7 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.9.0",
+    "destr": "^2.0.2",
     "glob": "^10.3.10",
     "knitwork": "^1.0.0",
     "pathe": "^1.1.1",

src/runtime/composables/internal.ts

@@ -1,6 +1,7 @@
 import type { LocaleCode } from "#build/locales/lazy-import"
 import { available } from '#build/locales/available'
 import { computed, useCookie, useState } from "#imports"
+import destr from "destr"
 
 export function useLocalesInternal() {
   const _locales: Array<{ name: string, code: LocaleCode }> = available as any
@@ -23,8 +24,16 @@ export function useLocalesInternal() {
     }
     return null
   })
-  const userPrefer = useCookie<LocaleCode>('locale', {
+  const userPrefer = useCookie<LocaleCode | null>('locale', {
     maxAge: 35_600 * 24 * 60 * 60, // forever
+    decode: val => {
+      const parsed = destr<string>(decodeURIComponent(val))
+      if (_locales.find(l => l.code === parsed)) {
+        return parsed as LocaleCode
+      }
+      return null
+    },
+    encode: val => encodeURIComponent(typeof val === 'string' ? val : JSON.stringify(val)),
   })
   const locales = computed(() => _locales)
 

test/basic.test.ts

@@ -31,6 +31,16 @@ describe('Basic', async () => {
     })
     check(html, 'ja-JP')
   })
+
+  it('with accept-language and wrong cookie', async () => {
+    const html = await $fetch('/', {
+      headers: {
+        'Accept-Language': 'zh-CN',
+        Cookie: 'locale=ha-CK',
+      },
+    })
+    check(html, 'zh-CN')
+  })
 })
 
 function check(html: string, locale: string) {