[Vue] Vue 3.5 Allow Hydration Mismatch

If you work with SSR, you have probably seen a warning like this.

This happens when the server-side rendered HTML and the client-side rendered HTML from hydration are different.

A classic example is when you are rendering time-related data like a timestamp, which changes in a split second.

<script setup lang="ts">
const time = new Date().getTime()
</script>

<template>
  <p>timestamp: {{ time }}</p>
</template>

But now in Vue 3.5, you can opt out from the hydration mismatch warning if your app is just designed that way and it’s not a sign of a bug in your code.

All you have to do is just to add the data-allow-mismatch attribute to the element containing the mismatched content.

<script setup lang="ts">
const time = new Date().getTime()
</script>

<template>
  <p data-allow-mismatch>timestamp: {{ time }}</p>
</template>

But we should narrow the scope to the specific part that is causing the mismatch. In this case, it’s the timestamp. We can create a span for that, and set the data-allow-mismatch attribute just for the span.

<script setup lang="ts">
const time = new Date().getTime()
</script>

<template>
  <p>timestamp: <span data-allow-mismatch>{{ time }}</span></p>
</template>

Now the hydration mismatch is still there, but you will not see the warning. So this feature is basically about removing warning messages; it’s not about what your app can do.

When you’re unsure what’s causing a hydration mismatch, you’ll need to debug it. A good approach is to compare the client-side and server-side HTML. You can find the client-side HTML directly in the warning message.

And you can get the server-side HTML from the sources tab.

By comparing these two HTML versions and identifying the differences, you can pinpoint where the hydration mismatch occurs.

That’s it for data-allow-mismatch from Vue 3.5. If you want to learn more about this feature you can check out the documentation for that.

---

Code

<script setup lang="ts">
const time = new Date().getTime()
</script>

<template>
  <p>timestamp: <span data-allow-mismatch>{{ time }}</span></p>
</template>