New May 7, 2026

How to split locale messages into multiple files with @nuxtjs/i18n

Libraries, Frameworks, etc. All from Newest questions tagged vue.js - Stack Overflow View How to split locale messages into multiple files with @nuxtjs/i18n on stackoverflow.com

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' },
  ],
},
Scroll to top