Can't access non-loaded lazy locales using $t

Hello.

I was trying to put two different languages on the same page. In my example, I’m trying to pull messages for two different languages i.e. polish and french. The idea is to get language from a browser (fr) and compare it to language from URL(pl) which will show the message about difference and choose between two of them. That message should be in those two languages that I’ve got from the browser and URL.

I tried use v-t directive with the locale attribute, but it seems to not work as I expected. Tried also $t with same effect.

After checking i18n object I had only current language messages (in this situation polish) and both strings were translated into polish only…

My nuxt-i18n config

  parsePages: false,
  locales: LOCALES,
  defaultLocale: process.env.NODE_ENV !== 'production' ? 'en' : 'en-gb',
  lazy: true,
  langDir: 'lang/',
  vueI18n: {
    fallbackLocale: 'en',
    silentFallbackWarn: true,
    formatFallbackMessages: true,
  },

Is there any possibility to use both languages on the same page?

[rchl]

The $t API [1] takes a locale argument so you could use that if you would have all locales loaded. But since you are lazy loading them, you can’t do that.

Interestingly, there is no way to trigger loading of additional locales right now, short of changing to a given locale. I guess it makes sense to add that. Then you would need to manually ensure that all locales you want to use are loaded before you try to get the translations for that locale.

Would that work for you? You would need to programmatically call something like await $i18n.loadLocale('fr') before using it.

[1] https://kazupon.github.io/vue-i18n/api/#vue-injected-methods

[Louvki]

Any updates on this?