\n\n\n### Additional context\n\nAt runtime the locales array is properly available see console log :\n\n\u003Cimg width=\"574\" height=\"98\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/a567197b-ed0e-477c-a908-3ce9b0e47c7d\" />\n\n### Logs\n\n```shell\n\n```",[3188],{"name":3175,"color":3176},3834,"TS error: According to typeScript locales property is not exported by usei18n composable","2025-10-04T07:35:11Z","https://github.com/nuxt-modules/i18n/issues/3834",0.7460876,{"description":3195,"labels":3196,"number":3197,"owner":3178,"repository":3179,"state":3180,"title":3198,"updated_at":3199,"url":3200,"score":3201},"I'm looking at replacing the vuetify locale as described [here](https://vuetifyjs.com/en/features/internationalization/#vue-i18n). As a result, I need to import the vuetify locale objects and add them to the messages from my app.\n\nI'm wondering if something like this is possible:\n```ts\n// i18n\\locales\\en.ts\nimport { en } from 'vuetify/locale'\n\nexport default {\n $vuetify: en,\n\n // my app messages\n errors: { },\n}\n```\n\nI have tried ^, and can't seem to get it working as the raw content is not resolved.\n\nIt looks like I have 2 solutions, but wanted to know if there was a better route:\n1. add messages to vue i18n config:\n```ts\n// i18n.config.ts\nimport { en } from 'vuetify/locale'\n\nexport default defineI18nConfig(() =>\n{\n console.log('here')\n return {\n messages: {\n en: {\n $vuetify: {\n ...en,\n },\n },\n },\n }\n})\n```\n\n2. make use of async `defineI18nLocale`\n```ts\n// i18n\\locales\\en.ts\nimport { en } from 'vuetify/locale'\n\nexport default defineI18nLocale(async (locale) =>\n return {\n $vuetify: en,\n \n // my app messages\n errors: { },\n }\n})\n```",[],3688,"Importing file inside a language file","2025-06-11T18:36:20Z","https://github.com/nuxt-modules/i18n/issues/3688",0.7558723,{"description":3203,"labels":3204,"number":3206,"owner":3178,"repository":3179,"state":3180,"title":3207,"updated_at":3208,"url":3209,"score":3210},"### Describe the feature\n\n### Description\n\nHi there,\nI'm working on a Nuxt project that needs to serve multiple countries, each on a separate domain. Each domain has its own i18n requirements:\n\n* Some domains have **only one official language** (e.g., `site.fr` → French only, no prefix needed).\n* Others have **multiple languages**, and the strategy varies:\n\n * Some use `prefix_except_default` (e.g., `site.ca` with `fr` and `en`)\n * Others use `prefix` (e.g., `site.be` with `fr` and `nl`)\n\n### Constraints:\n\n* I want to **use a single Nuxt build** to serve all domains.\n* I need to **dynamically adapt the i18n config** (strategy, locales, defaultLocale) based on the current domain (host).\n* I also need to **detect the current domain** at runtime (server & client) to configure things like API base URLs.\n* Compatible with SSR & SEO\n\n### Problem\n\nCurrently, I need to generate and deploy **one build per domain** to accommodate the differences in `strategy`, `defaultLocale`, and available `locales`. That means I must build the app **8 times**, which is time-consuming and hard to maintain.\n\n### Question\n\nIs there currently any **official or recommended way** to support multiple domains with different i18n strategies **using a single build**?\n\nIf not, would this be considered a valid feature request, or are there technical constraints that prevent this kind of setup?\n\nThanks a lot for your help!\n\n\n### Additional information\n\n- [ ] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [x] Read the [contribution guide](https://nuxt.com/docs/community/contribution) (The contribution guideline of nuxt-modules/i18n is compliant with Nuxt too).\n- [x] Check existing [discussions](https://github.com/nuxt-modules/i18n/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[3205],{"name":3175,"color":3176},3748,"Support complex multi-domain i18n configurations in a single build","2025-07-22T22:16:46Z","https://github.com/nuxt-modules/i18n/issues/3748",0.7575831,{"description":3212,"labels":3213,"number":3217,"owner":3178,"repository":3179,"state":3218,"title":3219,"updated_at":3220,"url":3221,"score":3222},"I'm using nuxt4+ionic with i18n. the plugin i18n won't initialize. the i18n call the function usehead() from the head.js of ionic, before the initialisation of the app. this is the copy of the console\nruntime-core.esm-bundler.js:51 [Vue warn]: inject() can only be used inside setup() or functional components.\nwarn$1 @ runtime-core.esm-bundler.js:51\ninject @ runtime-core.esm-bundler.js:4075\nuseRoute @ vue-router.mjs:3783\nuseHead @ head.js:11\ncreateComposableContext @ utils.js:54\ncreateNuxtI18nContext @ context.js:114\nsetup @ i18n.js:40\nawait in setup\n(anonymous) @ nuxt.js:138\nfn @ nuxt.js:220\nrunWithContext @ runtime-core.esm-bundler.js:4038\ncallWithNuxt @ nuxt.js:226\n(anonymous) @ nuxt.js:37\nrun @ reactivity.esm-bundler.js:81\nrunWithContext @ nuxt.js:37\napplyPlugin @ nuxt.js:138\nexecutePlugin @ nuxt.js:157\napplyPlugins @ nuxt.js:193\nawait in applyPlugins\ninitApp @ entry.js:58\n(anonymous) @ entry.js:73\nnuxt.js:123 [nuxt] error caught during app initialization TypeError: Cannot read properties of undefined (reading 'path')\n at useHead (head.js:11:33)\n at createComposableContext (utils.js:54:11)\n at createNuxtI18nContext (context.js:114:23)\n at setup (i18n.js:40:17)\n at async applyPlugin (nuxt.js:138:25)\n at async executePlugin (nuxt.js:179:9)\n at async applyPlugins (nuxt.js:193:5)\n at async initApp (entry.js:58:7)\n(anonymous) @ nuxt.js:123\n(anonymous) @ index.mjs:48\n(anonymous) @ index.mjs:48\napp:error\nserialTaskCaller @ index.mjs:46\ncallHookWith @ index.mjs:198\ncallHook @ index.mjs:187\nhandleVueError @ entry.js:43\ninitApp @ entry.js:60\nawait in initApp\n(anonymous) @ entry.js:73\nruntime-core.esm-bundler.js:7073 \u003CSuspense> is an experimental feature and its API will likely change.\n",[3214],{"name":3215,"color":3216},"need reproduction","CD234A",3800,"closed","i18n call usehead function outside the setup function","2025-09-12T15:16:21Z","https://github.com/nuxt-modules/i18n/issues/3800",0.72409576,{"description":3224,"labels":3225,"number":3229,"owner":3178,"repository":3179,"state":3218,"title":3230,"updated_at":3231,"url":3232,"score":3233},"### Environment\n\nOperating System: Linux\nNode Version: v22.11.0\n\"dependencies\": {\n \"@element-plus/icons-vue\": \"^2.3.1\",\n \"@nuxtjs/i18n\": \"^9.5.3\",\n \"@pinia/nuxt\": \"^0.10.1\",\n \"nuxt\": \"^3.16.2\",\n \"pinia\": \"^3.0.1\",\n \"vue\": \"^3.5.13\",\n \"vue-router\": \"^4.5.0\"\n },\n \"devDependencies\": {\n \"@antfu/eslint-config\": \"^4.11.0\",\n \"@element-plus/nuxt\": \"^1.1.1\",\n \"element-plus\": \"^2.9.7\",\n \"eslint\": \"^9.24.0\",\n \"sass\": \"^1.86.3\",\n \"sass-embedded\": \"^1.86.3\",\n \"typescript\": \"^5.8.3\"\n }\n\n### Reproduction\n\n低版本没有这个问题,打印值,服务端一次,客户端一次\n\n\n此次版本:\n\"nuxt\": \"^3.16.2\",\n\"@nuxtjs/i18n\": \"^9.5.3\",\n\n\n目录结构:根目录下 i18n -> locales -> locale.ts\nnuxt.config.ts文件\n\nmodules: [\n '@element-plus/nuxt',\n '@nuxtjs/i18n',\n ],\n i18n: {\n /* 较新版本的 @nuxtjs/i18n 模块中出现警告, 特别是与nuxt3.16.x一起使用 \n * bundle.optimizeTranslationDirective is enabled by default, we recommend disabling this feature as it causes issues and will be deprecated in v10.\n * bundle.optimizeTranslationDirective 功能在未来的 v10 版本中将被弃用,并且开发团队建议禁用它,因为它可能导致问题。\n * 明确设置此选项后,警告会消失,并且应用程序将更好地适应未来的 i18n 模块更新。\n * 如添加之后,警告未消失 1. 比对版本是否兼容 2. 缓存问题,nuxt使用了旧的缓存配置 npx nuxi cleanup\n */\n bundle: {\n optimizeTranslationDirective: false // 明确禁用此功能\n },\n // Module Options\n strategy: 'no_prefix', // 不为路由添加区域前缀\n defaultLocale: 'en', // 默认语种\n detectBrowserLanguage: false, // 禁用浏览器语言检测功能\n lazy: true,\n locales: [\n {\n code: 'en',\n file: 'locale.ts',\n },\n ],\n compilation: {\n strictMessage: false, // 允许message中包含html\n },\n },\n\n### Describe the bug\n\nexport default defineI18nLocale(async (locale) => {\n console.log(locale)\n})\n打印出来,打印了4次,服务端2次,客户端2次\n \n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell\n\n```",[3226],{"name":3227,"color":3228},"scope: dynamic resources","38FB12",3538,"defineI18nLocale Repeated call problem, Server twice, client twice","2025-06-29T18:38:45Z","https://github.com/nuxt-modules/i18n/issues/3538",0.72844905,{"description":3235,"labels":3236,"number":3240,"owner":3178,"repository":3179,"state":3218,"title":3241,"updated_at":3242,"url":3243,"score":3244},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.16.0\r\n- Nuxt Version: 3.7.1\r\n- CLI Version: 3.7.3\r\n- Nitro Version: 2.6.2\r\n- Package Manager: pnpm@8.6.12\r\n- Builder: -\r\n- User Config: extends, telemetry, ssr, fontMetrics, nitro, routeRules, runtimeConfig, build, modules, delayHydration, image, components, bugsnag, devtools, i18n, experimental, pwa, app, dnGraphqlClient, vite, plugins\r\n- Runtime Modules: @nuxtjs/fontaine@0.4.1, @pinia/nuxt@0.4.11, @nuxt/devtools@0.8.2, @vite-pwa/nuxt@0.1.0, nuxt-bugsnag@7.0.0, @digitalnatives/css-variables/nuxt@5.1.3, @digitalnatives/graphql-client@4.0.3, @nuxtjs/i18n@8.0.0-rc.4, @nuxt/image@1.0.0-rc.1, nuxt-delay-hydration@1.2.1, @digitalnatives/composables@2.0.1\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nA naïve reproduction is the following:\r\n\r\n```js\r\nconst route = useRoute(); \r\nconst locale = useLocale();\r\n\r\n// On switch, this will first log the NEW locale with the OLD path, then it will trigger a second time, logging the NEW locale with the NEW path\r\nwatchEffect(() => {\r\n console.log(route.fullPath);\r\n console.log(locale);\r\n});\r\n```\r\n\r\nAdd it to a global component in the layout that doesn't get mounted/umounted on URI change.\r\n\r\n\r\n\r\n### Describe the bug\r\n\r\nWhen using prefixed routes and a language switcher as described in the docs, it seems the locale changes before the route does.\r\n\r\nWhen watching the locale with `useAsyncData()` or `useLazyAsyncData()` this will cause the results of this call to be associated with the wrong URL/path, which then has a side-effect of refetching API data which was already pre-rendered in Nuxt static mode. Therefore, the pre-rendered payload is NOT used in this pattern, even though it should.\r\n\r\nI've also seen this lead to data mismatching to the wrong paths, but this is a bit harder to create a reproduction for.\r\n\r\n### Additional context\r\n\r\nMy current workaround is this;\r\n\r\ncomposable:\r\n```js\r\nexport const useVariables = () => {\r\n const route = useRoute();\r\n const { $i18n }: any = useNuxtApp();\r\n // Don't automatically update the site and url to ensure they both change at the same time\r\n variables.uri = toValue(route.path);\r\n variables.lang = toValue($i18n?.localeProperties)?.apiLanguageHandle;\r\n\r\n // Update variables manually when the route changes, at this point both the locale AND the URI are correct.\r\n watch(() => route.path, () => {\r\n variables.uri = toValue(route.path);\r\n variables.lang = toValue($i18n?.localeProperties)?.apiLanguageHandle;\r\n });\r\n return { variables };\r\n});\r\n```\r\n\r\nthen:\r\n\r\n```js\r\nconst { variables } = useVariables();\r\nuseAsyncData(() => { console.log('trigger!') } , { watch: [ variables ] });\r\n```\r\n\r\n\r\nPerhaps it would be possible to inject the locale & locale properties into the localized route meta? That way we could just watch the route and apply the language from that.\r\n\r\nRelates to #2278 \r\n\r\n### Logs\r\n\r\n_No response_",[3237],{"name":3238,"color":3239},"switch locale","D2FCC6",2377,"`locale` changes BEFORE the route path does, which causes issues with (static) `asyncData`-payloads","2025-05-16T11:44:11Z","https://github.com/nuxt-modules/i18n/issues/2377",0.7332488,{"description":3246,"labels":3247,"number":3248,"owner":3178,"repository":3179,"state":3218,"title":3249,"updated_at":3250,"url":3251,"score":3252},"We are using modules folder within our nuxt project to separate certain parts of our app, Inside of it we have few pages and layouts\nStructure looks like this\n```\nmodules\n shop\n pages\n checkout\n index.vue \n layouts\n checkout.vue \n``` \n\nand issue is that after adding i18n most of website works fine, but checkout/index.vue has default layout, not checkout layout. It depends on route - de/checkout works fine, but just /checkout (which is default language) has broken layout\n\nMy i18n settings inside nuxt.cofig\n```\n\ti18n: {\n\t\tlocales: ['de', 'en'],\n\t\tdefaultLocale: 'en',\n\t\tstrategy: 'prefix_except_default',\n\t\tdetectBrowserLanguage: {\n\t\t\talwaysRedirect: false, \n\t\t},\n\t},\n```\n\nafter doing in my checkout page:\n```\nconst route = useRoute()\nconsole.log('route name:', route.name)\nconsole.log('route meta:', route.meta)\n\n```\nroute meta is undefined in my /checkout page but it has proper value inside /de/checkout\n\nDoes someone has experience with setting up i18n in projects with modules? ",[],3589,"Setting up i18n breaks layouts within modules","2025-05-07T10:41:10Z","https://github.com/nuxt-modules/i18n/issues/3589",0.73556477,{"description":3254,"labels":3255,"number":3262,"owner":3178,"repository":3179,"state":3218,"title":3263,"updated_at":3264,"url":3265,"score":3266},"### Environment\r\n\r\n------------------------------\r\n- Operating System: `Darwin`\r\n- Node Version: `v16.14.0`\r\n- Nuxt Version: `3.0.0`\r\n- Nitro Version: `1.0.0`\r\n- Package Manager: `yarn@1.22.19`\r\n- Builder: `vite`\r\n- User Config: `srcDir`, `ssr`, `modules`, `i18n`, `piniaPersistedstate`, `googleFonts`, `colorMode`, `postcss`, `build`, `vite`\r\n- Runtime Modules: `@nuxtjs/i18n@8.0.0-beta.7`, `@nuxtjs/tailwindcss@6.2.0`, `@nuxtjs/color-mode@3.2.0`, `@nuxtjs/google-fonts@3.0.0-1`, `@pinia/nuxt@0.4.6`, `@pinia-plugin-persistedstate/nuxt@1.0.0`, `@vueuse/nuxt@9.9.0`\r\n- Build Modules: `-`\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nUse this config:\r\n```\r\ni18n: {\r\n strategy: 'prefix_except_default',\r\n defaultLocale: 'fr',\r\n langDir: 'i18n/',\r\n locales: [\r\n {\r\n code: 'fr',\r\n name: 'Français',\r\n iso: 'fr-CA',\r\n momentLocale: 'fr-ca',\r\n },\r\n {\r\n code: 'en',\r\n name: 'English',\r\n iso: 'en-CA',\r\n file: 'en.json',\r\n momentLocale: 'en',\r\n },\r\n ],\r\n vueI18n: {\r\n legacy: false,\r\n fallbackWarn: false,\r\n missingWarn: false,\r\n formatFallbackMessages: true,\r\n },\r\n},\r\n```\r\n\r\n### Describe the bug\r\n\r\nIf I use fallback interpolation `formatFallbackMessages`, which mean instead of using `keys`, the `message` is the `key`.\r\nSo instead of `$('some.key.to.translate')` and I use `$t('Some key to translate.')`.\r\nThis work but I have one issue, I have an error if I don't define the `file` in `nuxt.config.ts` for that locale, but since the message are in the key, you don't need a file ! For now I created a file with an empty Object and it work, but it seem odd.\r\n\r\n\r\n\r\n### Additional context\r\n\r\n> Cannot restart nuxt: [@nuxtjs/i18n]: All locales must be objects and have the \"file\" property set when using \"langDir\".\r\nFound none in:\r\n```\r\n{\r\n \"code\": \"fr\",\r\n \"name\": \"Français\",\r\n \"iso\": \"fr-CA\",\r\n \"momentLocale\": \"fr-ca\"\r\n}\r\n```\r\n\r\n### Logs\r\n\r\n_No response_",[3256,3259],{"name":3257,"color":3258},"need more info","e295d6",{"name":3260,"color":3261},"upstream","fbca04",1784,"Fallback Interpolation `formatFallbackMessages` still require to define a `file: fr.json` even if not needed","2025-05-25T10:54:18Z","https://github.com/nuxt-modules/i18n/issues/1784",0.73849726,{"description":3268,"labels":3269,"number":3276,"owner":3178,"repository":3179,"state":3218,"title":3277,"updated_at":3278,"url":3279,"score":3280},"### Environment\n\n- Operating System: Darwin\r\n- Node Version: v20.11.0\r\n- Nuxt Version: 3.10.1\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: yarn@4.0.1\r\n- Builder: -\r\n- User Config: modules, i18n, devtools\r\n- Runtime Modules: @nuxtjs/i18n@8.1.0\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-c7te5q-j2hjui?file=app.vue\n\n### Describe the bug\n\nAlso if i don't set `useLocaleHead()` with `useHead`, `setI18nParams` automatically adds `\u003Clink rel=\"alternate\" />` and `og:property`. \r\n\r\n```html\r\n\u003Clink id=\"i18n-alt-it\" rel=\"alternate\" href=\"https://www.dummy.com/it/blog-1-it\" hreflang=\"it\">\r\n\u003Clink id=\"i18n-alt-de\" rel=\"alternate\" href=\"https://www.dummy.com/de/blog-1-de\" hreflang=\"de\">\r\n\u003Clink id=\"i18n-xd\" rel=\"alternate\" href=\"https://www.dummy.com/it/blog-1-it\" hreflang=\"x-default\">\r\n\u003Clink id=\"i18n-can\" rel=\"canonical\" href=\"https://www.dummy.com/it/blog-1-ita\">\r\n\u003Cmeta id=\"i18n-og-url\" property=\"og:url\" content=\"https://www.dummy.com/it/blog-1-ita\">\r\n\u003Cmeta id=\"i18n-og\" property=\"og:locale\" content=\"it\">\r\n\u003Cmeta id=\"i18n-og-alt-en\" property=\"og:locale:alternate\" content=\"en\">\r\n\u003Cmeta id=\"i18n-og-alt-de\" property=\"og:locale:alternate\" content=\"de\">\r\n```\n\n### Additional context\n\nWow, that's good, but why only whit `setI18nParams` and not in the othter pages? If i don't use `setI18nParams` i have to set all this code on `App.vue`\r\n```js\r\nconst localeHead = useLocaleHead({\r\n addSeoAttributes: true,\r\n addDirAttribute: true,\r\n})\r\n\r\nuseHead({\r\n htmlAttrs: () => localeHead.value.htmlAttrs ?? {},\r\n link: () => localeHead.value.link ?? [],\r\n meta: () => localeHead.value.meta ?? []\r\n})\r\n```\r\n\r\nSo either everything is handled automatically or everything is handled via the mix of `useLocaleHead` and `useHead`\n\n### Logs\n\n_No response_",[3270,3273],{"name":3271,"color":3272},"🍰 p2-nice-to-have","0e8a16",{"name":3274,"color":3275},"scope: seo","30CDE0",2780,"`setI18nParams` automatically adds `\u003Clink rel=\"alternate\" />`","2025-05-25T10:23:03Z","https://github.com/nuxt-modules/i18n/issues/2780",0.74958867,["Reactive",3282],{},["Set"],["ShallowReactive",3285],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fBq29cOA3B5bvQsPs-SZCaZ3b-Jiv7pOafZRU4mqnCsw":-1},"/nuxt-modules/i18n/3451"]