Default fallback lang doesn't load messages

[TymoteuszNachtman]

Hi, in my Laravel 11 with InertiaJS and Vue 3 app the translations (laravel-vue-i18n v.2.7.7) don't load on certain pages. However default 'pl' language is loading perfectly on this pages.

In my example I'm comparing /dashboard (component: /Pages/Dashboard.vue) and /testing (component: /Pages/Testing/MainPage.vue) routes. Both are vue components with nested, persistent layouts:

defineOptions({
  layout: [MainLayout, AuthenticatedLayout]
});

On the /dashboard route every language is loaded. On the /testing route hovewer only 'pl' language is loaded. I have a console.log() in laravel-vue-i18n resolve, wchich doesn't show up at all on the /testing route when loading 'en'.

.use(i18nVue, {
      resolve: async lang => {
        const langs = import.meta.glob(`../../lang/*.json`);
        console.log('Resolving lang:', lang); // <- Doesnt output in console on /testing
        return await langs[`../../lang/${lang}.json`]();
      },
      fallbackLang: "pl",
      fallbackMissingTranslations: true,
    })

When I access the /testing route from Dashboard as Inertia <Link> and have some other language than 'pl', the languages are working fine. But after page refresh I see only translation keys in 'en' (other langs however work fine but not in the persistent layouts). Another strange events:

• when I change language on /testing route to 'pl' everything is translated,
• when I change to 'de' only the page content (component Pages/Testing/MainPage.vue) is translated, other keys (for example in the Sidebar) are not translated,
• when I change to 'en' nothing is translated. Note that I use wTrans() everywhere for translations, so it doesn't have anything to do with $t or using non-reactive trans(). When I try to console.log(lang) in resolve, the 'en' doesn't show up in console.log at all on /testing but on /dashboard it is logging.

My app.js:

createInertiaApp({
  title: (title) => `${title} - ${appName}`,
  resolve: (name) => {
    const pages = import.meta.glob('./Pages/**/*.vue');
    console.log('Resolving component:', name);
    return pages[`./Pages/${name}.vue`]();
  },
  setup: async ({ el, App, props, plugin }) => {
    const app = createApp({ render: () => h(App, props) });

    app
    .use(i18nVue, {
      resolve: lang => {
        const langs = import.meta.glob(`../../lang/*.json`, { eager: true });

        console.log('Resolving lang:', lang); // <- Doesnt output in console on /testing

        return langs[`../../lang/${lang}.json`].default;
      },
      fallbackLang: "pl",
      fallbackMissingTranslations: true,
    })
    .use(plugin)
    .use(ZiggyVue)
    .use(PortalVue)
    .use(createPinia())
    .use(FlagIcon)
    .use(PrimeVue, {
      theme: {
        preset: adminPreset,
        options: {
          prefix: "p",
          darkModeSelector: ".dark-mode",
          cssLayer: {
            name: "primevue",
            order:
              "normalize-reset, tailwind-base, primevue, tailwind-utilities",
          },
        },
      },
    })
    .use(DialogService)
    .component("Avatar", Avatar)
    .component("Skeleton", Skeleton)
    .component("Button", Button)
    .directive("tooltip", Tooltip)
    .mixin({ methods: { route } });

    app.mount(el);
    return app;
  },
  progress: {
    color: "#4B5563",
  },
});

vite.config.js:

plugins: [
      laravel({
          input: 'resources/js/app.js',
          refresh: true,
      }),
      vue({
          template: {
              transformAssetUrls: {
                  base: null,
                  includeAbsolute: false,
              },
          },
      }),
      i18n() // <- as docs say about getting keys from .php files
  ],

I already checked this issues:

• 85 - I'm already searching in lang folder

• 93 - wchich then results in app errors and components not rendering

• 136 - wchich is the closest case to mine, still not resolved for 'en' language somehow

• 187 - wchich helped with flashing keys, thanks for that :)

Maybe this is Inertia persistent layouts and page resolving issue, or maybe something with translations resolving. I'm confused right now 🤷‍♂️🙇‍♂️

[TymoteuszNachtman]

I managed to resolve this using 'en-GB' instead of 'en'. Still 'en' doesn't load for some reason.

Hovewer fallback doesn't work - it tries to use default 'en' fallback even though I specified fallbackLang: 'pl' in i18nVue options. But now on '/login' page 'pl' is not loading strings in i18n instance.

{
    "lang": "pl",
    "messages": {}
}

[TymoteuszNachtman]

After some testing it seems like there is an issue with loading fallbackLang. I manually changed it to 'pl' inside the package and now it doesn't load 'pl' but 'en' works great... So whatever language is set as default fallback language it won't load in this case.

[xiCO2k]

Thanks for the issue, I will investigate!

Also if you want you can create a PR I would love to review that!

Thanks