I'm rendering a Vue component to HTML and it is expected that the DOM rendering/hydration doesn't completely match the HTML rendered version.
How can I supress the hydration mismatch warning?
In React there is https://reactjs.org/docs/dom-elements.html#suppresshydrationwarning (Is there any way to avoid "Text content did not match" warning in SSR with React?) — is there a Vue counterpart to this?
Context: I'm the author of vite-plugin-ssr and some of my users need that.
I wish that I can help by commenting on your post instead of posting answers. But you can give this a try:
There is no direct equivalent to React's react-dom/suppressHydrationWarning in Vue, but you can suppress the warning message in a few ways:
By setting the warning option to false in the Vue component:
<template>
<div>
<p v-warning="false">This will not generate a warning</p>
</div>
</template>
By setting the global Vue.config. warning option to false :
Vue.config.warning = false
By setting the environment variable VUE_WARNING_DISABLE to true :
export VUE_WARNING_DISABLE = true
Or by using the vue-cli-plugin-suppress-warnings plugin.
I don't know if there is a Vue counterpart to suppressHydrationWarning but one thing you may try is to manually remove the DOM content before you hydrate.
const rootId = 'app'
const root = document.getElementById(vueRootId)
root.innerHTML = ''
// Your hydration code
// ...
See Remove all child elements of a DOM node in JavaScript for alternative ways to remove the childs of a DOM element.