Subscribe on changes!

Hydration mismatch when using v-show and custom `style` attribute

avatar
Jan 5th 2024

Vue version

3.4.5

Link to minimal reproduction

https://stackblitz.com/edit/github-dyqiua

Steps to reproduce

Use <div v-show="false" :style="{ width: 'auto' }">test</div> in your component and SSR it. Check the console for hydration errors

What is expected?

No hydration errors

What is actually happening?

[Vue warn]: Hydration style mismatch on 
<div style="display:none;width:auto;"> 
  - rendered on server: style="display:none;width:auto;"
  - expected on client: style="width:auto;"

The server-output it actually correct though.

System Info

No response

Any additional comments?

Possibly related: https://github.com/vuejs/core/issues/10000, https://github.com/vuejs/core/pull/10004

avatar
Jan 8th 2024

I encounter the same thing.