\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```",[3175,3178,3181,3184],{"name":3176,"color":3177},"bug","d73a4a",{"name":3179,"color":3180},"needs reproduction","CB47CF",{"name":3182,"color":3183},"triage","ffffff",{"name":3185,"color":3186},"v4","49DCB8",4846,"ui","Form: Hydration mismatch","2025-09-03T19:01:35Z","https://github.com/nuxt/ui/issues/4846",0.6194777,{"description":3194,"labels":3195,"number":3200,"owner":3144,"repository":3144,"state":3145,"title":3201,"updated_at":3202,"url":3203,"score":3204},"### 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",[3196,3199],{"name":3197,"color":3198},"documentation","5319e7",{"name":3154,"color":3155},19622,"\"Hydration text mismatch\" when using `useFetch` and `computed`","2024-10-21T22:16:49Z","https://github.com/nuxt/nuxt/issues/19622",0.6228571,{"description":3206,"labels":3207,"number":3210,"owner":3144,"repository":3144,"state":3145,"title":3211,"updated_at":3212,"url":3213,"score":3214},"### 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_",[3208,3209],{"name":3154,"color":3155},{"name":3138,"color":3139},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":3216,"number":3219,"owner":3144,"repository":3144,"state":3145,"title":3220,"updated_at":3221,"url":3222,"score":3223},[3217,3218],{"name":3154,"color":3155},{"name":3138,"color":3139},13593,"Hydration completed but contains mismatches","2023-01-19T17:00:21Z","https://github.com/nuxt/nuxt/issues/13593",0.62341034,{"description":3225,"labels":3226,"number":3229,"owner":3144,"repository":3144,"state":3145,"title":3168,"updated_at":3230,"url":3231,"score":3232},"### 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",[3227,3228],{"name":3154,"color":3155},{"name":3138,"color":3139},25940,"2024-02-24T23:46:06Z","https://github.com/nuxt/nuxt/issues/25940",0.6235989,{"description":3234,"labels":3235,"number":3246,"owner":3144,"repository":3144,"state":3145,"title":3247,"updated_at":3248,"url":3249,"score":3250},"### 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```",[3236,3237,3240,3243],{"name":3176,"color":3177},{"name":3238,"color":3239},"❗ p4-important","D93F0B",{"name":3241,"color":3242},"layers","006B75",{"name":3244,"color":3245},"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":3252,"labels":3253,"number":3254,"owner":3144,"repository":3144,"state":3145,"title":3255,"updated_at":3256,"url":3257,"score":3258},"### 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",3260],{},["Set"],["ShallowReactive",3263],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fcc6L5odr9GEmtdov8Xqu-ZKHdepRu8aTEqnr7BFyEiI":-1},"/nuxt/nuxt/14083"]