v-if="hydrated" doesn't work with async components

[gibkigonzo]

Hey, I have problem with combining when-visible and async component. I try to follow this article https://markus.oberlehner.net/blog/how-to-drastically-reduce-estimated-input-latency-and-time-to-interactive-of-ssr-vue-applications/

When using async component it's recommend to also use slot-scope="{ hydrated }" v-if="hydrated". I understand the reason, but it seems not working.

v2.0.0-beta-4 This setup results in ssr mismatch and component is not visible

    <LazyHydrate when-visible>
      <Slider
        slot-scope="{ hydrated }"
        v-if="hydrated"
      />
    </LazyHydrate>

const Slider = () => import('~/theme/components/blocks/Product/Slider')

v2.0.0-beta-4 Same with wrapper:

    <LazyHydrate when-visible>
      <div slot-scope="{ hydrated }" style="min-height: 400px;">
        <Slider
          v-if="hydrated"
        />
      </div>
    </LazyHydrate>

v1.0.0-beta.14 What is interesting is that it works with wrapper in prev version (doesn't work without wrapper):

    <LazyHydrate when-visible>
      <div slot-scope="{ hydrated }" style="min-height: 400px;">
        <Slider
          v-if="hydrated"
        />
      </div>
    </LazyHydrate>

Note: I'm not using Nuxt.js but vue-storefront which uses vue-server-renderer.

[gibkigonzo]

v1.0.0-beta.14 and v2.0.0-beta-4 Works when using hydrateWhenVisible:

    <Slider/>

    Slider: hydrateWhenVisible(
      () => import(/* webpackChunkName: "vsf-product-slider" */'~/theme/components/blocks/Product/Slider'),
    ),

@maoberlehner hydrated is not available anymore in v2. Is it recommend way to use hydrateWhenVisible when using async components and when-visible ?

[maoberlehner]

@maoberlehner hydrated is not available anymore in v2. Is it recommend way to use hydrateWhenVisible when using async components and when-visible?

Yes, this functionality was removed with v2 because it never worked as intended.

Either use

<template>
  <LazyHydrate when-visible>
    <MyComponent/>
  </LazyHydrate>
</template>

<script>
export default {
  components: {
    MyComponent: () => import('./MyComponent.vue'),
  },
};
</script>

or

<template>
  <MyComponent/>
</template>

<script>
export default {
  components: {
    MyComponent: hydrateWhenVisible(() => import('./MyComponent.vue')),
  },
};
</script>

[gibkigonzo]

Thank you very much :) I will close issue