Implicit fallback locale rules and lazy loading

[existe-deja]

If you are in universal mode, and lazy loading locales, you can have problems with fallback locale. I was wondering how to deal with it? Should I merge manually the locale files for the fallback languages or should it be handled by the plugin?

For exemple: en.json

{
  title: "My title",
  description: "Lorem Ipsum"
}

en-US.json

{
  title: "My awesome title"
}

I want to modify only some words in a fallback language and use the base language for the rest. The vue-i18n merge strategy is perfect for that. But, since I lazy load locales, I have something like this:

lang/
  lazy/
    en.js
    en-US.js
  translations/
    en.json
    en-US.json

en.js

import en from '../translation/en.json'
export default en

en-US.js

import enUS from '../translation/en-US.json'
export default enUS

So if I navigate through the en version, en.json is loaded and then I switch, en-US.json is loaded and everything works as expected. Problem is when I refresh the en-US version. What is the strategy to adopt here?

Thanks

[rchl]

If I understand your question correctly, this is already supported. See https://i18n.nuxtjs.org/locale-fallback

[existe-deja]

Yes I try to use this feature, combined with implicit fallback But, check by yourself > https://codesandbox.io/s/cool-drake-oj5c4?file=/pages/index.vue

What is happening is expected. In en-us mode, I only lazy load en-US.json file wich merge perfectly with en.json if I previously loaded it (from en to en-US). If I hit the en-US version, I never loaded the en.json localized file so it has no chance to have the messages.

What is the best way to load the "upper" level messages? I will use this behavior for dialect a lot, and with two levels so I need a way to make lazy loading and automatic fallback working together.

[rchl]

It works if you define a fallback.

  i18n: {
    defaultLocale: "en",
    locales: [
      { code: "en", iso: "en-EN", file: "en.js" },
      { code: "en-US", iso: "en-US", file: "en-US.js" }
    ],
    langDir: "lang/lazy/",
    lazy: true,
    seo: false,
    vueI18n: {
      fallbackLocale: {
        "en-US": ["en"]
      }
    }
  }

https://codesandbox.io/s/suspicious-leavitt-62b68?file=/nuxt.config.js

[rchl]

BTW. With only those two locales it would also work to just specify fallbackLocale: 'en' but if at some point you would add other languages like fr and fr-CA then you would need to use a map like in the example above.

[existe-deja]

Ok, I don't know why I kept pushing the implicit fallback meanwhile explicit one works like a charm :+1:

Also, I have quite a lot languages to support, so a map is mandatory.

Thank you for your help, and your work on this excellent module.

[rchl]

The implicit fallback would only work without lazy-loading.

To be fair, it probably would make sense to also support implicit fallback in this module.

[existe-deja]

It'a always a good thing to keep behavior between vue-i18n and nuxt-i18n as iso as possible. I don't know how much time it requires and how full is the backlog. It's definitely a nice to have feature but maybe not a high priority feature :smiley:

A quick fix would be to specify in the doc that for lazy loading, explicit fallback is mandatory.

[divine]

Should I take care documentation or something needs to be fixed.

Thanks :)

[rchl]

Something should be implemented. The implicit lazy loading of locales based on locale codes as described in https://kazupon.github.io/vue-i18n/guide/fallback.html#implicit-fallback-using-locales

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[BobbieGoede]

Closing this as v7 is not being actively worked on (critical hotfixes only), if this still applies to v8 and later please open a new issue!