Support for i18n sites

[simplenotezy]

First of all; in general this plugin is top-notch. I really appreciate it, and I see it as an important plugin for any vue/nuxt project. It increased my pagespeed score 25 points on mobile with just a few lines of code. Thanks!

However, I noticed it doesn't work with nuxt-i18n, when switching locale. A full page refresh will do the trick though. I noticed perhaps this is because Nuxt is using vue version 2.6.11 and as you state in the documentation there is a bug in Vue that requires at least version 2.6.8? Perhaps that's the case (I hope), but then how did you manage to manually switch to this Vue version with your nuxt project?

[maoberlehner]

2.6.11 is newer than 2.6.8 (11 > 8). So the Vue.js version in Nuxt.js is fine.

I guess it is because parts of your application are not hydrated so rerendering when switching the language does not rerender those components. That is something inherent to how this package works. If this is a show stopper you have to work around it in some way or don’t use this package.

[maoberlehner]

Please provide an easy way to reproduce the problem or otherwise I can't help you.

[simplenotezy]

Right, I don't know how I late-night could've missed that. I'll provide you with an example as soon as the codesandbox is working again.

[simplenotezy]

Codesandbox is still not working, but you can see an example of what I mean by visiting here: https://v2.thejewelleryroom.com - I can give you access to the github repository if you'd like.

If you switch langauge, you'll see a blank page. If you refresh the page, it works. This didn't happen before implementing lazy-hydrate.

[simplenotezy]

So I realized I had some issues in my code, so your package was not to blame. Not sure why it happened after installing lazy hydrate though. Anyhow, I managed to fix it, but still stumbled upon some issues.

When switching languages, the component is destroyed, then initialized again. But the second time it is initialized, this.$refs.hydrate.hydrated still to still be set to true.

I had to add if (this.$refs.hydrate.hydrated) { to my code, as shared here, https://github.com/maoberlehner/vue-lazy-hydration/issues/38, otherwise the watcher would not watch for changes on "this.$refs.hydrate.hydrated" because the value would still be true, from the previous render.

mounted () {
    if (this.$refs.hydrate.hydrated) { // will still be true, if component was "rerendered"
        setTimeout(() => this.initSlider(), 100);
        return;
    }

    const unwatch = this.$watch(
        () => {
            return this.$refs.hydrate.hydrated; // if component was "destroyed" then mounted again, as happens on language switch, this will still be true, and below code will never run.
        },
        (val) => {
            this.$nextTick(() => {
                setTimeout(() => this.initSlider(), 100)
            });

            unwatch();
        }
    )
},