Version

3.2.33

Reproduction link

stackblitz.com

Steps to reproduce

When I use an object with the condition v-if inside the slot of an component it causes an hydration error.

<AppImage :image="object.image" >
    <div v-if="object.time < 90" class="card-label">Fast</div>
</AppImage>

However if it's just the object and no condition, I do not get the hydration error.

<AppImage :image="object.image" >
    <div >{{ object.time }}</div>
</AppImage>

~components/AppImage.vue

<template>
<div>
    ...
    <slot />
</div>
</template>

What is expected?

I would assume that this should and would work without an hydration error.

What is actually happening?

When you use v-if="object.property" in it will cause an hydration error.

Log

client.ts:16 [vite] connecting...
client.ts:53 [vite] connected.
runtime-core.esm-bundler.js:1328 <Suspense> is an experimental feature and its API will likely change.
runtime-core.esm-bundler.js:38 [Vue warn]: Hydration node mismatch:
- Client vnode: figure 
- Server rendered DOM: <!--v-if-->  
  at <AppImage image= {id: 43, name: 'cake-5091032.jpg', alternativeText: 'cake-5091032.jpg', caption: 'cake-5091032.jpg', width: 3648, …} lazy=true class="card-image"  ... > 
  at <RouterLink to="/recipes/45-nr2-sjokoladekake" activeClass=undefined exactActiveClass=undefined  ... > 
  at <NuxtLink class="container" to="/recipes/45-nr2-sjokoladekake" > 
  at <CardRecipe key=0 headingLevel="2" data= (4) [{…}, {…}, {…}, {…}] > 
  at <Index> 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key="/recipes" > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="page" mode="out-in" > 
  at <RouterView > 
  at <NuxtPage> 
  at <Default > 
  at <AsyncComponentWrapper > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="layout" mode="out-in" > 
  at <Anonymous> 
  at <App key=1 > 
  at <NuxtRoot>
warn2 @ runtime-core.esm-bundler.js:38
handleMismatch @ runtime-core.esm-bundler.js:4328
onMismatch @ runtime-core.esm-bundler.js:4077
hydrateNode @ runtime-core.esm-bundler.js:4141
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateFragment @ runtime-core.esm-bundler.js:4312
hydrateNode @ runtime-core.esm-bundler.js:4133
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
(anonymous) @ runtime-core.esm-bundler.js:1481
Promise.then (async)
registerDep @ runtime-core.esm-bundler.js:1460
mountComponent @ runtime-core.esm-bundler.js:4959
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSuspense @ runtime-core.esm-bundler.js:1523
hydrateNode @ runtime-core.esm-bundler.js:4189
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateFragment @ runtime-core.esm-bundler.js:4312
hydrateNode @ runtime-core.esm-bundler.js:4133
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
(anonymous) @ runtime-core.esm-bundler.js:5049
Promise.then (async)
componentUpdateFn @ runtime-core.esm-bundler.js:5044
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
(anonymous) @ runtime-core.esm-bundler.js:1481
Promise.then (async)
registerDep @ runtime-core.esm-bundler.js:1460
mountComponent @ runtime-core.esm-bundler.js:4959
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSuspense @ runtime-core.esm-bundler.js:1523
hydrateNode @ runtime-core.esm-bundler.js:4189
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrate2 @ runtime-core.esm-bundler.js:4068
mount @ runtime-core.esm-bundler.js:3900
app.mount @ runtime-dom.esm-bundler.js:1612
initApp @ entry.mjs:52
await in initApp (async)
(anonymous) @ entry.mjs:60
Show 112 more frames
runtime-core.esm-bundler.js:38 [Vue warn]: Hydration node mismatch:
- Client vnode: img 
- Server rendered DOM: <!--]-->  
  at <AppImage image= {id: 43, name: 'cake-5091032.jpg', alternativeText: 'cake-5091032.jpg', caption: 'cake-5091032.jpg', width: 3648, …} lazy=true class="card-image"  ... > 
  at <RouterLink to="/recipes/45-nr2-sjokoladekake" activeClass=undefined exactActiveClass=undefined  ... > 
  at <NuxtLink class="container" to="/recipes/45-nr2-sjokoladekake" > 
  at <CardRecipe key=0 headingLevel="2" data= (4) [{…}, {…}, {…}, {…}] > 
  at <Index> 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key="/recipes" > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="page" mode="out-in" > 
  at <RouterView > 
  at <NuxtPage> 
  at <Default > 
  at <AsyncComponentWrapper > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="layout" mode="out-in" > 
  at <Anonymous> 
  at <App key=1 > 
  at <NuxtRoot>
warn2 @ runtime-core.esm-bundler.js:38
handleMismatch @ runtime-core.esm-bundler.js:4328
onMismatch @ runtime-core.esm-bundler.js:4077
hydrateNode @ runtime-core.esm-bundler.js:4141
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateFragment @ runtime-core.esm-bundler.js:4312
hydrateNode @ runtime-core.esm-bundler.js:4133
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
(anonymous) @ runtime-core.esm-bundler.js:1481
Promise.then (async)
registerDep @ runtime-core.esm-bundler.js:1460
mountComponent @ runtime-core.esm-bundler.js:4959
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSuspense @ runtime-core.esm-bundler.js:1523
hydrateNode @ runtime-core.esm-bundler.js:4189
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateFragment @ runtime-core.esm-bundler.js:4312
hydrateNode @ runtime-core.esm-bundler.js:4133
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
(anonymous) @ runtime-core.esm-bundler.js:5049
Promise.then (async)
componentUpdateFn @ runtime-core.esm-bundler.js:5044
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
(anonymous) @ runtime-core.esm-bundler.js:1481
Promise.then (async)
registerDep @ runtime-core.esm-bundler.js:1460
mountComponent @ runtime-core.esm-bundler.js:4959
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSuspense @ runtime-core.esm-bundler.js:1523
hydrateNode @ runtime-core.esm-bundler.js:4189
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrate2 @ runtime-core.esm-bundler.js:4068
mount @ runtime-core.esm-bundler.js:3900
app.mount @ runtime-dom.esm-bundler.js:1612
initApp @ entry.mjs:52
await in initApp (async)
(anonymous) @ entry.mjs:60
Show 112 more frames
runtime-core.esm-bundler.js:38 [Vue warn]: Hydration children mismatch in <div>: server rendered element contains more child nodes than client vdom. 
  at <AppImage image= {id: 43, name: 'cake-5091032.jpg', alternativeText: 'cake-5091032.jpg', caption: 'cake-5091032.jpg', width: 3648, …} lazy=true class="card-image"  ... > 
  at <RouterLink to="/recipes/45-nr2-sjokoladekake" activeClass=undefined exactActiveClass=undefined  ... > 
  at <NuxtLink class="container" to="/recipes/45-nr2-sjokoladekake" > 
  at <CardRecipe key=0 headingLevel="2" data= (4) [{…}, {…}, {…}, {…}] > 
  at <Index> 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key="/recipes" > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="page" mode="out-in" > 
  at <RouterView > 
  at <NuxtPage> 
  at <Default > 
  at <AsyncComponentWrapper > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="layout" mode="out-in" > 
  at <Anonymous> 
  at <App key=1 > 
  at <NuxtRoot>
warn2 @ runtime-core.esm-bundler.js:38
hydrateElement @ runtime-core.esm-bundler.js:4253
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateFragment @ runtime-core.esm-bundler.js:4312
hydrateNode @ runtime-core.esm-bundler.js:4133
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
(anonymous) @ runtime-core.esm-bundler.js:1481
Promise.then (async)
registerDep @ runtime-core.esm-bundler.js:1460
mountComponent @ runtime-core.esm-bundler.js:4959
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSuspense @ runtime-core.esm-bundler.js:1523
hydrateNode @ runtime-core.esm-bundler.js:4189
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateFragment @ runtime-core.esm-bundler.js:4312
hydrateNode @ runtime-core.esm-bundler.js:4133
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
(anonymous) @ runtime-core.esm-bundler.js:5049
Promise.then (async)
componentUpdateFn @ runtime-core.esm-bundler.js:5044
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
(anonymous) @ runtime-core.esm-bundler.js:1481
Promise.then (async)
registerDep @ runtime-core.esm-bundler.js:1460
mountComponent @ runtime-core.esm-bundler.js:4959
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSuspense @ runtime-core.esm-bundler.js:1523
hydrateNode @ runtime-core.esm-bundler.js:4189
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrate2 @ runtime-core.esm-bundler.js:4068
mount @ runtime-core.esm-bundler.js:3900
app.mount @ runtime-dom.esm-bundler.js:1612
initApp @ entry.mjs:52
await in initApp (async)
(anonymous) @ entry.mjs:60
Show 108 more frames
runtime-core.esm-bundler.js:38 [Vue warn]: Hydration node mismatch:
- Client vnode: figure 
- Server rendered DOM: <!--v-if-->  
  at <AppImage image= {id: 45, name: 'cake-1850011.jpg', alternativeText: 'cake-1850011.jpg', caption: 'cake-1850011.jpg', width: 6683, …} lazy=true class="card-image"  ... > 
  at <RouterLink to="/recipes/47-muscle-boys-sjokoladekake" activeClass=undefined exactActiveClass=undefined  ... > 
  at <NuxtLink class="container" to="/recipes/47-muscle-boys-sjokoladekake" > 
  at <CardRecipe key=0 headingLevel="2" data= (4) [{…}, {…}, {…}, {…}] > 
  at <Index> 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key="/recipes" > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="page" mode="out-in" > 
  at <RouterView > 
  at <NuxtPage> 
  at <Default > 
  at <AsyncComponentWrapper > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="layout" mode="out-in" > 
  at <Anonymous> 
  at <App key=1 > 
  at <NuxtRoot>
warn2 @ runtime-core.esm-bundler.js:38
handleMismatch @ runtime-core.esm-bundler.js:4328
onMismatch @ runtime-core.esm-bundler.js:4077
hydrateNode @ runtime-core.esm-bundler.js:4141
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateFragment @ runtime-core.esm-bundler.js:4312
hydrateNode @ runtime-core.esm-bundler.js:4133
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
(anonymous) @ runtime-core.esm-bundler.js:1481
Promise.then (async)
registerDep @ runtime-core.esm-bundler.js:1460
mountComponent @ runtime-core.esm-bundler.js:4959
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSuspense @ runtime-core.esm-bundler.js:1523
hydrateNode @ runtime-core.esm-bundler.js:4189
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateFragment @ runtime-core.esm-bundler.js:4312
hydrateNode @ runtime-core.esm-bundler.js:4133
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
(anonymous) @ runtime-core.esm-bundler.js:5049
Promise.then (async)
componentUpdateFn @ runtime-core.esm-bundler.js:5044
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
(anonymous) @ runtime-core.esm-bundler.js:1481
Promise.then (async)
registerDep @ runtime-core.esm-bundler.js:1460
mountComponent @ runtime-core.esm-bundler.js:4959
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSuspense @ runtime-core.esm-bundler.js:1523
hydrateNode @ runtime-core.esm-bundler.js:4189
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrate2 @ runtime-core.esm-bundler.js:4068
mount @ runtime-core.esm-bundler.js:3900
app.mount @ runtime-dom.esm-bundler.js:1612
initApp @ entry.mjs:52
await in initApp (async)
(anonymous) @ entry.mjs:60
Show 112 more frames
runtime-core.esm-bundler.js:38 [Vue warn]: Hydration node mismatch:
- Client vnode: img 
- Server rendered DOM: <!--]-->  
  at <AppImage image= {id: 45, name: 'cake-1850011.jpg', alternativeText: 'cake-1850011.jpg', caption: 'cake-1850011.jpg', width: 6683, …} lazy=true class="card-image"  ... > 
  at <RouterLink to="/recipes/47-muscle-boys-sjokoladekake" activeClass=undefined exactActiveClass=undefined  ... > 
  at <NuxtLink class="container" to="/recipes/47-muscle-boys-sjokoladekake" > 
  at <CardRecipe key=0 headingLevel="2" data= (4) [{…}, {…}, {…}, {…}] > 
  at <Index> 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key="/recipes" > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="page" mode="out-in" > 
  at <RouterView > 
  at <NuxtPage> 
  at <Default > 
  at <AsyncComponentWrapper > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="layout" mode="out-in" > 
  at <Anonymous> 
  at <App key=1 > 
  at <NuxtRoot>
warn2 @ runtime-core.esm-bundler.js:38
handleMismatch @ runtime-core.esm-bundler.js:4328
onMismatch @ runtime-core.esm-bundler.js:4077
hydrateNode @ runtime-core.esm-bundler.js:4141
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateFragment @ runtime-core.esm-bundler.js:4312
hydrateNode @ runtime-core.esm-bundler.js:4133
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
(anonymous) @ runtime-core.esm-bundler.js:1481
Promise.then (async)
registerDep @ runtime-core.esm-bundler.js:1460
mountComponent @ runtime-core.esm-bundler.js:4959
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSuspense @ runtime-core.esm-bundler.js:1523
hydrateNode @ runtime-core.esm-bundler.js:4189
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateFragment @ runtime-core.esm-bundler.js:4312
hydrateNode @ runtime-core.esm-bundler.js:4133
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
(anonymous) @ runtime-core.esm-bundler.js:5049
Promise.then (async)
componentUpdateFn @ runtime-core.esm-bundler.js:5044
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
(anonymous) @ runtime-core.esm-bundler.js:1481
Promise.then (async)
registerDep @ runtime-core.esm-bundler.js:1460
mountComponent @ runtime-core.esm-bundler.js:4959
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSuspense @ runtime-core.esm-bundler.js:1523
hydrateNode @ runtime-core.esm-bundler.js:4189
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrate2 @ runtime-core.esm-bundler.js:4068
mount @ runtime-core.esm-bundler.js:3900
app.mount @ runtime-dom.esm-bundler.js:1612
initApp @ entry.mjs:52
await in initApp (async)
(anonymous) @ entry.mjs:60
Show 112 more frames
runtime-core.esm-bundler.js:38 [Vue warn]: Hydration children mismatch in <div>: server rendered element contains more child nodes than client vdom. 
  at <AppImage image= {id: 45, name: 'cake-1850011.jpg', alternativeText: 'cake-1850011.jpg', caption: 'cake-1850011.jpg', width: 6683, …} lazy=true class="card-image"  ... > 
  at <RouterLink to="/recipes/47-muscle-boys-sjokoladekake" activeClass=undefined exactActiveClass=undefined  ... > 
  at <NuxtLink class="container" to="/recipes/47-muscle-boys-sjokoladekake" > 
  at <CardRecipe key=0 headingLevel="2" data= (4) [{…}, {…}, {…}, {…}] > 
  at <Index> 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > key="/recipes" > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="page" mode="out-in" > 
  at <RouterView > 
  at <NuxtPage> 
  at <Default > 
  at <AsyncComponentWrapper > 
  at <BaseTransition mode="out-in" appear=false persisted=false  ... > 
  at <Transition name="layout" mode="out-in" > 
  at <Anonymous> 
  at <App key=1 > 
  at <NuxtRoot>
warn2 @ runtime-core.esm-bundler.js:38
hydrateElement @ runtime-core.esm-bundler.js:4253
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateFragment @ runtime-core.esm-bundler.js:4312
hydrateNode @ runtime-core.esm-bundler.js:4133
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
(anonymous) @ runtime-core.esm-bundler.js:1481
Promise.then (async)
registerDep @ runtime-core.esm-bundler.js:1460
mountComponent @ runtime-core.esm-bundler.js:4959
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSuspense @ runtime-core.esm-bundler.js:1523
hydrateNode @ runtime-core.esm-bundler.js:4189
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateFragment @ runtime-core.esm-bundler.js:4312
hydrateNode @ runtime-core.esm-bundler.js:4133
hydrateChildren @ runtime-core.esm-bundler.js:4286
hydrateElement @ runtime-core.esm-bundler.js:4248
hydrateNode @ runtime-core.esm-bundler.js:4144
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
(anonymous) @ runtime-core.esm-bundler.js:5049
Promise.then (async)
componentUpdateFn @ runtime-core.esm-bundler.js:5044
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
(anonymous) @ runtime-core.esm-bundler.js:1481
Promise.then (async)
registerDep @ runtime-core.esm-bundler.js:1460
mountComponent @ runtime-core.esm-bundler.js:4959
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrateSuspense @ runtime-core.esm-bundler.js:1523
hydrateNode @ runtime-core.esm-bundler.js:4189
hydrateSubTree @ runtime-core.esm-bundler.js:5038
componentUpdateFn @ runtime-core.esm-bundler.js:5052
run @ reactivity.esm-bundler.js:185
setupRenderEffect @ runtime-core.esm-bundler.js:5185
mountComponent @ runtime-core.esm-bundler.js:4968
hydrateNode @ runtime-core.esm-bundler.js:4153
hydrate2 @ runtime-core.esm-bundler.js:4068
mount @ runtime-core.esm-bundler.js:3900
app.mount @ runtime-dom.esm-bundler.js:1612
initApp @ entry.mjs:52
await in initApp (async)
(anonymous) @ entry.mjs:60
Show 108 more frames

Please more Info.

Your example has not print vue's error in console.

your repro can not reproduce your problem.