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

[Aravinda93]

I am trying to use locale files in my Nuxt 3-based application and everything works fine when I am using the single en.yml 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 intlify and vueI18n for internationalization.

I have a locales/en folder which contains the locale files en.yml and en-extended.yml. I would like to obtain the content into my Nu 3 application but am unable to do so using the vue18n for en-extended.yml file content but en.yml file content works fine.

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

intlify: {
    localeDir: "../locales",
    vueI18n: {
      locale: "en", // Set the default locale
      fallbackLocale: "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:

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

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

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