Unable to obtain the locales file content when using multiple files for same language in Vue 3 using vueI18n and intlify?

[Aravinda93]

How to use the variables/data from multiple locales files of the same languages such as locales/en.json and locales/extended-en.json. Currently en.json works fine but unable to add from extended-en.json when using the @nuxtjs/i18n module.

I am trying to use locale files in my Nuxt 3-based application and everything works fine when I am using the single en.json file but if I try to add another file for the same language then the contents from that new file are not extracted only the main file works fine. I am using the @nuxtjs/i18n and vueI18n for internationalization.

I have a locales/en folder which contains the locale files en.json and en-extended.jon. I would like to obtain the content into my Nuxt 3 application but am unable to do so using the @nuxtjs/i18n for en-extended.json file content but en.json file content works fine.

Following is the config settings from nuxt.config.js:

  i18n: {
    locales: [
      {
        code: "en",
        file: "en.json",
      },
    ],
    lazy: true,
    langDir: "./locales",
    defaultLocale: "en",
  },

I tried adding additional parameters to it using the en-extended but its not working. I have placed the file and variables are present but still not working.

Following is the way I am accessing the date:

<template>
<div class="text-primary">
    <!-- Access common translation from en.json -->
    <p>{{ $t("default.fromDefault") }}</p>

    <!-- Access translation from en-extended.json using the en_extended namespace -->
    <p>{{ $t("default.fromExtended") }}</p>
  </div>
</tempalte>

I can see on my webpage that I am able to get: "default.mainMessage" but unable to get the "en-extended.default.extendedMessage" It just displays the same variable name en-extended.default.extendedMessage rather than the actual value assigned in en-extended.yml.

I am still unable to make it work, any response would be really helpful on splitting the local files into multiple JSON file.

[Sensanaty]

@Aravinda93 Did you end up figuring this one out? Encountering the same issue, where my translations are managed by a 3rd party tool that I sync with, ending up with a layout like this:

├── en-GB
│   ├── collection.json
│   ├── dashboard.json
│   ├── helpmate.json
│   └── playground.json

I could merge in all the JSONs, but I'd prefer if things were chunked by page and only loaded when necessary, which vite would be able to handle with import() if I could get this to actually work...

[Aravinda93]

@Sensanaty
I'm sorry, but I wasn't able to figure it out nor did I get any response, so in my application, I merged all the JSON files into a single. Although it's ugly and not something I wanted to do but I had to do it.

If you figure out something please post the answer even I will implement it similarly. Even I will try to do and update you if I find out something.

[Aravinda93]

@Sensanaty

Ok so I tried this and it worked for me:

package.json:

  "devDependencies": {
    "@nuxtjs/i18n": "^8.3.1",
    "nuxt": "^3.12.3",
    "prettier": "^3.3.2",
    "turbo": "^2.0.9",
    "vue": "^3.4.31"
  },

nuxt-config.js:

  modules: [
    "@nuxtjs/i18n"
  ],
  
   i18n: {
    locales: [
      {
        code: "en",
        files: ["en.json", "en-extended.json"],
      },
    ],
    lazy: true,
    langDir: "./locales",
    defaultLocale: "en",
  },

i added 2 files in my locales en.json and en-extended.json:
en.json:

{
    "default": {
        "fromDefault":"From Default en.json file"
    }
}

en-extended.json:

{
    "default": {
        "fromExtended":"From Extended en-extended.json file Hello"
    }
}

And i used it in index.vue:

<template>
  <div class="text-primary">
    <!-- Access common translation from en.json -->
    <p>{{ $t("default.fromDefault") }}</p>

    <!-- Access translation from en-extended.json using the en_extended namespace -->
    <p>{{ $t("default.fromExtended") }}</p>
  </div>
</template>

This worked for me. For your reference: CodeSandBox