I'm using @nuxtjs/i18n v10.2.1 with Nuxt 4. My i18n/i18n.config.ts has grown large because it contains ~250 country name translations for both German and English. I want to extract the countries into a separate file to keep i18n.config.ts manageable.
Current setup:
// i18n/i18n.config.ts
export default defineI18nConfig(() => ({
messages: {
de: {
countries: { AF: 'Afghanistan', AL: 'Albanien', /* ~250 more */ },
about: 'Über uns',
// ...
},
en: {
countries: { AF: 'Afghanistan', AL: 'Albania', /* ~250 more */ },
about: 'About',
// ...
},
},
}))
What I tried:
I extracted the countries into i18n/i18n.countries.js:
export default {
de: { AF: 'Afghanistan', /* ... */ },
en: { AF: 'Afghanistan', /* ... */ },
}
And tried to import it:
// i18n/i18n.config.ts
import countries from './i18n.countries.js'
export default defineI18nConfig(() => ({
messages: {
de: { countries: countries.de, about: 'Über uns' },
en: { countries: countries.en, about: 'About' },
},
}))
This fails with:
Cannot find module '/i18n/i18n.countries.js' imported from
/path/to/project/.nuxt/dev/index.mjs
The path is wrong — it resolves to an absolute path from filesystem root (/i18n/...) instead of the project root, because defineI18nConfig files are virtualized by nuxt-i18n and relative imports don't resolve correctly.
I also tried moving to file-based locale files (langDir + file per locale in nuxt.config.ts) and importing from within those files — same resolution error regardless of where I put the countries file or what import path I use.
Question:
What is the correct way to split a large messages object in @nuxtjs/i18n v10 across multiple files? Specifically, how can I keep country translations in a dedicated file and reference them from either i18n.config.ts or locale files without hitting the virtual module path resolution issue?
nuxt.config.ts i18n section:
i18n: {
strategy: 'prefix_except_default',
defaultLocale: 'en',
locales: [
{ name: 'Deutsch', code: 'de', language: 'de-CH' },
{ name: 'English', code: 'en', language: 'en-US' },
],
},