Description
Environment
- Operating System: Linux
- Node Version: v20.19.1
- Nuxt Version: 3.17.3
- CLI Version: 3.25.1
- Nitro Version: 2.11.12
- Package Manager: npm@10.8.2
- Builder: -
- User Config: compatibilityDate, devtools
- Runtime Modules: -
- Build Modules: -
Reproduction
https://stackblitz.com/edit/github-jwxjfoui?file=components%2FTest.vue
(You need to open the console F12 and click on the refresh button)
Describe the bug
If a div is surrounded by a Transition tag with :appear="true" and that this div has it's own class, it provoque an Hidratation mismatch.
✔ Working:
<Transition name="fade-in" >
<div v-if="isOpen" class="imaclass">I have some classes</div>
</Transition>✔ Working:
<Transition name="fade-in" :appear="true">
<div v-if="isOpen">I have some classes</div>
</Transition>❌ No Working:
<Transition name="fade-in" :appear="true">
<div v-if="isOpen" class="imaclass">I have some classes</div>
</Transition>Additional context
chrome_jADm3IRPpZ.mp4
Logs
- rendered on server: class="imaclass fade-in-enter-from fade-in-enter-active"
- expected on client: class="imaclass"