\n \u003C/u-form-field>\n \u003C/u-form>\n \u003C/u-app>\n\u003C/template>\n\n\u003Cscript setup>\nconst state = reactive({\n serialnumber: ''\n})\n\u003C/script>\n```\n\nChrome devtools console:\n```\n[Vue warn]: Hydration children mismatch on \u003Cform id=\"v-0\">…\u003C/form>\u003C!--[-->\u003Cdiv class=\"text-sm\">…\u003C/div>\u003C!--]-->\u003Ctextarea name style=\"display: none;\">\u003C/textarea>\u003C/form> \nServer rendered element contains more child nodes than client vdom. \n at \u003CUForm state= {serialnumber: ''}serialnumber: \"\"[[Prototype]]: Object > \n at \u003CApp key=4 > \n at \u003CNuxtRoot>\n```\n\nThis occurs on Nuxt UI 3.3.2 as well as 4.0.0-alpha.0. It persists even when my form is more complex and has a Valibot schema.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3210,3213,3216,3219],{"name":3211,"color":3212},"bug","d73a4a",{"name":3214,"color":3215},"needs reproduction","CB47CF",{"name":3217,"color":3218},"triage","ffffff",{"name":3220,"color":3221},"v4","49DCB8",4846,"ui","Form: Hydration mismatch","2025-09-03T19:01:35Z","https://github.com/nuxt/ui/issues/4846",0.6194777,{"description":3229,"labels":3230,"number":3235,"owner":3179,"repository":3179,"state":3180,"title":3236,"updated_at":3237,"url":3238,"score":3239},"### Environment\r\n\r\n- Operating System: `Linux`\r\n- Node Version: `v16.17.0`\r\n- Nuxt Version: `3.2.3`\r\n- Nitro Version: `2.2.3`\r\n- Package Manager: `yarn@1.22.19`\r\n- Builder: `vite`\r\n- User Config: `modules`\r\n- Runtime Modules: `@nuxt/ui@0.3.3`\r\n- Build Modules: `-`\r\n\r\n(Running on codesandbox.io)\r\n\r\n### Reproduction\r\n\r\nhttps://codesandbox.io/p/sandbox/optimistic-nash-2qbr3n?file=%2Fapp.vue\r\n\r\n### Describe the bug\r\n\r\nUsing a computed value in the template which accesses data from a `useFetch` (without top-level await) leads to a hydration mismatch error.\r\n\r\n\r\n\r\n### Additional context\r\n\r\nIt seems like this only happens if the computed value is also accessed somewhere else in the `\u003Cscript setup>` tag. Otherwise this does not seem to happen. Commenting out the dummy variable access in the above MWE therefore somehow prevents the hydration error.\r\n\r\n### Logs\r\n\r\n```shell-script\r\n[Vue warn]: Hydration text mismatch:\r\n...\r\nHydration completed but contains mismatches.\r\n```\r\n",[3231,3234],{"name":3232,"color":3233},"documentation","5319e7",{"name":3189,"color":3190},19622,"\"Hydration text mismatch\" when using `useFetch` and `computed`","2024-10-21T22:16:49Z","https://github.com/nuxt/nuxt/issues/19622",0.6228571,{"description":3241,"labels":3242,"number":3245,"owner":3179,"repository":3179,"state":3180,"title":3246,"updated_at":3247,"url":3248,"score":3249},"### Environment\r\n\r\nAny\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-iuwbtr?file=package.json,components%2FHydrationMismatch.vue,app.vue\r\n\r\n### Describe the bug\r\n\r\nThis may be an upstream issue with Vue (almost 100% certain) but I would like to know your opinion on a workaround or possible fix: \r\n\r\n - The issue consists in not displaying \"Hydration completed but contains mismatches\" (in DEV and PRD envs) when we use an Async Component with a Mismatch. This is a severe issue for websites that serve milions of pages and have a mismatch but it is silent to our logs/obervability tooling.\r\n \r\n After some investigation it seems that when we use an Async Component the hydration is somewhat defered and at the moment of showing the `console.error(\"Hydration completed but contains mismatches\")` the code that hydrates (or checks for possible mismatches) the mismatch component did not run yet.\r\n \r\n After some debugging: \r\n \r\n\r\n\r\nWe see the hydrate function being called with the `nuxt-root` component in the first breakpoint. After that:\r\n\r\n\r\n\r\nThe `hasMismatch` flag continues to be `false`. I did put one more breakpoint at the `handleMismatch` function that is only called after already already running the `hydrate` function that has the `console.error()`:\r\n\r\n\r\n\r\nThis function was called with the vnode where I have the mismatch but it's already to late for the `console.error()` because it already ran with the `hasMismatch` being false.\r\n\r\nAny more information just ask, I will be happy to provide!\r\n\r\nAbout the reproduction, you can comment and uncomment the import statements in `app.vue` and see the different behaviours :)\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3243,3244],{"name":3189,"color":3190},{"name":3173,"color":3174},23590,"Nuxt 3 - Hydration mismatch error is not shown if the mismatch is caused by an Async Component","2024-07-16T18:19:51Z","https://github.com/nuxt/nuxt/issues/23590",0.62321156,{"labels":3251,"number":3254,"owner":3179,"repository":3179,"state":3180,"title":3255,"updated_at":3256,"url":3257,"score":3258},[3252,3253],{"name":3189,"color":3190},{"name":3173,"color":3174},13593,"Hydration completed but contains mismatches","2023-01-19T17:00:21Z","https://github.com/nuxt/nuxt/issues/13593",0.62341034,{"description":3260,"labels":3261,"number":3264,"owner":3179,"repository":3179,"state":3180,"title":3203,"updated_at":3265,"url":3266,"score":3267},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.10.3\r\n- CLI Version: 3.10.1\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools, modules\r\n- Runtime Modules: nuxt-icon@0.6.8\r\n- Build Modules: -\n\n### Reproduction\n\nReproduction : https://stackblitz.com/edit/draftman-nuxt-reproduction-1?file=app.vue\n\n### Describe the bug\n\nSince migrating from nuxt2 to nuxt3, I've noticed a number of hydration problems, particularly with nuxt/content rendering, but as I haven't managed to make a minimal reproduction, here's an example based on the teleport example of the doc.\r\nIt happen when we target a dedicted div (from a ID selection).\n\n### Additional context\n\nCode preview :\r\n\r\n\r\nConsole :\r\n\n\n### Logs\n\n```shell-script\n[Vue warn]: Hydration children mismatch on \u003Cdiv id=\"teleport\">…\u003C/div> \r\nServer rendered element contains fewer child nodes than client vdom. \r\n at \u003CApp key=3 > \r\n at \u003CNuxtRoot>\n```\n",[3262,3263],{"name":3189,"color":3190},{"name":3173,"color":3174},25940,"2024-02-24T23:46:06Z","https://github.com/nuxt/nuxt/issues/25940",0.6235989,{"description":3269,"labels":3270,"number":3281,"owner":3179,"repository":3179,"state":3180,"title":3282,"updated_at":3283,"url":3284,"score":3285},"### Environment\n\n------------------------------\n- Operating System: Linux\n- Node Version: v18.20.3\n- Nuxt Version: 3.16.1\n- CLI Version: 3.23.1\n- Nitro Version: 2.11.7\n- Package Manager: npm@10.2.3\n- Builder: -\n- User Config: compatibilityDate, devtools, extends\n- Runtime Modules: -\n- Build Modules: -\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-7pvynjrd?file=layer%2Fnuxt.config.ts\n\n### Describe the bug\n\nAfter updating to Nuxt 3.16, a hydration mismatch occurs when extending a base project (`base`) in another project (`layer`).\n\nThe setup consists of:\n\n- `base`: Contains common components like `\u003CHeader />` and `\u003CFooter />`.\n- `layer`: Extends `base `and provides the slot content in `pages/index.vue`.\n\nThe expected behavior is that the server correctly renders the full page, including the header, footer (from `base`), and the page content (from `layer`). However, since Nuxt 3.16, the server does not provide the expected HTML, causing a hydration mismatch on the client side.\n\n### Additional context\n\nhttps://github.com/user-attachments/assets/474edce2-da73-459c-a32a-b31328eede14\n\n### Logs\n\n```shell-script\n\n```",[3271,3272,3275,3278],{"name":3211,"color":3212},{"name":3273,"color":3274},"❗ p4-important","D93F0B",{"name":3276,"color":3277},"layers","006B75",{"name":3279,"color":3280},"possible regression","B90A42",31470,"Hydration mismatch when using Nuxt Layers","2025-04-23T13:01:19Z","https://github.com/nuxt/nuxt/issues/31470",0.6238898,{"description":3287,"labels":3288,"number":3289,"owner":3179,"repository":3179,"state":3180,"title":3290,"updated_at":3291,"url":3292,"score":3293},"### Environment\n\n- Operating System: `Linux`\r\n- Node Version: `v16.9.0`\r\n- Nuxt Version: `3-3.0.0-27235989.d52b1e8`\r\n- Package Manager: `Yarn`\r\n- Bundler: `Webpack`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\n\n### Describe the bug\n\nI was eager to try out the nuxt 3 beta. And simply followed the installation instructions from https://v3.nuxtjs.org/getting-started/installation . But on running `yarn dev -o` or `yarn dev` I get a console error saying 'Hydration completed but contains mismatches.' Not sure if I'm missing something. I've just started with nuxt\n\n### Reproduction\n\nJust following the installation steps should reproduce it: \r\n\r\n`npx nuxi init nuxt3-app`\r\n\r\n`code -r nuxt3-app`\r\n\r\n`yarn install`\r\n\r\n`yarn dev -o`\n\n### Additional context\n\nThe error was generated via @vue/runtime-core:\r\n\r\n```\r\nfunction createHydrationFunctions(rendererInternals) {\r\n ....\r\n if (hasMismatch && !false) {\r\n // this error should show up in production\r\n console.error(`Hydration completed but contains mismatches.`);\r\n }\r\n}\r\n```\n\n### Logs\n\n_No response_",[],12078,"Hydration mismatch error","2023-01-19T15:54:17Z","https://github.com/nuxt/nuxt/issues/12078",0.624113,["Reactive",3295],{},["Set"],["ShallowReactive",3298],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fcc6L5odr9GEmtdov8Xqu-ZKHdepRu8aTEqnr7BFyEiI":-1},"/nuxt/nuxt/14083"]