components
components copied to clipboard
SSR using `data-twic-background` attribute cause hydratation mismatch because of `twic-background-done` class
component: nuxt3
version: 0.27.1
On nuxt3, during SSR I have a hydration class mismatch caused by tthe removal of twic-background-done
Exemple of warning message
[Vue warn]: Hydration class mismatch on
<div class="h-full min-h-[160px] bg-…er twic-background-done" data-twic-background="url('image:/XXX.jpg')" data-twic-step="50" data-v-inspector="components/XXX.vue:17:5" style='background-image: url("h…twic=v1/cover=300x163");'>
- rendered on server: class="h-full min-h-[160px] bg-cover bg-center twic-background-done"
- expected on client: class="h-full min-h-[160px] bg-cover bg-center"
Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
You should fix the source of the mismatch.
Exemple of component causing errors
<div
v-if="srcImage"
:data-twic-background="`url('image:${srcImage}')`"
data-twic-step="50"
class="h-full min-h-[160px] bg-cover bg-center"
/>