Like the title says, when I put some html source via the v-html: directive I get an ugly error and warning
[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.preceded by a supposedly list of mismatching elements (they do not mismatch after checking though).
After losing like 2 hours on this I found I am not alone as seen on this thread
It seems this error message only happens when using other wrappers than div or span.
// This works without errors
...
<div v-html='myHtmlSource'></div>
...// This fires the errors
...
<p v-html='myHtmlSource'></p>
...EDIT:
Going deeper, nuxt.js goes crazier when trying to put a v-html rendered tag into a <nuxt-link> component... The components gets invisible or clunky (seems to appear at first reload then disappears magically)
// Don't try this at home
...
<nuxt-link to="/about">
<div v-html='myHtmlSource'></div>
</nuxt-link>
...