Load fallback language when needed (lazy-load)

nuxt-i18n version: 2.3.4

Imagine you have two languages, en (default) and de. But only parts of the en language is localized in the de file. If you now enter a page (e.g. /de/only-half-localized-route), you see the correct translations (for de) where it applies, but no en translation because the fallback language isn’t loaded properly because of lazy-loading. Instead, you see the translation keys.

A naive fix for it would be to load the fallback language every time, but I guess there is a way to check if a fallback is needed and load the fallback language in that case (if not already loaded).

<div align="right">_{This feature request is available on Nuxt.js community (#c39)}</div>

[rchl]

Possibly simpler workaround:

In nuxt_config.js, using require or import, load default locale manually and pass to vue-i18n configuration:

[
      'nuxt-i18n',
      {
            // ...
            vueI18n: {
                fallbackLocale: 'en',
                messages: {
                    en: require('./app/locales/en.json'),
                },
            },
      }
],

nuxt-i18n will merge current locale messages into same object and then vue-i18n will be able to access default locale for fallback.

[MarvinMiles]

My function for load fallback language when needed

/plugins/i18n.js:

export default ({ app }, inject) => {

inject ('loadLanguageAsync', async (lang) => {
    if (app.i18n.locale !== lang) {
      if (!app.i18n.loadedLanguages.includes(lang)) {
        try {
          const module = await import(/* webpackChunkName: "lang-[request]" */ `@/lang/${lang}`)
          const messages = module.default ? module.default : module
          app.i18n.setLocaleMessage(lang, typeof messages === 'function' ? await Promise.resolve(messages()) : messages)
          app.i18n.loadedLanguages.push(lang)
        } catch (error) {
          console.error(error)
        }
      }
      app.i18n.locale = lang
    }
  })

}

then call “this.$loadLanguageAsync(lang)” from anywhere

I am using that for translating via keyboard shortcuts events 😃

Hope this will help someone