[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

[RyanClementsHax]

Sorry to be the bearer of bad news, but could we reopen this issue? It is still reproduceable on the latest version of [email protected]

https://stackblitz.com/edit/nuxt-starter-dsdqtb?file=package.json

[thorge]

Same over here with [email protected]:

[Vue warn]: Hydration style mismatch on 
<header id="nav-main" class="v-toolbar v-toolbar--fla… v-app-bar text-primary" style="top:0;z-index:1006;trans…sition:none !important;" app="" data-v-a254f246=""> 
  - 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;"

[nbro]

See nuxt/nuxt#26483

[ElYaiko]

Still happening in 3.5.13 with any app component like VAppBar:

[Vue warn]: Hydration style mismatch on <header class=​"v-toolbar v-toolbar--flat v-toolbar--density-default bg-transparent v-theme--dark v-locale--is-ltr v-app-bar position-fixed d-print-none" style=​"top:​ 0px;​ z-index:​ 906;​ transform:​ translateY(0%)​;​ position:​ absolute;​ left:​ 0px;​ width:​ calc(100% + 0px)​;​">​…​</header>​flex 
  - rendered on server: style="top:0;z-index:906;transform:translateY(0%);position:absolute;transition:none !important;"
  - expected on client: style="top:0;z-index:904;transform:translateY(0%);position:absolute;transition:none !important;"
  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.```

[chriscpty]

Clearly an issue with SSR ids and client rendered ids that are used in classnames (they mismatch when the app is mounted).

yeah, all the issues related to this i'm seeing amount to this. the worst offender I think are v-tooltips - in my project, the SSR issue gave them all the same ID, leading to not only loads of warnings but also all of them displaying the same tooltip :D

For now, wrapping them in a v-no-ssr is a workaround for that last issue, but obviously still throws a hydration mismatch warning.

[alokVishu]

I'm also facing the same.

[ZumelzuR]

me too

[ribrewguy]

I am seeing this as well. VMain appears to exhibit this behavior. Removing it resolves the warning.

[psgganesh]

Only the below steps fixed for me...

I updated package.json to use vuetify": "3.6.5" and ran npm run update and it was fixed!!

[chriscpty]

I still get the hydration mismatch issues on 3.6.5, so the issue seems to still exist

[rudolfbyker]

Still seeing this in v3.6.6, too.

[tommie]

If you followed the Nuxt 3 Installation guide, and came here... Don't forget to add ssr: true in createVuetify().

[rudolfbyker]

@tommie In my case, I already had ssr: true, and still getting Hydration style mismatch warnings related to the z-index CSS attribute.

This made me think: Should it really be ssr: true, or rather ssr: !!process.server?

[tommie]

Should it really be ssr: true, or rather ssr: !!process.server?

The code already does the in-browser check on top of options.ssr:

vuetify/packages/vuetify/src/framework.ts

Line 88 in 665c616

if (IN_BROWSER && options.ssr) {

vuetify/packages/vuetify/src/util/globals.ts

Line 1 in 665c616

export const IN_BROWSER = typeof window !== 'undefined'

Same where it tries to retrieve the display details:

vuetify/packages/vuetify/src/composables/display.ts

Lines 102 to 121 in 665c616

	function getClientWidth (ssr?: SSROptions) {
	return IN_BROWSER && !ssr
	? window.innerWidth
	: (typeof ssr === 'object' && ssr.clientWidth) || 0
	}
	function getClientHeight (ssr?: SSROptions) {
	return IN_BROWSER && !ssr
	? window.innerHeight
	: (typeof ssr === 'object' && ssr.clientHeight) || 0
	}
	function getPlatform (ssr?: SSROptions): DisplayPlatform {
	const userAgent = IN_BROWSER && !ssr
	? window.navigator.userAgent
	: 'ssr'
	function match (regexp: RegExp) {
	return Boolean(userAgent.match(regexp))
	}

[rudolfbyker]

OK, I don't fully grasp what the code in the body of if (IN_BROWSER && options.ssr) { does, but the fact that there is a check for IN_BROWSER && options.ssr tells me that I should NOT set ssr to False in the browser, otherwise the code inside if (IN_BROWSER && options.ssr) { can never run. So it must be ssr: true and not ssr: !!process.server. 🤔

[corbinu]

I am also seeing this on v-tabs where the selected tab is missing the selected classes on the server side.

[bogdanciuca]

Still present in v3.6.9, VChipGroup is also causing hydration issues.

[Miltonbhowmick]

I am also seeing this on v-tabs where the selected tab is missing the selected classes on the server side.

I am also facing on v-tabs sharply now!
Then i just use <client-only> </client-only> and hydration issue solve for v-tabs.

For example,

<client-only>
    <v-tabs v-model="tab" align-tabs="center" :key="tab">
      <v-tab
        v-for="(tabObj, index) in props?.blockItem?.value?.tabs"
        :key="tabObj.title + '_' + index"
        :value="index"
        base-color="primary-text"
        ><span>{{ tabObj.title }}</span></v-tab
      >
    </v-tabs>
    <v-tabs-window v-model="tab" class="mt-5">
      <v-tabs-window-item
        v-for="(tabObj, index) in props?.blockItem?.value?.tabs"
        :key="tabObj + '_container_' + index"
      >
        <MySlider :itemList="tabObj?.items" />
      </v-tabs-window-item>
    </v-tabs-window>
  </client-only>

[benlavalley]

Nuxt 3.4.12 / Vuetify 3.6.13 / Vue 3.4.34 and my v-navigation-drawer only works without throwing this warning if I wrap it in ClientOnly.