6

I want to reduce my app size and i started from language files.
I'm using vue-i18n Single File Components and i can lazy load like this vue-i18n Lazy loading. I read about custom lang blocks, but as i know i can't set dynamic locale in src.

Now my question: is there a way to lazy load languages in <i18n> tag?

hafer
  • 137
  • 1
  • 10
  • Why would you lazy load in a `` tag at first? You don't like the usualy approach of `{{ $t('hello') }}`? – kissu Apr 22 '22 at 09:43
  • The issue being the fact that I'm not sure that `i18n` blocks will be reactive (pretty sure they won't). Hence, it's probably compiled by the Vue template engine and staying still afterwards because the loader is done and never comes back to check if a value is updated in the `i18n` tag. – kissu Apr 22 '22 at 09:46
  • Regarding `but as i know i can't set dynamic locale in src`, you can totally change the locale and load some other translation file. – kissu Apr 23 '22 at 17:52

1 Answers1

0

The library author did answered the question - translations defined as part of Vue SFC are compiled (by the loaders for appropriate build tool) as an export from SFC module. That means they are part of the component module and only way to lazy load is to lazy load the component itself

So no, there is no way to lazy load single language defined in i18 custom blocks. If you need lazy loading, don't use custom blocks and rather define your translations in global JSON files (split by language). Other alternative is to completely rewrite the loader itself to collect and merge custom blocks into such global module but that is a lot of work and I would not recommend that...

Michal Levý
  • 33,064
  • 4
  • 68
  • 86