Doesn't read the locales folder

[ennioVisco]

Environment

---

• Operating System: Windows_NT
• Node Version: v16.13.1
• Nuxt Version: 3.2.3
• Nitro Version: 2.2.3
• Package Manager: [email protected]
• Builder: vite
• User Config: extends, ssr, routeRules, runtimeConfig, typescript, css, i18n, modules, alias, vite
• Runtime Modules: nuxt-icon@^0.3.2, @nuxtjs/[email protected], @vueuse/[email protected], @nuxt/[email protected]
• Build Modules: -

---

Reproduction

- Create a locales dir and add a file en.yml with a text line used in the app.
https://stackblitz.com/edit/github-ev7oxu?file=nuxt.config.ts

Describe the bug

Contrary to what @intlify/nuxt3 was doing, @nuxtjs/i18n doesn't read the ./locales folder by default, nor it allows to define a localeDir.

Possibly related to #1890.

Additional context

No response

Logs

No response

[BobbieGoede]

The directory can be set using the langDir key, it's a bit hidden in the docs as it's described on the options page for lazy loading here.

So you probably want to do the following, if you haven't changed the srcDir, this config will resolve to ./locales.

// nuxt.config inside your config
i18n: {
  langDir: 'locales',
}

The docs doesn't mention this, but langDir is relative to the srcDir of your project as seen here.

i18n/src/module.ts

Line 67 in 045d7e6

const langPath = isString(options.langDir) ? resolve(nuxt.options.srcDir, options.langDir) : null

[ennioVisco]

Well, I tried, but it gives the following error:

[kazupon]

Thank you for your reporting!
Could you give us your minimal repo or stackbliz please?

[ennioVisco]

Thank you for your reporting! Could you give us your minimal repo or stackbliz please?

Updated the issue with the reproduction link!

[BobbieGoede]

You need to configure which locales and files are to be used by the module as the error message notes, this is done in a list of object on key locales (read more about it in the docs here).

If you change your i18n config to the following it should all work as expected.

i18n: {
    langDir: 'locales',
    locales: [{ code: 'en', file: 'en.yml' }],
},

Check out the guides in the docs for more info, if anything is unclear perhaps we may be able to improve the docs.

[ennioVisco]

You need to configure which locales and files are to be used by the module as the error message notes, this is done in a list of object on key locales (read more about it in the docs here).

If you change your i18n config to the following it should all work as expected.

i18n: {
    langDir: 'locales',
    locales: [{ code: 'en', file: 'en.yml' }],
},

Check out the guides in the docs for more info, if anything is unclear perhaps we may be able to improve the docs.

Thanks a lot, it works! But then I have two observations:

All these information are missing in the migration guide from @intlify/nuxt3, namely:

• localeDir renamed to langDir
• langDir not having locales as default
• locales that must be explicitly set and is not derived automatically

Design perspective

I think the fact that these must be set explicitly makes perfect sense, however, I think it previously was more in line with the zero-config philosophy of nuxt, where there is a "magic" folder already set (be it i18n, locales or something else), just like nuxt does with components, composables, pages, content, etc., and where the default config possibly already satisfies "realistic" base cases (e.g. when locales is not set, it automatically derives locales: [{ code: 'en', file: 'en.yml' }]).

[ennioVisco]

Addressed in #1921.