Lazy-load translations

[paulgv]

Lazy-loading translations seems like an important feature to some of us.
An initial implementation is available in version 2.3.0 which is tagged as a pre-release. I'd love to have some feedback from you guys if you'd be willing to give it a try.
To get the prerelease:

yarn add [email protected]

Have a look at the doc for usage: https://github.com/nuxt-community/nuxt-i18n#lazy-load-translations

Thanks!

#20
#7

_{This feature request is available on Nuxt.js community (#c42)}

[mahmoudmy]

I tried the new release.
Lazy loading is OK but after loading server-side-rendered pages, all of the translations disappear and message keys appear in a flick. (In the Page source there are the correct translations but in a half a second they replace with message keys!)

[paulgv]

@mahmoudmy that's weird 😮
What does you nuxt.config.js look like?

[mahmoudmy]

Here is my config:

{
  locales: [{
    code: 'fa',
    iso: 'fa-IR',
    name: 'فارسی'
  }, {
    code: 'en',
    iso: 'en-US',
    name: 'English'
  }],
  defaultLocale: 'fa',
  vueI18n: {
    fallbackLocale: 'fa',
    silentTranslationWarn: true
  },
  loadLanguagesAsync: true,
  langDir: 'locales/',
  langFiles: {
    fa: 'fa.js',
    en: 'en.js'
  }
}

[paulgv]

Thanks @mahmoudmy ! I tried your config in my example project and it seems to be working okay. Any way you could provide a repo with the issue so I can reproduce?

[mahmoudmy]

Thanks @paulgv , I created a simple repo resulting the same problem:
https://github.com/mahmoudmy/nuxt-i18n-test

[paulgv]

Thanks! I'm not sure what's going on there, I need to give it a closer look. I released another version where langFiles option has been dropped in favor of individual langFile options in the locales array, make sure you update your config accordingly if you start using v2.3.0.
I'll do more tests to try and understand the bug you've got.

[paulgv]

@mahmoudmy did you find a solution to your problem by any chance? I've been messing around with your repo and couldn't make it work properly, even after stripping it down to the bare minimum. But using a similar setup in another Nuxt project works fine so this feels pretty strange...

[mahmoudmy]

I also tried the new version (2.3.0), but the problem still exists!

[mahmoudmy]

@paulgv
I deployed the sample repo to heroku, you can see the strange behavior on every page load (refresh):
https://nuxt-18n-test.herokuapp.com/

[paulgv]

@mahmoudmy apparently, nuxt-i18n's plugin was missing a simple return... 😅
Just pushed v2.3.4 which should fix your problem :)

[mahmoudmy]

Thanks @paulgv , You made my day ;)