Nuxt•2mo ago

Nuxt 4 + @Nuxtjs/i18n issue

I have issue trying to use defineI18nConfig. I believe in Nuxt 3 I can import with '#import' but not in Nuxt 4.

7 Replies

Hi @Robin. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Nuxt 4 (and Nuxt 3), the recommended way to use defineI18nConfig with @nuxtjs/i18n is to create a separate i18n.config.ts file and reference it in your nuxt.config.ts using the vueI18n key. You do not import defineI18nConfig or your i18n config file using #imports or similar paths in your Nuxt config. Instead, you provide the path as a string. Here’s how you should set it up: 1. Create i18n.config.ts at your project root:

// i18n.config.ts
export default defineI18nConfig(() => ({
  legacy: false,
  locale: 'en',
  messages: {
    en: { welcome: 'Welcome' },
    fr: { welcome: 'Bienvenue' }
  }
}))

// i18n.config.ts
export default defineI18nConfig(() => ({
  legacy: false,
  locale: 'en',
  messages: {
    en: { welcome: 'Welcome' },
    fr: { welcome: 'Bienvenue' }
  }
}))

2. Reference it in your nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    vueI18n: './i18n.config.ts'
  }
})

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    vueI18n: './i18n.config.ts'
  }
})

Important:
- Do not use #imports or try to import your i18n config file directly in nuxt.config.ts.
- The path to your config file should be a string, not an import. This approach is confirmed by both the official Nuxt i18n documentation and community answers. Attempting to import with #imports or similar will not work in the Nuxt config context, as Nuxt expects a file path, not a module import. This is consistent for both Nuxt 3 and Nuxt 4, and is necessary for the module to properly load your i18n configuration [Stack Overflow: i18n is not working after update nuxt to 3.8.0]. If you follow this pattern and still encounter issues, ensure your dependencies are up to date and that your file paths are correct. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@158494049991524352> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

derHodrig•2mo ago

@Robin yeah I have nearly same issues. In my case auto imports of the api Translation are not really connecting. NuxtI18n does some things different under the hood. For example

export default defineI18nLocale(locale => {
  // for example, fetch locale messages from nuxt server
  return $fetch(`/api/${locale}`)
})

export default defineI18nLocale(locale => {
  // for example, fetch locale messages from nuxt server
  return $fetch(`/api/${locale}`)
})

The i18n method isnt recognized nor called. I guess the package is broken. Could you try v9.5.6

RobinOP•2mo ago

Also requiring to have locale files in i18n directory. The doc is quite confusing. I have multiple locale files ie. common.json, user.json for each language. I have to config via vueI18n with defaultLocale and it works fine but the package give warning as I have not configured it properly.

derHodrig•2mo ago

Project -app -i18n --locales ---de.json ---en.json Then in your config in nuxt.config You add the files array. While locales folder is auto recognized. So you use just the file name as path

RobinOP•2mo ago

This is newly introduced right ?

derHodrig•2mo ago

Ah u mean you use the namespaced i18n? I believe then its --Locales ---de ... ---en ... But i do not know how the config changes. Sorry. I assume an index importing and reexporting in the language folder might solve it De -common.json -User.json -index.ts (rexports those jsons) But still, i guess v10 is broken (just see the docs. Links are not shown)

Gaming

Programming

Nuxt 4 + @Nuxtjs/i18n issue

Did you find this page helpful?