Vue 3 SSR issues

When using useWindowVirtualizer, with SSR and Nuxt 3, I'm getting the error in the screenshot:

[Vue warn]: Hydration children mismatch on <ol style="position:absolute;top:0;left:0;width:100%;transform:translateY(0px);" class="space-y-4">…</ol> 
Server rendered element contains fewer child nodes than client vdom.

[Vue warn]: Hydration children mismatch on <ol style="position:absolute;top:0;left:0;width:100%;transform:translateY(0px);" class="space-y-4">…</ol> 
Server rendered element contains fewer child nodes than client vdom.

[Vue warn]: Hydration children mismatch on <ol style="position:absolute;top:0;left:0;width:100%;transform:translateY(0px);" class="space-y-4">…</ol> 
Server rendered element contains fewer child nodes than client vdom.

[Vue warn]: Hydration children mismatch on <ol style="position:absolute;top:0;left:0;width:100%;transform:translateY(0px);" class="space-y-4">…</ol> 
Server rendered element contains fewer child nodes than client vdom.

I suppose this is because the virtual window in the server is different from the client, how can I fix or ignore this issue so hydration does not fail?

You can check all the source code here:
https://github.com/Rule-34/App/blob/main/pages/posts/%5Bdomain%5D.vue#L540

Vue 3 SSR issues

Similar Threads

Similar Threads

Similar Threads