[Bug Report][3.0.0-beta.4] VOverlay SSR hydration errors

[BlackYuzia]

Environment

Vuetify Version: 3.0.0-beta.4 Vue Version: 3.2.37 Browsers: Chrome 102.0.0.0 OS: Windows 10

Steps to reproduce

1. Make a component from "https://next.vuetifyjs.com/en/components/overlays/#advanced"
2. Make v-for for cards
3. Hover on card
4. Profit!

Expected Behavior

Hover and overlays work's fine inside v-for

Actual Behavior

Hover didn't work, you get errors in console, also overlay didn't display.

Reproduction

<template>
    <v-row>
        <v-col cols="12" sm="6" md="4" lg="3" v-for="i in 10" :key="i">
            <v-hover v-slot="{ isHovering, props }">
                <v-card class="mx-auto" max-width="344" v-bind="props">
                    <v-img src="https://cdn.vuetifyjs.com/images/cards/forest-art.jpg"></v-img>

                    <v-card-text>
                        <h2 class="text-h6 primary--text">
                            Magento Forests
                        </h2>
                        Travel to the best outdoor experience on planet Earth. A vacation you will never forget!
                    </v-card-text>

                    <v-card-title>
                        <v-rating :value="4" dense color="orange" background-color="orange" hover class="mr-2">
                        </v-rating>
                        <span class="primary--text text-subtitle-2">64 Reviews</span>
                    </v-card-title>

                    <v-overlay :model-value="isHovering" contained scrim="#036358" class="align-center justify-center">
                        <v-btn flat>See more info</v-btn>
                    </v-overlay>
                </v-card>
            </v-hover>
        </v-col>
    </v-row>
</template>

Screenshots

This work's for one element / card.

This breaks for a few elements in v-for

PS: I a bit sleepy, I make a reproduce link a bit later.

[KaelWD]

Works for me.

[BlackYuzia]

yep, I found what problem. You should use keepalive

[BlackYuzia]

https://gitlab.com/BlackYuzia/nuxt-vuetify/-/tree/bug-tracker

UPD: You should run repo with npm run dev command, otherwise bug won't reproduce.

Check this repo @KaelWD

[BlackYuzia]

~~Also, you could go to - https://nuxt3.starserv.ru/bug-002~~ ~~There you can find this bug too.~~

Wait a bit, I test again... locally I get this bug, on production no...

Oh, I found why, on production I run app by npm run build && npm run start, but locally — npm run dev Suppose, that trouble by running in dev mode?

If you run build from repo above with dev mode npm run dev you get this bug.

UPD: Also, in local tests with npm run dev, if I remove keepalive from app.vue, then this bug didn't reproduce too.

[KaelWD]

The actual bug is this, it has nothing to do with keep-alive or v-for

[BlackYuzia]

ok, then I mistake :eyes:

So, this bug on SSR side?

[KaelWD]

https://github.com/vuejs/core/issues/6152

[raphmarot]

Is there a workaround?

[KaelWD]

https://next.vuetifyjs.com/en/components/no-ssr/

[zylstraj]

So the workaround for this is the v-no-ssr. Is there a fix for this with the latest version of vuetify beta or is the workaround the only way to avoid this for now? Because experiencing this same issue with the v-tooltip or same as #15307 @KaelWD

[magyarb]

Thanks for the fix! In the demo, it looks like it is solved. But if you use layouts and pages in nuxt3, the same problem appears again (and duplicates the buttons next to the v-menu in the toolbar - but also appears when using v-dialog).

@KaelWD could you please reopen this issue until it is fully fixed?

Here is the reproduction link: https://stackblitz.com/edit/node-htkewu

[johnleider]

@magyarb We kindly ask users to not comment on closed/resolved issues. If you believe that this issue has not been correctly resolved, please create a new issue showing the regression or create a new discussion.

If you have any questions, please reach out to us in our Discord community.

[KaelWD]

Related: #15951 Nuxt uses suspense which is really annoying to intercept from inside.

[uditgogoi]

This bug is appearing when I am trying to run the SSR application (Nuxt3 + Vuetify3) in iOS v14 screens. The v-dialog just refuses to show up. I am not using activator but I need to open the v-dialog using the v-model value. Any fix for that ?

[magyarb]

For me, <client-only> solves this problem, and is a good enough workaround until this issue is fixed.

[ThomasBerne]

It appens also on the v-select.

[roseMix]

@KaelWD I'm still having this exact same issue with VOverlay on the latest version of Nuxt (3.2.2) and Vuetify (3.1.5).

<client-only> workaround works.

[tokidoki11]

Happening on v-menu as well on version 3.18

I wonder why this is closed

[johnleider]

We kindly ask users to not comment on closed/resolved issues. If you believe that this issue has not been correctly resolved, please create a new issue showing the regression or create a new discussion.

If you have any questions, please reach out to us in our Discord community.