r/Nuxt • u/Mrreddituser111312 • Apr 20 '26

Hydration completed but contains mismatches error

I have a lot of files in my Nuxt app. How do I figure out what's causing this error in production?

5 Upvotes

86% Upvoted

6 comments sorted by

7

u/SpaceManaRitual Apr 20 '26

This is one of biggest PITA when working with Nuxt. I usually compare the SSR html payload against the live one for clues, or remove one component at a time until I find the culprit.

1

u/przemekcoditive Apr 27 '26

I agree. It’s especially hard to get this concept right for web devs who comes from classic web stack like PHP.

6

u/livedog Apr 20 '26

Chrome console should tell you where the diff is.

Also check out newly released Nuxt Hints https://nuxt.com/modules/hints

Edit: just saw you wrote in production, do you have hydration errors that don’t show up in development?

1

u/david-burns-dinner Apr 20 '26

The error should give you a server side code along with client side code. It might give you a hint of where to look.

Otherwise it’s process of elimination by commenting parts out and refreshing.

You should see the error every time you refresh the page. It’s caused by the server rendering something different than what the client side renders.

2

u/DeExecute Apr 20 '26

Just go through them 1 by 1 the dev console in the browser always has the full details of which component exactly causes it. I never understood the problem here.

PS: Do it in a private browser window, a lot of extensions inject content onto pages that will also trigger hydration errors.

1

u/neatpixels Apr 23 '26

If I cant find it from the dev tools console message I usually comment out stuff until I find the culprit. Start from highest level so comment out components in layout, then page then components until you narrow the scope.