hydration mismatch for z-index

[bux]

I'm experiencing hydration mismatches.

I'm using the following code:

<script setup lang="ts">
const drawer = defineModel<boolean>()
</script>

<template>
  <v-navigation-drawer v-model="drawer">
    <v-list>
      <v-list-item title="Navigation drawer" />
    </v-list>
  </v-navigation-drawer>
</template>

when setting the z-index to a fixed value the issue is gone:

<script setup lang="ts">
const drawer = defineModel<boolean>()
</script>

<template>
-  <v-navigation-drawer v-model="drawer">
+  <v-navigation-drawer v-model="drawer" style="z-index: 1005;">
    <v-list>
      <v-list-item title="Navigation drawer" />
    </v-list>
  </v-navigation-drawer>
</template>

[nsd0kleuschner]

+1

[BlueBazze]

+1

 - rendered on server: style="background-color:#ffb4a8;color:#000;caret-color:#000;left:0;z-index:1006;transform:translateX(0%);position:fixed;transition:none !important;"
 - expected on client: style="background-color:#ffb4a8;color:#000;caret-color:#000;left:0;z-index:1004;transform:translateX(0%);position:fixed;transition:none !important;"
  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.

[userquin]

This should be fixed with latest Vuetify v3.6.14, wrapping the drawer with v-app or v-layout works.

If you disable ssr client hints, the layout suspense will show the drawer once useLayoutItem promise resolved, when using ssr client hints (only on desktop browser), the drawer will be displayed on page refresh (no slide transition).

Check this repo https://github.com/userquin/nuxt-vuetify-issue-205-v-issue-19015, you can switch ssr client hints then run npm run build && node .output/server/index.mjs, the hydration missmatch warning shouldn't be there.