Calling "loadLanguageAsync" on already loaded lang causes Vue App not get rendered #206
Description
Hey,
i am working on a bilingual project that will support both German and English, with German as default lang.
The default lang gets definied as html "lang" property in "app.blade.php".
There is a ‘locale’ parameter in the ‘User’ model so that each user can individually define their language. This parameter is made available via Inertia Shared Data. As soon as a user has defined the same language as the default language, the entire Vue app is no longer rendered. To do this, the ‘onMounted’ hook is used to call the ‘loadLanguageAsync’ function with the locale from the shared data.
The error can be reproduced:
onMounted(() => {
loadLanguageAsync('de')
});
The result is a blank page, but no errors are displayed in the console.
A workaround is to check beforehand whether the language is already loaded:
onMounted(() => {
if (!isLoaded('de')) {
loadLanguageAsync('de');
}
})
app.js:
.use(i18nVue, {
resolve: async lang => {
const langs = import.meta.glob('../../lang/*.json')
return await langs[`../../lang/php_${lang}.json`]()
},
onLoad: () => {
// return early if app is mounted already
if(el && el.__vue_app__){
return;
}
app.mount(el); // Mounted here so translations are loaded before vue.
}
})
Vue: v3.5.13
InertiaJS: v2.0.5
laravel-vue-i18n: v2.7.8
Is the ‘onMounted’ hook not the right way to change the user-defined language?
I would be very grateful for any help.
Kind regards!