Unable to find a way to lazy load messages per component and language

[i4i4n]

Hi,

Currently my messages are stored in JSON files in src/locales folder. I have one JSON for each component/language (e.g. MyLocalizedComponent.vue => my-localized-component.en.json, my-localized-component.de.json, etc).

The JSON files are referenced in my SFCs like so:

<i18n src="…/my-localized-component.en.json" />
<i18n src="…/my-localized-component.de.json" />
…

So when a component is loaded, it loads the messages for all languages.

Now, I'd like to lazy load the messages depending on current's locale. How can I do that?

All the documentation and examples I managed to find regarding lazy loading implied to have locale messages handled globally (for all components) (which defeats Vue component philosophy IMHO), but never in a local (per component) way.

Is there something I missed? Is it possible to lazy-load on a per component basis?

I tried this:

MyComponent.vue
<script>
…
async function lazyLoadI18nTexts (that) {
  const messages = await import(/* webpackChunkName: "locale-[request]" */ `@/locales/components/my-component.${that.$i18n.locale}.json`)
  that.$i18n.setLocaleMessage(that.$i18n.locale, messages.default)
}

export default {
  …
  beforeCreate () {
    lazyLoadI18nTexts(this)
  },

  watch: {
    '$i18n.locale' () {
      lazyLoadI18nTexts(this)
    }
  },
	…
}
</script>

As you can see, only the messages related to the current language are loaded when the component is created, and the messages in another language will be loaded if the locale changes thanks to the watcher.

But, I don't see a way to extend this to all components without editing every single one of them and duplicate the code above everywhere (only the JSON's filename changes)… Of course this won't result in a good code since this should be refactored somewhere once for all components.

Any ideas/suggestions would be highly appreciated.

[pixelpaulaus]

How did you go finding a nice clean solution for this?