xiCO2k / laravel-vue-i18n

Allows to connect your `Laravel` Framework translation files with `Vue`.
MIT License
620 stars 51 forks source link

I18n instance appears to load 'en' twice #119

Closed bonney12 closed 10 months ago

bonney12 commented 1 year ago

Hi there - many thanks for your fantastic work on this plugin, it has made making a multilingual site much easier for us.

I am currently working on a bilingual website that will support both English and Arabic, with English being the default (and fallback) locale. The way I currently have it set up seems to be working absolutely fine on first visit to the page, with the English version (as stored in en.json for me) being displayed properly using the strings from the JSON file. It is also possible for me to change languages to the Arabic version (as stored in ar.json) with no problem, and all translates correctly.

However, the issue that arises, is when I try to swap back to the English version (via clicking a button which triggers loadLanguageAsync()). It seems as though the I18n.loaded Array ends up having two keys with en as the lang, and the empty one is the one being returned.

So far, I have been using the same code for the resolve function as recommended for Vite in the readme:

...
resolve: async (lang) => {
                   const langs = import.meta.glob("../../lang/*.json");
                   return await langs[`../../lang/${lang}.json`]();
               },
...

I have also been using loadLanguageAsync() to load the new locale when changing language, as mentioned above.

As a simple test, I adjusted the code for my language switcher dropdown to await the result of loadLanguageAsync('ar') and then to execute console.log(I18n.loaded), which returns an Array with three items instead of the two expected:

0: 
  lang: "en"
  messages: {}
  [[Prototype]]: Object
1: 
  lang: "en"
  messages: {(and :count more error): '(and :count more error)', (and :count more errors): '(and :count more errors)', …}
  [[Prototype]]: Object
2: 
  lang: "ar"
  messages: {(and :count more error): '(و :count خطأ إضافي)', (and :count more errors): '(و :count أخطاء إضافية)', …}
  [[Prototype]]: Object

It seems to be that first item that is being returned when I change the language back to English with loadLanguageAsync perhaps, as the second item contains all of the strings properly (and so if it were being loaded, would display everything as expected). I wonder if this could be because 'en' is also the fallbackLocale?

This definitely could be an issue somewhere on my side as I am quite new to Vue in the first place, so any pointers would be very welcome! Please let me know if I can give any other details to help.

Many thanks in advance!

xiCO2k commented 10 months ago

That issue should be solved on version v2.7.4.

Thanks