[Bug Report][3.4.9] Hydration class mismatch on VslideGroup, VNavigationDrawer

[Josepdal]

Environment

Vuetify Version: 3.4.9
Vue Version: 3.4.7
Browsers: Chrome 120.0.0.0
OS: Windows

Steps to reproduce

Visit the reproduction Link.
IMPORTANT: The viewport have to be large. I have extended the browser to my second monitor to increase the website width size.

Expected Behavior

There should be no vue warns

Actual Behavior

There are mismatch vue warns

Reproduction Link

https://stackblitz.com/edit/nuxt-starter-14rqc1

Other comments

This happens since Vue 3.4.5

[Vue warn]: Hydration class mismatch on <div class=​"v-slide-group v-slide-group--has-affixes v-slide-group--is-overflowing" style tabindex=​"0">​…​​

• rendered on server: class="[object Set]"
  • expected on client: class="[object Set]"
    Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
    You should fix the source of the mismatch.
    at

This also happens with other components, VNavigationDrawer and VBanner, all of them using computed display classes --mobile.
Don't know if this has anything to do with: /vuetify/src/composables/display.ts
const displayClasses = computed(() => { ... }

Another similar bug has been solved recently in Vue v3.4.6
vuejs/core#10006

As I don't know how to reproduce the error without Vuetify and have no idea what is exactly the root cause of this issue, I am opening the same issue in both projects.

Link to Vue issue: vuejs/core#10051

[KaelWD]

You need createVuetify({ ssr: true })

[Josepdal]

Ok that was quick, thank you. Don't know how it worked before.

[Josepdal]

Hello again @KaelWD, that code fixed the error I had with VSlideGroup, but now I have many other mismatch warns in other components.

Examples:

Hydration attribute mismatch on <input...
https://stackblitz.com/edit/nuxt-starter-14rqc1

Also migueabellan is having same issues with VNavigationDrawer and VAppBar.

Hydration attribute mismatch on <header...
Here is his code: https://stackblitz.com/edit/nuxt-starter-wtdujy

We are talking about this in a thread at Discord/vuetify-3-help

Thanks for your help!

[migueabellan]

Hello @KaelWD, I add to @Josepdal examples, Hydration style mismatch whit VNavigationDrawer and VAppBar together.

Steps to reproduce

Follow https://vuetifyjs.com/en/getting-started/installation/#using-nuxt-3 and minimal code

const vuetify = createVuetify({ ssr: true })

// app.vue
<template>
  <v-layout>
    <v-navigation-drawer />
    <v-app-bar />
    <v-main />
  </v-layout>
</template>

Reproduction Link

https://stackblitz.com/edit/nuxt-starter-wtdujy

Open console log

[Vue warn]: Hydration style mismatch on <header class=​"v-toolbar v-toolbar--density-default v-theme--light v-locale--is-ltr v-app-bar" style=​"top:​ 0px;​ z-index:​ 1004;​ transform:​ translateY(0%)​;​ position:​ fixed;​ left:​ 0px;​ width:​ calc((100% - 0px)​ - 0px)​;​">​…​​flex

• rendered on server: style="[object Map]"
• expected on client: style="[object Map]"

Thanks for your help!

[antonin-11]

Same error