Debug hydration errors in production Nuxt

Hydration errors are one of the trickiest parts about SSR — especially when they only happen in production.

Thankfully, Vue 3.4 lets us do this.

In Nuxt, all we need to do is update our config:

export default defineNuxtConfig({
  debug: true,
  // rest of your config...
})

If you aren’t using Nuxt, you can enable this using the new compile-time flag: __VUE_PROD_HYDRATION_MISMATCH_DETAILS__.

This is what Nuxt uses.

Enabling flags is different based on what build tool you’re using, but if you’re using Vite this is what it looks like in your vite.config.js file:

import { defineConfig } from 'vite'

export default defineConfig({
  define: {
    __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'true'
  }
})

Turning this on will increase your bundle size, but it’s really useful for tracking down those pesky hydration errors.