[Bug Report][3.4.9] Hydration style mismatch VNavigationDrawer and VAppBar together

[migueabellan]

Environment

Vuetify Version: 3.4.9
Vue Version: 3.4.7
Browsers: Chrome 117.0.0.0
OS: Linux x86_64

Steps to reproduce

1.- Follow instructions exactly from https://vuetifyjs.com/en/getting-started/installation/#using-nuxt-3
2.- Add ssr on plugin createVuetify({ ssr: true })
3.- Add minimal code on app.vue with VNavigationDrawer and VAppBar together

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

Expected Behavior

There should be no vue warns

Actual Behavior

There are mismatch vue warns

[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]"

Reproduction Link

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

Other comments

Only occur using VNavigationDrawer and VAppBar together

[KaelWD]

vuejs/core#5300 doesn't actually seem to be fixed

[neutrino84]

This might be one of those issues that needs a global search and replace, seeing it in v-img too, v-navigation-drawer, and more components...

v-img

• rendered on server: draggable="true"
• expected on client: draggable=""

v-nav-d

• rendered on server: class="v-navigation-drawer v-navigation-drawer--left v-theme--darkTheme navigation-instances"
• expected on client: class="v-navigation-drawer v-navigation-drawer--left v-navigation-drawer--active v-theme--darkTheme navigation-instances"

v-toolbar

• rendered on server: style="top:0;z-index:1006;transform:translateY(0%);position:fixed;transition:none !important;"
• expected on client: style="top:0;z-index:1004;transform:translateY(0%);position:fixed;transition:none !important;"

Not sure if this helps? PS I'm on 3.4.10 vue/vuetify

[jscottsf]

On latest of everything and it's just class mismatch on everything. Really impossible to debug and dev because of the log spew on all components.

Never saw this problem before until recent updates.

+onRenderClient.js:18 [Vue warn]: Hydration class mismatch on <div class=​"v-progress-linear v-progress-linear--rounded rounded-md v-theme--light v-locale--is-ltr" style=​"top:​0;​height:​0;​--v-progress-linear-height:​2px;​left:​50%;​transform:​translateX(-50%)​;​" role=​"progressbar" aria-hidden=​"true" aria-valuemin=​"0" aria-valuemax=​"100">​…​</div>​ 
  - rendered on server: class="v-progress-linear v-progress-linear--rounded rounded-md v-theme--light v-locale--is-ltr"
  - expected on client: class="v-progress-linear v-progress-linear--rounded rounded-md v-theme--dark v-locale--is-ltr"

UPDATE:

If I start manually assigning id properties on some components, like an autocomplete, then the problem goes away. Clearly an issue with SSR ids and client rendered ids that are used in classnames (they mismatch when the app is mounted).

The issue above, was due to light theme on the SSR, and a dark theme being set in an onMounted handler in the client, which is reasonable if using localstorage to remember theme state. This used to work.

[danilpon98]

I encountered the same problem when using the VItemGroup and VItem component. I change the color of the button depending on the isSelected flag.

- rendered on server: class="v-btn v-btn--elevated v-theme--light bg-background v-btn--density-default v-btn--size-large v-btn--variant-elevated v-btn--customize flex-1-1"
- expected on client: class="v-btn v-btn--elevated v-theme--light bg-primary v-btn--density-default v-btn--size-large v-btn--variant-elevated v-btn--customize flex-1-1"

[Zebnastien]

FYI, vuejs/core#5300 is marked as closed and issue is still present with:

Vue 3.4.19
Nuxt 3.10.2
Vuetify 3.5.4

[KaelWD]

#15229 fixed this too