1

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.

brillout
  • 7,804
  • 11
  • 72
  • 84
  • All the warnings/errors seem to come from this file https://github.com/vuejs/vue-next/blob/58b1fa5ed15edc7264785cd722282a011ea3042c/packages/runtime-core/src/hydration.ts with no options to supress the warnings. – brillout Nov 19 '21 at 07:31
  • Not sure if it's somehow helpful but you could maybe look at this question (related to Nuxt): https://stackoverflow.com/q/47862591/8816585 To not find a solution to suppress the actual warning but to spot and avoid it. – kissu Nov 19 '21 at 12:32
  • On top of that, it seems (from the code) those warnings are only raised in DEV env... – Michal Levý Nov 23 '21 at 08:28
  • This happen just in production? Where do you deploy that? – PeterDev Feb 03 '23 at 16:25
  • This one is not related to production-only and can usually be simply reproduced by building locally (if no error during dev). @PeterDev – kissu Feb 03 '23 at 23:13

2 Answers2

1

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.

kissu
  • 40,416
  • 14
  • 65
  • 133
Sasbadi Wan
  • 81
  • 6
  • `v-warning` does not seem to be a valid directive, getting error `[Vue warn]: Failed to resolve directive: warning` – Ivan Lim Aug 25 '23 at 21:02
  • @IvanLim which version of Nuxt? I suggest a new question with a [repro]. – kissu Aug 26 '23 at 08:28
  • @kissu Nuxt 3.6.5. I did not spend time resolving it as I changed the logic to remove the hydration warning instead (by moving the content change code to onMounted). I did do a quick search on Google using keywords 'nuxt v-warning' and did not find any Nuxt documentation. Evidence that `v-warning` is not built-in to Nuxt? – Ivan Lim Aug 27 '23 at 13:53
  • @IvanLim `v-warning` is either coming from Vuetify or a custom directive yes, nothing related to Nuxt directly. Hence why the error is also happening, because it is probably external and does not support SSR. The answer provide above is more of pseudo-code hard way of suppressing it, not really a good approach overall as of how to solve a given problem (the miss match will still happen, which is quite a bad thing). – kissu Aug 27 '23 at 20:33
0

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.

brillout
  • 7,804
  • 11
  • 72
  • 84