How to make intlify read from 2 different directories?

[Aravinda Baliga]

I have a Nuxt 3 or Nuxt.js application with the following folder structure:

📦root
 ┣ 📂commons
 ┗ 📂project1
 ┗ 📂project2

I have a page in project1 from which I can navigate to a page in project2. While navigating from project1 to project2 the page contents from project2/locales are not loaded. All the contents and components from project2 are loading fine but the words and button text do not appear as it is unable to read locales content.

Even If I add the reference to it it's not working fine and still displays the respective variable name instead of the value mentioned in locales/en.

project1/nuxt.config.js

  intlify: [
    {
      localeDir: "locales",
      vueI18n: {
        locale: "en",
      },
    },
    {
      localeDir: "../project2/locales",
      vueI18n: {
        locale: "en",
      },
    },
  ],

Project1 locales work fine but project2/locales are not loaded. However, when I run a project2 independently everything works fine. but when I am trying to access project2 from project1 I get the error and locales are not loaded.

Can someone please let me know how can I make the @intlify/nuxt3 to read from 2 different folders and achieve this?