Version Packages

apps/playground/locales/en-US.json

@@ -8,6 +8,9 @@
   "index.other-page": {
     "message": "To the other page"
   },
+  "index.use-automatic": {
+    "message": "Use automatic"
+  },
   "language": {
     "message": "Language"
   },
@@ -17,6 +20,9 @@
   "other-page.back": {
     "message": "Go back"
   },
+  "other-page.description": {
+    "message": "You must've clicked me a thousand times"
+  },
   "other-page.title": {
     "message": "Hello from the other page!"
   }

apps/playground/package.json

@@ -10,7 +10,7 @@
     "generate": "nuxi generate",
     "preview": "nuxi preview",
     "lint": "eslint --cache .",
-    "intl:extract": "formatjs extract \"{,components,composables,layouts,middleware,modules,pages,plugins,utils}/**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" --ignore '**/*.d.ts' --ignore 'node_modules' --out-file locales/en-US.json --format simple",
+    "intl:extract": "formatjs extract \"{,components,composables,layouts,middleware,modules,pages,plugins,utils}/**/*.{vue,ts,tsx,js,jsx,mts,cts,mjs,cjs}\" --ignore '**/*.d.ts' --ignore 'node_modules' --out-file locales/en-US.json --format crowdin",
     "start": "node .output/server/index.mjs"
   },
   "devDependencies": {

apps/playground/pages/index.vue

@@ -23,47 +23,80 @@ const messages = defineMessages({
     id: 'index.other-page',
     defaultMessage: 'To the other page',
   },
+  useAutomatic: {
+    id: 'index.use-automatic',
+    defaultMessage: 'Use automatic',
+  },
 } as const)
 
 const vintl = useVIntl()
 const { formatMessage } = vintl
 
+const changing = ref(false)
+
+async function changeLocale(locale: string) {
+  if (changing.value) return
+  changing.value = true
+  try {
+    await vintl.changeLocale(locale)
+  } catch (err) {
+    console.error('Error changing locale', err)
+  } finally {
+    changing.value = false
+  }
+}
+
+const noop = () => {}
+
 const currentLocale = computed({
   get() {
     return vintl.locale
   },
-  set() {
-    // ignore
+  set(value) {
+    changeLocale(value).then(noop, noop)
   },
 })
 
-async function onLocaleChange(e: Event) {
-  await vintl.changeLocale(
-    (e as Event & { target: HTMLSelectElement }).target.value,
-  )
-}
+const useAutomatic = computed({
+  get() {
+    return vintl.automatic
+  },
+  set(value) {
+    changeLocale(value ? 'auto' : vintl.locale).then(noop, noop)
+  },
+})
 </script>
 
 <template>
   <div>
     <div>
       <h3>{{ formatMessage(messages.options) }}</h3>
-      <label for="language-select">
-        {{ formatMessage(messages.language) }}
-      </label>
-      <select
-        id="language-select"
-        v-model="currentLocale"
-        @change="onLocaleChange"
-      >
-        <option
-          v-for="locale in [...$nuxt.$i18n.$locales.value.keys()]"
-          :key="locale.tag"
-          :value="locale.tag"
-        >
-          {{ locale.tag }}
-        </option>
-      </select>
+      <div>
+        <label>
+          <input v-model="useAutomatic" type="checkbox" />
+          {{ formatMessage(messages.useAutomatic) }}
+        </label>
+      </div>
+
+      <div>
+        <label>
+          {{ formatMessage(messages.language) }}
+          <select
+            id="language-select"
+            v-model="currentLocale"
+            :disabled="vintl.automatic"
+            @change="onLocaleChange"
+          >
+            <option
+              v-for="locale in [...$nuxt.$i18n.$locales.value.keys()]"
+              :key="locale.tag"
+              :value="locale.tag"
+            >
+              {{ locale.tag }}
+            </option>
+          </select>
+        </label>
+      </div>
     </div>
 
     <div>

packages/eslint-config/config.json

@@ -28,7 +28,9 @@
     "no-useless-constructor": "off",
     "@typescript-eslint/no-useless-constructor": "warn",
     "brace-style": "off",
-    "vue/singleline-html-element-content-newline": "off"
+    "vue/singleline-html-element-content-newline": "off",
+    "vue/max-attributes-per-line": "off",
+    "vue/html-self-closing": "off"
   },
   "parserOptions": {
     "extraFileExtensions": [".vue"]

packages/vintl-nuxt/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @vintl/nuxt
 
+## 1.3.0
+
+### Minor Changes
+
+- 951f363: Add graceful fallback for unknown locales in storage
+
+### Patch Changes
+
+- ae71089: Use automatic locale if none returned by the storage
+
+  Fixed a bug where automatic locale would not be restored from the storage properly on the next page reload, despite it being saved properly.
+
 ## 1.2.3
 
 ### Patch Changes

packages/vintl-nuxt/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vintl/nuxt",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "description": "Nuxt Module for VIntl integration",
   "keywords": [
     "i18n",
@@ -51,6 +51,7 @@
   },
   "dependencies": {
     "@formatjs/intl": "2.7.2",
+    "@formatjs/intl-localematcher": "^0.4.0",
     "@nuxt/kit": "^3.5.3",
     "@vintl/unplugin": "^1.2.4",
     "@vintl/vintl": "^4.2.1",

packages/vintl-nuxt/src/runtime/plugin.ts

@@ -21,6 +21,7 @@ import { useAcceptLanguageHeader } from '@vintl/vintl/sources/header'
 import { defineNuxtPlugin } from 'nuxt/app'
 import { syncCaller } from './utils/hookable.js'
 import { initHead } from './head.js'
+import { match as matchLocales } from '@formatjs/intl-localematcher'
 
 export default defineNuxtPlugin(async (nuxtApp) => {
   const locales: LocaleDescriptor[] = Object.entries(localeDefinitions).map(
@@ -53,12 +54,23 @@ export default defineNuxtPlugin(async (nuxtApp) => {
     }
   }
 
+  if (locale != null) {
+    const match = matchLocales(
+      [locale],
+      locales.map(({ tag }) => tag),
+      'en-x-placeholder',
+    )
+
+    locale = match == 'en-x-placeholder' ? undefined : match
+  }
+
   const plugin = createPlugin<MessageValueType>({
     injectInto: [nuxtApp],
     controllerOpts: {
       defaultLocale,
       locales,
       locale,
+      usePreferredLocale: locale == null,
       listen: {
         error(event) {
           nuxtApp.hooks.callHookWith(syncCaller, 'i18n:error', {

pnpm-lock.yaml

@@ -42,7 +42,7 @@ importers:
         version: 3.5.3
       nuxt:
         specifier: ^3.5.3
-        version: 3.5.3(@types/node@20.2.5)(eslint@8.42.0)(rollup@3.23.0)(typescript@4.9.5)
+        version: 3.5.3(@types/node@18.16.16)(eslint@8.42.0)(rollup@3.23.0)(typescript@4.9.5)
       theme-colors:
         specifier: ^0.0.5
         version: 0.0.5
@@ -69,7 +69,7 @@ importers:
         version: 3.5.3
       nuxt:
         specifier: ^3.5.3
-        version: 3.5.3(@types/node@20.2.5)(eslint@8.42.0)(rollup@3.23.0)(typescript@4.9.5)
+        version: 3.5.3(@types/node@18.16.16)(eslint@8.42.0)(rollup@3.23.0)(typescript@4.9.5)
 
   packages/eslint-config:
     dependencies:
@@ -103,6 +103,9 @@ importers:
       '@formatjs/intl':
         specifier: 2.7.2
         version: 2.7.2(typescript@5.1.3)
+      '@formatjs/intl-localematcher':
+        specifier: ^0.4.0
+        version: 0.4.0
       '@nuxt/kit':
         specifier: ^3.5.3
         version: 3.5.3(rollup@3.23.0)
@@ -1026,6 +1029,12 @@ packages:
       tslib: 2.5.2
     dev: false
 
+  /@formatjs/intl-localematcher@0.4.0:
+    resolution: {integrity: sha512-bRTd+rKomvfdS4QDlVJ6TA/Jx1F2h/TBVO5LjvhQ7QPPHp19oPNMIum7W2CMEReq/zPxpmCeB31F9+5gl/qtvw==}
+    dependencies:
+      tslib: 2.5.2
+    dev: false
+
   /@formatjs/intl@2.7.2(typescript@5.1.3):
     resolution: {integrity: sha512-ziiQfnXwY0/rXhtohSAmYMqDjRsihoMKdl8H2aA+FvxG9638E0XrvfBFCb+1HhimNiuqRz5fTY7F/bZtsJxsjA==}
     peerDependencies:
@@ -1560,7 +1569,7 @@ packages:
     resolution: {integrity: sha512-PjVETP7+iZXAs5Q8O4ivl4t6qjWZMZqwiTVogUXHoHGZZcw7GZW3u3tzfYfE1HbzyYJfr236IXqQ02MeR8Fz2w==}
     dev: true
 
-  /@nuxt/vite-builder@3.5.3(@types/node@20.2.5)(eslint@8.42.0)(rollup@3.23.0)(typescript@4.9.5)(vue@3.3.4):
+  /@nuxt/vite-builder@3.5.3(@types/node@18.16.16)(eslint@8.42.0)(rollup@3.23.0)(typescript@4.9.5)(vue@3.3.4):
     resolution: {integrity: sha512-7zEKpGh3iWGRDwbWUa8eRxdLMxZtPzetelmdmXPjtYKGwUebZOcBhpeJ+VgJKOIf4OEj9E7BZS+it/Ji9UG9qw==}
     engines: {node: ^14.18.0 || >=16.10.0}
     peerDependencies:
@@ -1597,8 +1606,8 @@ packages:
       strip-literal: 1.0.1
       ufo: 1.1.2
       unplugin: 1.3.1
-      vite: 4.3.9(@types/node@20.2.5)
-      vite-node: 0.31.4(@types/node@20.2.5)
+      vite: 4.3.9(@types/node@18.16.16)
+      vite-node: 0.31.4(@types/node@18.16.16)
       vite-plugin-checker: 0.6.0(eslint@8.42.0)(typescript@4.9.5)(vite@4.3.9)
       vue: 3.3.4
       vue-bundle-renderer: 1.0.3
@@ -1908,10 +1917,6 @@ packages:
   /@types/node@18.16.16:
     resolution: {integrity: sha512-NpaM49IGQQAUlBhHMF82QH80J08os4ZmyF9MkpCzWAGuOHqE4gTEbhzd7L3l5LmWuZ6E0OiC1FweQ4tsiW35+g==}
 
-  /@types/node@20.2.5:
-    resolution: {integrity: sha512-JJulVEQXmiY9Px5axXHeYGLSjhkZEnD+MDPDGbCbIAbMslkKwmygtZFy1X6s/075Yo94sf8GuSlFfPzysQrWZQ==}
-    dev: true
-
   /@types/normalize-package-data@2.4.1:
     resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
     dev: true
@@ -2322,7 +2327,7 @@ packages:
       '@babel/core': 7.21.8
       '@babel/plugin-transform-typescript': 7.21.3(@babel/core@7.21.8)
       '@vue/babel-plugin-jsx': 1.1.1(@babel/core@7.21.8)
-      vite: 4.3.9(@types/node@20.2.5)
+      vite: 4.3.9(@types/node@18.16.16)
       vue: 3.3.4
     transitivePeerDependencies:
       - supports-color
@@ -2335,7 +2340,7 @@ packages:
       vite: ^4.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 4.3.9(@types/node@20.2.5)
+      vite: 4.3.9(@types/node@18.16.16)
       vue: 3.3.4
     dev: true
 
@@ -2523,7 +2528,7 @@ packages:
       '@vueuse/core': 10.1.2(vue@3.3.4)
       '@vueuse/metadata': 10.1.2
       local-pkg: 0.4.3
-      nuxt: 3.5.3(@types/node@20.2.5)(eslint@8.42.0)(rollup@3.23.0)(typescript@4.9.5)
+      nuxt: 3.5.3(@types/node@18.16.16)(eslint@8.42.0)(rollup@3.23.0)(typescript@4.9.5)
       vue-demi: 0.14.5(vue@3.3.4)
     transitivePeerDependencies:
       - '@swc/core'
@@ -6340,7 +6345,7 @@ packages:
       - webpack-cli
     dev: true
 
-  /nuxt@3.5.3(@types/node@20.2.5)(eslint@8.42.0)(rollup@3.23.0)(typescript@4.9.5):
+  /nuxt@3.5.3(@types/node@18.16.16)(eslint@8.42.0)(rollup@3.23.0)(typescript@4.9.5):
     resolution: {integrity: sha512-fG39BZ5N5ATtmx2vuxN8APQPSlSsCDpfkJ0k581gMc7eFztqrBzPncZX5w3RQLW7AiGBE2yYEfqiwC6AVODBBg==}
     engines: {node: ^14.18.0 || >=16.10.0}
     hasBin: true
@@ -6356,8 +6361,8 @@ packages:
       '@nuxt/schema': 3.5.3(rollup@3.23.0)
       '@nuxt/telemetry': 2.2.0(rollup@3.23.0)
       '@nuxt/ui-templates': 1.1.1
-      '@nuxt/vite-builder': 3.5.3(@types/node@20.2.5)(eslint@8.42.0)(rollup@3.23.0)(typescript@4.9.5)(vue@3.3.4)
-      '@types/node': 20.2.5
+      '@nuxt/vite-builder': 3.5.3(@types/node@18.16.16)(eslint@8.42.0)(rollup@3.23.0)(typescript@4.9.5)(vue@3.3.4)
+      '@types/node': 18.16.16
       '@unhead/ssr': 1.1.27
       '@unhead/vue': 1.1.27(vue@3.3.4)
       '@vue/shared': 3.3.4
@@ -8738,7 +8743,7 @@ packages:
       vfile-message: 3.1.4
     dev: true
 
-  /vite-node@0.31.4(@types/node@20.2.5):
+  /vite-node@0.31.4(@types/node@18.16.16):
     resolution: {integrity: sha512-uzL377GjJtTbuc5KQxVbDu2xfU/x0wVjUtXQR2ihS21q/NK6ROr4oG0rsSkBBddZUVCwzfx22in76/0ZZHXgkQ==}
     engines: {node: '>=v14.18.0'}
     hasBin: true
@@ -8748,7 +8753,7 @@ packages:
       mlly: 1.3.0
       pathe: 1.1.1
       picocolors: 1.0.0
-      vite: 4.3.9(@types/node@20.2.5)
+      vite: 4.3.9(@types/node@18.16.16)
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -8805,14 +8810,14 @@ packages:
       strip-ansi: 6.0.1
       tiny-invariant: 1.3.1
       typescript: 4.9.5
-      vite: 4.3.9(@types/node@20.2.5)
+      vite: 4.3.9(@types/node@18.16.16)
       vscode-languageclient: 7.0.0
       vscode-languageserver: 7.0.0
       vscode-languageserver-textdocument: 1.0.8
       vscode-uri: 3.0.7
     dev: true
 
-  /vite@4.3.9(@types/node@20.2.5):
+  /vite@4.3.9(@types/node@18.16.16):
     resolution: {integrity: sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==}
     engines: {node: ^14.18.0 || >=16.0.0}
     hasBin: true
@@ -8837,7 +8842,7 @@ packages:
       terser:
         optional: true
     dependencies:
-      '@types/node': 20.2.5
+      '@types/node': 18.16.16
       esbuild: 0.17.19
       postcss: 8.4.24
       rollup: 3.23.0