Issue with installModule for nuxtjs/i18n Failing When Used with Multiple Nuxt Modules

[hungnguyen18]

---

Environment Details

• Operating System: Darwin
• Node Version: v22.0.0
• Nuxt Version: 3.13.2
• CLI Version: 3.15.0
• Nitro Version: 2.9.7
• Package Manager: pnpm@9.11.0
• Modules & Configurations:
  • Runtime Modules:
    @primevue/nuxt-module@4.1.1, @nuxtjs/tailwindcss@6.12.2, @nuxtjs/color-mode@3.5.2, @wellcare/nuxt3-module-data-layer@0.6.4, @wellcare/nuxt3-module-account@1.0.2, @wellcare/nuxt3-module-chart@1.0.18, @wellcare/nuxt3-module-form@0.8.0, @wellcare/nuxt3-module-consultation@0.1.3, @wellcare/nuxt3-module-conference@0.0.1-debug.22, @wellcare/nuxt3-module-notion@0.2.15, @wellcare/muot-ui@0.3.5, @wellcare/nuxt3-module-chat@0.0.55, @wellcare/nuxt3-module-media@0.0.3, @wellcare/nuxt3-module-phr@0.0.12, @nuxt/test-utils/module@3.14.4, @nuxtjs/google-fonts@3.2.0, @pinia/nuxt@0.5.5, @vueuse/nuxt@11.1.0, @nuxt/image@1.8.1, @zadigetvoltaire/nuxt-gtm@0.0.13, dayjs-nuxt@2.1.11, nuxt-jsonld@2.0.8, @nuxt/eslint@0.6.1, @nuxtjs/i18n@8.5.5
  • Build Modules: None specified.

---

Steps to Reproduce

Access the reproduction environment on Stackblitz: Stackblitz Project

Bug Description

While configuring nuxtjs/i18n in module.ts as per the official documentation, I used the following setup:

await installModule('@nuxtjs/i18n', {
  langDir: resolve('./lang'),
  locales: [
    { code: 'en', file: resolve('./lang/en.json') },
    { code: 'fr', file: resolve('./lang/fr.json') },
  ]
});

In nuxt.config.ts, when specifying the modules like this:

modules: [
  'module-1', // working 
  '@nuxtjs/i18n'
]

it works as expected. However, when arranging the modules in other combinations, the functionality breaks as shown below:

• Configuration 1:

  modules: [
    'module-1', // working 
    'module-2', // not working
    '@nuxtjs/i18n'
  ]

• Configuration 2:

  modules: [
    'module-2', // working 
    'module-1', // not working
    '@nuxtjs/i18n'
  ]

Additional Context

I am looking for guidance on achieving the intended configuration or an alternative solution.

Logs

No logs generated in this scenario.

---

[BobbieGoede]

This is main issues I have with installModule, a module really only runs its setup once regardless of how many other modules try to install it using installModule. The same happens for layers installing the same module, but layer options are stored and can be retrieved/merged by the module that's being installed.

@danielroe is there any way to make installModule work when it's called in multiple places? The options are not stored someplace like they are for layers nuxt.options._layers right?

[userquin]

Second module won't be called/merged since the first one will register that module. You should use i18n:registerModule module hook:

https://stackblitz.com/edit/github-dtrh2g-p8sges?file=nuxt.config.ts,node_modules%2F.pnpm%2F%40nuxt%2Bkit%403.13.2_magicast%400.3.5_rollup%404.24.3%2Fnode_modules%2F%40nuxt%2Fkit%2Fdist%2Findex.mjs,package.json,node_modules%2F%40nuxt%2Fkit%2Fdist%2Findex.mjs,modules%2Fmodule-2%2Fmodule.ts,modules%2Fmodule-1%2Fmodule.ts,modules%2Fmodule-2%2Fruntime%2Fcomponent-2.vue

[userquin]

installModule is about installing a module, we cannot use it to "merge" i18n options since the module will be installed only once and next calls will be discarded when Nuxt (Nuxt Kit) installing it and already found.

You can also use layer + module registering i18n module options: i18n will merge them for you.

[hungnguyen18]

installModule is about installing a module, we cannot use it to "merge" i18n options since the module will be installed only once and next calls will be discarded when Nuxt (Nuxt Kit) installing it and already found.

You can also use layer + module registering i18n module options: i18n will merge them for you.

I've previously tried your approach and was able to resolve the issue to some extent. However, without installing the @nuxtjs/i18n module, I'm still unable to resolve useI18n in #imports within src/runtime, which remains inconvenient 😅. This limitation also affects testing with Vitest, where useI18n isn’t recognized.

I'm wondering if the @nuxtjs/i18n team might have a solution to address this issue in a way that also supports multi-module compatibility.

[BobbieGoede]

What would probably work best for your use case is to use installModule without passing options just to ensure the module is being installed and use the i18n:registerModule to register the locales.

[userquin]

can you check if present in .nuxt/imports.d.ts?

[hungnguyen18]

What would probably work best for your use case is to use installModule without passing options just to ensure the module is being installed and use the i18n:registerModule to register the locales.

Thanks I followed your config and it worked and achieved the desired goal 🥰, so I will close this issue