Nuxt•3w ago

i18n multiple files for each language

Hello, I would like to split my translations into several translations files to have them by page. I found this, the second answer (rated 1) looks good enough for me : https://stackoverflow.com/questions/48861001/multiple-translations-files-per-language-with-vue-i18n-and-nuxtjs Any thoughts ? Is that the way to go ? Thanks 🙂

4 Replies

kapa.ai•3w ago

Hi @Omnislash. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The knowledge sources provided don't contain specific information about splitting translations into multiple files for each language in Nuxt with i18n. However, I can provide some general guidance based on the available information. While the Stack Overflow answer you found might work, it's important to note that Nuxt 3 and the latest versions of @nuxtjs/i18n have different configurations compared to older versions. For Nuxt 3 with @nuxtjs/i18n, the recommended approach is to use the i18n.config.ts file for your i18n configuration. Here's a basic setup based on the information from the knowledge sources: 1. Create an i18n.config.ts file in your project root:

export default defineI18nConfig(() => ({
  legacy: false,
  locale: 'en',
  messages: {
    en: {
      // Your English translations
    },
    fr: {
      // Your French translations
    }
  }
}))

export default defineI18nConfig(() => ({
  legacy: false,
  locale: 'en',
  messages: {
    en: {
      // Your English translations
    },
    fr: {
      // Your French translations
    }
  }
}))

2. In your nuxt.config.ts, reference this file:

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

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

To split your translations into multiple files, you could potentially import them in your i18n.config.ts file. For example:

import enHome from './locales/en/home.json'
import enAbout from './locales/en/about.json'
import frHome from './locales/fr/home.json'
import frAbout from './locales/fr/about.json'

export default defineI18nConfig(() => ({
  legacy: false,
  locale: 'en',
  messages: {
    en: {
      ...enHome,
      ...enAbout
    },
    fr: {
      ...frHome,
      ...frAbout
    }
  }
}))

import enHome from './locales/en/home.json'
import enAbout from './locales/en/about.json'
import frHome from './locales/fr/home.json'
import frAbout from './locales/fr/about.json'

export default defineI18nConfig(() => ({
  legacy: false,
  locale: 'en',
  messages: {
    en: {
      ...enHome,
      ...enAbout
    },
    fr: {
      ...frHome,
      ...frAbout
    }
  }
}))

However, please note that this approach is not explicitly documented in the provided knowledge sources, and you may need to verify its compatibility with the latest version of Nuxt and @nuxtjs/i18n. For the most up-to-date and accurate information, I recommend checking the official Nuxt i18n documentation at i18n.nuxtjs.org, as the provided knowledge sources may not reflect the latest best practices for this specific use case. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

OmnislashOP•3w ago

Ok let's go with that then :p

Kirito•3w ago

Hello @Omnislash you can test with an index file for each translation folder and import it in the i18n config The index file need to reexport all files content

/locales/
  /en/
    home.json
    about.json
    index.ts
  /fr/
    home.json
    about.json
    index.ts

/locales/
  /en/
    home.json
    about.json
    index.ts
  /fr/
    home.json
    about.json
    index.ts

And the index file would like this :

import about from './about.json'
import home from './home.json'

export default {
  ...about,
  ...home
}

import about from './about.json'
import home from './home.json'

export default {
  ...about,
  ...home
}

And import it: import fr from './locales/fr'

Gaming

Programming

i18n multiple files for each language

Did you find this page helpful?