The client-side rendered virtual DOM tree is not matching server-rendered content

[wagerfield]

Firstly thank you for creating this package—it looks awesome!...however I have not been able to get it to work 😕

I'm using Nuxt in universal mode, have copied your example, but am getting the following error in the console:

[Vue warn]: The client-side rendered virtual DOM tree is not matching
server-rendered content. This is likely caused by incorrect HTML markup, 
for example nesting block-level elements inside <p>, or missing <tbody>.
Bailing hydration and performing full client-side render.

I've tried configuring the LazyHydration component with ssr-only, when-visible and when-idle but get the same error.

I've created an example on Code Sandbox for you to review here: https://codesandbox.io/s/wwxw3x6qxk

I am using the LazyHydration component in layouts/default.vue to wrap the dynamically imported header component.

I thought that the issue might be because the header component is being imported using the src alias "~/", so I tried switching to a relative path—but still got the same error.

I then thought that it might be because the header component was using the <nuxt-link> component within it, so I replaced these with anchor tags—but still get the same error.

Any help would be very much appreciated!

[maoberlehner]

Hey @wagerfield!

Thanks for reporting this issue! I found the problem: currently this plugin is naively only working with child components which render a <div> as their root element.

As a quick workaround you can either wrap the <header> of your header.vue component in a <div> or you can write <v-lazy ssr-only><div><v-header /></div></v-lazy>.

I'll work on a fix and update this issue accordingly!

[wagerfield]

Amazing! Thanks so much for fixing that so quickly–works like a charm.

I'm well excited by this package, so please let me know if there's anything I can do to help get it out of beta 😄