SSR hydration error when using `keep-alive` in QCarousel

[Evertvdw]

Describe the bug When using keep-alive in the QCarousel with SSR it results in an hydration error.

Example code:

 <q-carousel
      animated
      :model-value="1"
      arrows
      navigation
      infinite
      keep-alive
      style="width: 400px"
    >
      <q-carousel-slide :name="1" img-src="https://cdn.quasar.dev/img/mountains.jpg" />
      <q-carousel-slide :name="2" img-src="https://cdn.quasar.dev/img/parallax1.jpg" />
      <q-carousel-slide :name="3" img-src="https://cdn.quasar.dev/img/parallax2.jpg" />
      <q-carousel-slide :name="4" img-src="https://cdn.quasar.dev/img/quasar.jpg" />
    </q-carousel>

To Reproduce Steps to reproduce the behavior:

1. Create fresh starter project
2. Add above code to Index.vue html.
3. Run quasar SSR mode quasar dev -m ssr
4. See error

Expected behavior No hydration error

Platform (please complete the following information): Quasar Version: v2.0.0-rc.3 @quasar/app Version: v3.0.0-rc.3 Quasar mode:

• [ ] SPA
• [x] SSR
• [ ] PWA
• [ ] Electron
• [ ] Cordova
• [ ] Capacitor
• [ ] BEX

Tested on:

• [ ] SPA
• [x] SSR
• [ ] PWA
• [ ] Electron
• [ ] Cordova
• [ ] Capacitor
• [ ] BEX

OS: Node: NPM: Yarn: Browsers: iOS: Android: Electron:

Additional context Add any other context about the problem here.

[rstoenescu]

Hi,

There is a bug in Vue 3 in regards to the keep-alive component which in turn affects us. Haven't had the time to report it yet, but will post the link here once I do it.

[hawkeye64]

https://github.com/vuejs/vue-next/issues/4817

[hawkeye64]

@Evertvdw Can you test again? There have been several SSR/hydration fixes in Vue since this issue was added.

[Evertvdw]

@hawkeye64 Yes, I just did. Issue is still there, the linked issue from the Vue repo is still not resolved either. In any case here is a reproduction link: https://codesandbox.io/s/competent-engelbart-dwfd7?file=/src/pages/Index.vue