Version Packages

apps/docs/package.json

@@ -13,14 +13,14 @@
     "start": "node .output/server/index.mjs"
   },
   "devDependencies": {
-    "@formatjs/cli": "^6.1.1",
-    "@nuxt-themes/docus": "^1.12.0",
+    "@formatjs/cli": "^6.1.2",
+    "@nuxt-themes/docus": "^1.12.3",
     "@nuxt/eslint-config": "^0.1.1",
     "@vintl-dev/eslint-config-peony": "workspace:^",
     "@vintl/nuxt": "workspace:^",
-    "eslint": "^8.41.0",
-    "nuxi": "^3.5.1",
-    "nuxt": "^3.5.1",
+    "eslint": "^8.42.0",
+    "nuxi": "^3.5.3",
+    "nuxt": "^3.5.3",
     "theme-colors": "^0.0.5",
     "vue": "^3.3.4"
   }

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,15 +10,15 @@
     "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": {
     "@vintl-dev/eslint-config-peony": "workspace:^",
     "@vintl-dev/pg-messages": "workspace:^",
     "@vintl/nuxt": "workspace:^",
-    "eslint": "^8.41.0",
-    "nuxi": "^3.5.1",
-    "nuxt": "^3.5.1"
+    "eslint": "^8.42.0",
+    "nuxi": "^3.5.3",
+    "nuxt": "^3.5.3"
   }
 }

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>

package.json

@@ -8,7 +8,7 @@
   ],
   "devDependencies": {
     "@changesets/cli": "^2.26.1",
-    "turbo": "^1.9.8"
+    "turbo": "^1.10.1"
   },
   "scripts": {
     "pg:prepare": "turbo run --no-daemon @vintl-dev/pg#dev:prepare",
@@ -36,5 +36,5 @@
       }
     }
   },
-  "packageManager": "pnpm@8.5.1"
+  "packageManager": "pnpm@8.6.1"
 }

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/eslint-config/package.json

@@ -26,14 +26,14 @@
     "config.json"
   ],
   "dependencies": {
-    "@rushstack/eslint-patch": "^1.2.0",
-    "@typescript-eslint/eslint-plugin": "^5.59.6",
-    "@typescript-eslint/parser": "^5.59.6",
-    "eslint-plugin-vue": "^9.13.0",
-    "typescript": "^5.0.4"
+    "@rushstack/eslint-patch": "^1.3.0",
+    "@typescript-eslint/eslint-plugin": "^5.59.9",
+    "@typescript-eslint/parser": "^5.59.9",
+    "eslint-plugin-vue": "^9.14.1",
+    "typescript": "^5.1.3"
   },
   "devDependencies": {
-    "@types/eslint": "^8.37.0",
-    "eslint": "^8.41.0"
+    "@types/eslint": "^8.40.0",
+    "eslint": "^8.42.0"
   }
 }

packages/vintl-nuxt/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @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
+
+- db449d4: Fix missing options in the newer Nuxt versions
+
+## 1.2.2
+
+### Patch Changes
+
+- 2590b2f: Downgrade and pin versions of FormatJS packages
+
+  Newest versions of FormatJS packages contain exports map that result in illegal ESM as CJS imports. This downgrades them
+
+  For more details see the issue at https://github.com/formatjs/formatjs/issues/4126.
+
+## 1.2.1
+
+### Patch Changes
+
+- f62ae92: Adapt to new export conditions of the parser
+
+  `@formatjs/icu-messageformat-parser` has been updated and now has export conditions, this change adapts and fixes the error caused by the previous direct import of the file for `no-parser` alias.
+
+- 47f1739: Fix consola not being actually listed as a dependency or used
+
 ## 1.2.0
 
 ### Minor Changes

packages/vintl-nuxt/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vintl/nuxt",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Nuxt Module for VIntl integration",
   "keywords": [
     "i18n",
@@ -39,25 +39,27 @@
     "prepack": "pnpm run -s lint && pnpm run -s build"
   },
   "devDependencies": {
-    "@nuxt/module-builder": "^0.3.1",
-    "@nuxt/schema": "^3.5.0",
+    "@nuxt/module-builder": "^0.4.0",
+    "@nuxt/schema": "^3.5.3",
     "@types/hash-sum": "^1.0.0",
-    "@types/node": "^18.16.13",
+    "@types/node": "^18.16.16",
     "@unhead/vue": "^1.1.27",
     "@vintl-dev/eslint-config-peony": "workspace:^",
     "hookable": "^5.5.3",
     "prettier-plugin-jsdoc": "^0.4.2",
-    "typescript": "^5.0.4"
+    "typescript": "^5.1.3"
   },
   "dependencies": {
-    "@formatjs/intl": "^2.7.2",
-    "@nuxt/kit": "^3.5.0",
-    "@vintl/unplugin": "^1.2.1",
-    "@vintl/vintl": "^4.2.0",
-    "astring": "^1.8.5",
+    "@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",
+    "astring": "^1.8.6",
+    "consola": "^3.1.0",
     "hash-sum": "^2.0.0",
     "import-meta-resolve": "^3.0.0",
-    "pathe": "^1.1.0",
+    "pathe": "^1.1.1",
     "picocolors": "^1.0.0",
     "slash": "^5.1.0",
     "zod": "^3.21.4"

packages/vintl-nuxt/src/module.ts

@@ -21,16 +21,16 @@ import { moduleOptionsSchema } from './schemas/index.js'
 import { PluginOptionsBank } from './parser-bank.js'
 import { formatZodError } from './utils/zod-error.js'
 import { OptionsError } from './errors.js'
-import * as consola from 'console'
+import { consola } from 'consola'
 
 /** Path to the options file relative to `buildDir`. */
 const optionsFilePath = 'i18n/options.mjs'
 
 type _InputModuleOptions = typeof moduleOptionsSchema
 
-export interface InputModuleOptions extends t.input<_InputModuleOptions> {}
+export interface ModuleOptions extends t.input<_InputModuleOptions> {}
 
-export default defineNuxtModule<InputModuleOptions>({
+export default defineNuxtModule<ModuleOptions>({
   meta: {
     name: '@vintl/nuxt',
     configKey: 'vintl',

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