` 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```",[1984,1987],{"name":1985,"color":1986},"pending triage","E99695",{"name":1988,"color":1989},"possible regression","B90A42",31470,"nuxt","open","Hydratation mismatch when using Nuxt Layers","2025-03-21T18:22:56Z","https://github.com/nuxt/nuxt/issues/31470",0.6231406,{"description":1998,"labels":1999,"number":2004,"owner":1991,"repository":1991,"state":2005,"title":2006,"updated_at":2007,"url":2008,"score":2009},"### Environment\n\nNuxi 3.5.2\r\nNuxt project info:\r\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v16.20.0\r\n- Nuxt Version: 3.5.2\r\n- Nitro Version: 2.4.1\r\n- Package Manager: npm@9.6.7\r\n- Builder: vite\r\n- User Config: modules\r\n- Runtime Modules: @nuxtjs/tailwindcss@6.7.0, @vueuse/nuxt@10.1.2\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nhttps://github.com/Archetipo95/nuxt-error-layout\n\n### Describe the bug\n\nI encountered a bug while customizing the error page in the Nuxt framework. The issue results in a hydration mismatch error and component duplication. I have created a minimal reproduction, where accessing a non-existent page triggers a warning in the console (/asd).\r\n\r\nPlease let me know if you need additional information. I appreciate your prompt attention to this matter.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2000,2003],{"name":2001,"color":2002},"3.x","29bc7f",{"name":1985,"color":1986},21385,"closed","Hydration mismatch in error page with NuxtLayout (component duplication)","2023-07-23T11:56:03Z","https://github.com/nuxt/nuxt/issues/21385",0.6089151,{"labels":2011,"number":2014,"owner":1991,"repository":1991,"state":2005,"title":2015,"updated_at":2016,"url":2017,"score":2018},[2012,2013],{"name":2001,"color":2002},{"name":1985,"color":1986},13593,"Hydration completed but contains mismatches","2023-01-19T17:00:21Z","https://github.com/nuxt/nuxt/issues/13593",0.6130458,{"description":2020,"labels":2021,"number":2024,"owner":1991,"repository":1991,"state":2005,"title":2025,"updated_at":2026,"url":2027,"score":2028},"### Environment\r\n\r\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: extends, modules, hooks\r\n- Runtime Modules: @nuxt/content@2.12.0, @nuxt/ui@2.14.1\r\n- Build Modules: -\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/draftman-nuxt-reproduction-2\r\n\r\n### Describe the bug\r\n\r\nSince migrating from nuxt2 to nuxt3, I've noticed multiple hydration problems, particularly with nuxt/content rendering.\r\nIn this case, it happen when a wrapper is added around ProseImg component.\r\n\r\n### Additional context\r\n\r\nSSR :\r\n\r\n\r\nAfter hydration :\r\n\r\n\r\n### Logs\r\n\r\n```shell-script\r\n[Vue warn]: Hydration node mismatch:\r\n- rendered on server: \u003Cimg src=\"https://i.imgur.com/xyywXJ1.png\" alt=\"Test\" data-v-inspector=\"components/content/ProseImg.vue:3:5\">\r\n- expected on client: Symbol(v-cmt) \r\n at \u003CCallout icon=\"i-heroicons-light-bulb\" > \r\n at \u003CAsyncComponentWrapper icon=\"i-heroicons-light-bulb\" > \r\n at \u003CMDCRenderer body= Object data= Object tag=\"div\" ... > \r\n at \u003CContentRendererMarkdown value= Object excerpt=false tag=\"div\" > \r\n at \u003CContentRenderer value= Object excerpt=false tag=\"div\" > \r\n at \u003CContentQuery path=\"/\" find=\"one\" > \r\n at \u003CContentDoc> \r\n at \u003C[...slug] onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \r\n at \u003CAnonymous key=\"/\" vnode= Object route= Object ... > \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CNuxtLayoutProvider layoutProps= Object key=\"default\" name=\"default\" ... > \r\n at \u003CNuxtLayout> \r\n at \u003CApp key=3 > \r\n at \u003CNuxtRoot>\r\n```\r\n",[2022,2023],{"name":2001,"color":2002},{"name":1985,"color":1986},25963,"Hydration issue","2024-02-26T17:48:58Z","https://github.com/nuxt/nuxt/issues/25963",0.61700374,{"description":2030,"labels":2031,"number":2036,"owner":1991,"repository":1991,"state":2005,"title":2037,"updated_at":2038,"url":2039,"score":2040},"### Environment\n\nLocal:\n------------------------------\n- Operating System: Darwin\n- Node Version: v20.9.0\n- Nuxt Version: 3.13.2\n- CLI Version: 3.14.0\n- Nitro Version: 2.9.7\n- Package Manager: npm@10.1.0\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n------------------------------\n\nStackblitz (reproduction link):\n------------------------------\n- Operating System: Linux\n- Node Version: v18.20.3\n- Nuxt Version: 3.13.2\n- CLI Version: 3.15.0\n- Nitro Version: 2.9.7\n- Package Manager: npm@10.2.3\n- Builder: -\n- User Config: default\n- Runtime Modules: -\n- Build Modules: -\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-ixfwit\n\nReproduction steps:\n\nRun the project\nSee that there is no hydration mismatch issues on load (and reload if you wish).\nTrigger a HMR update, by updating the script tag in MyComponent.vue (my go to is suffixing an 'a' to the console.log statement) and see the hydration mismatch warning, the `Hydration completed but contains mismatches`-error and notice that 'My component' is no longer visible.\n\nAlso notice you can trigger a HMR update in the `MyKeepAliveContainer.vue` component without getting the warning.\n\n### Describe the bug\n\nGetting a hydration error, when hot module reload reloads a component inside a component containing a slot in a \u003CKeepAlive> tag.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```\n[Vue warn]: Hydration attribute mismatch on \n \n - rendered on server: id=\"v-0\"\n - expected on client: id=\"v-1\"\n Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.\n You should fix the source of the mismatch. \n at \u003CMyComponent> \n at \u003CKeepAlive> \n at \u003CMyKeepAliveContainer> \n at \u003CApp key=4 > \n at \u003CNuxtRoot>\nwarn$1\t@\truntime-core.esm-bun…er.js?v=2c4df531:50\npropHasMismatch\t@\truntime-core.esm-bun….js?v=2c4df531:2170\nhydrateElement\t@\truntime-core.esm-bun….js?v=2c4df531:1906\nhydrateNode\t@\truntime-core.esm-bun….js?v=2c4df531:1747\nhydrateSubTree\t@\truntime-core.esm-bun….js?v=2c4df531:5279\ncomponentUpdateFn\t@\truntime-core.esm-bun….js?v=2c4df531:5297\nrun\t@\treactivity.esm-bundler.js?v=2c4df531:195\nsetupRenderEffect\t@\truntime-core.esm-bun….js?v=2c4df531:5441\nmountComponent\t@\truntime-core.esm-bun….js?v=2c4df531:5216\nprocessComponent\t@\truntime-core.esm-bun….js?v=2c4df531:5169\npatch\t@\truntime-core.esm-bun….js?v=2c4df531:4685\ncomponentUpdateFn\t@\truntime-core.esm-bun….js?v=2c4df531:5393\nrun\t@\treactivity.esm-bundler.js?v=2c4df531:195\n(anonymous)\t@\truntime-core.esm-bun…r.js?v=2c4df531:525\ncallWithErrorHandling\t@\truntime-core.esm-bun…r.js?v=2c4df531:197\nflushJobs\t@\truntime-core.esm-bun…r.js?v=2c4df531:405\nPromise.then\t\t\nqueueFlush\t@\truntime-core.esm-bun…r.js?v=2c4df531:319\nqueueJob\t@\truntime-core.esm-bun…r.js?v=2c4df531:314\nreload\t@\truntime-core.esm-bun…r.js?v=2c4df531:523\n(anonymous)\t@\truntime-core.esm-bun…r.js?v=2c4df531:557\n(anonymous)\t@\tMyComponent.vue?t=1729691325127:28\n(anonymous)\t@\tclient:34\n(anonymous)\t@\tclient:218\n(anonymous)\t@\tclient:193\nqueueUpdate\t@\tclient:193\nawait in queueUpdate\t\t\n(anonymous)\t@\tclient:638\nhandleMessage\t@\tclient:636\n(anonymous)\t@\tclient:546\ndispatchEvent\t@\t.localservice@runtime.34c588ed.js:26\n_handleMessage\t@\t.localservice@runtime.34c588ed.js:26\n_0x578779\t@\t.localservice@runtime.34c588ed.js:26\nShow less\n\n.localservice@runtime.34c588ed.js:26 Hydration completed but contains mismatches.\nconsole.error\t@\t.localservice@runtime.34c588ed.js:26\nlogMismatchError\t@\truntime-core.esm-bun….js?v=2c4df531:1604\nhydrateElement\t@\truntime-core.esm-bun….js?v=2c4df531:1907\nhydrateNode\t@\truntime-core.esm-bun….js?v=2c4df531:1747\nhydrateSubTree\t@\truntime-core.esm-bun….js?v=2c4df531:5279\ncomponentUpdateFn\t@\truntime-core.esm-bun….js?v=2c4df531:5297\nrun\t@\treactivity.esm-bundler.js?v=2c4df531:195\nsetupRenderEffect\t@\truntime-core.esm-bun….js?v=2c4df531:5441\nmountComponent\t@\truntime-core.esm-bun….js?v=2c4df531:5216\nprocessComponent\t@\truntime-core.esm-bun….js?v=2c4df531:5169\npatch\t@\truntime-core.esm-bun….js?v=2c4df531:4685\ncomponentUpdateFn\t@\truntime-core.esm-bun….js?v=2c4df531:5393\nrun\t@\treactivity.esm-bundler.js?v=2c4df531:195\n(anonymous)\t@\truntime-core.esm-bun…r.js?v=2c4df531:525\ncallWithErrorHandling\t@\truntime-core.esm-bun…r.js?v=2c4df531:197\nflushJobs\t@\truntime-core.esm-bun…r.js?v=2c4df531:405\nPromise.then\t\t\nqueueFlush\t@\truntime-core.esm-bun…r.js?v=2c4df531:319\nqueueJob\t@\truntime-core.esm-bun…r.js?v=2c4df531:314\nreload\t@\truntime-core.esm-bun…r.js?v=2c4df531:523\n(anonymous)\t@\truntime-core.esm-bun…r.js?v=2c4df531:557\n(anonymous)\t@\tMyComponent.vue?t=1729691325127:28\n(anonymous)\t@\tclient:34\n(anonymous)\t@\tclient:218\n(anonymous)\t@\tclient:193\nqueueUpdate\t@\tclient:193\nawait in queueUpdate\t\t\n(anonymous)\t@\tclient:638\nhandleMessage\t@\tclient:636\n(anonymous)\t@\tclient:546\ndispatchEvent\t@\t.localservice@runtime.34c588ed.js:26\n_handleMessage\t@\t.localservice@runtime.34c588ed.js:26\n_0x578779\t@\t.localservice@runtime.34c588ed.js:26\n```",[2032,2033],{"name":1985,"color":1986},{"name":2034,"color":2035},"upstream","E8A36D",29656,"Hydration errors on useId inside KeepAlive","2024-10-25T09:23:46Z","https://github.com/nuxt/nuxt/issues/29656",0.617331,{"description":2042,"labels":2043,"number":2046,"owner":1991,"repository":1991,"state":2005,"title":2025,"updated_at":2047,"url":2048,"score":2049},"### 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",[2044,2045],{"name":2001,"color":2002},{"name":1985,"color":1986},25940,"2024-02-24T23:46:06Z","https://github.com/nuxt/nuxt/issues/25940",0.6177834,{"labels":2051,"number":2059,"owner":1991,"repository":1991,"state":2005,"title":2060,"updated_at":2061,"url":2062,"score":2063},[2052,2053,2056],{"name":2001,"color":2002},{"name":2054,"color":2055},"bug","d73a4a",{"name":2057,"color":2058},"needs reproduction","FBCA04",11976,"Hydration mismatch error","2024-11-13T15:36:55Z","https://github.com/nuxt/nuxt/issues/11976",0.6185292,{"description":2065,"labels":2066,"number":2073,"owner":1991,"repository":1991,"state":2005,"title":2074,"updated_at":2075,"url":2076,"score":2077},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.11.1\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.4\r\n- Package Manager: npm@10.2.3\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-v2dhfq\n\n### Describe the bug\n\nSince Nuxt version 3.10 server components cause an hydration mismatch and don't render when used inside resolved components.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n[Vue warn]: Hydration node mismatch:\r\n- rendered on server: \u003C!--[--> (start of fragment) \r\n- expected on client: div \r\n at \u003CNuxtIsland name=\"Icon\" lazy=false props= Proxy(Object) ... > \r\n at \u003CIcon> \r\n at \u003CContainer.global> \r\n at \u003CAsyncComponentWrapper> \r\n at \u003CApp key=3 > \r\n at \u003CNuxtRoot>\n```\n",[2067,2068,2070],{"name":2001,"color":2002},{"name":2069,"color":2058},"🔨 p3-minor",{"name":2071,"color":2072},"server components","839413",26434,"Server components cause hydration error when used inside resolved component","2024-03-26T14:03:01Z","https://github.com/nuxt/nuxt/issues/26434",0.6199057,{"description":2079,"labels":2080,"number":2086,"owner":1991,"repository":1991,"state":2005,"title":2087,"updated_at":2088,"url":2089,"score":2090},"### Environment\r\n\r\n- Operating System: `Windows_NT`\r\n- Node Version: `v16.19.0`\r\n- Nuxt Version: `3.1.2`\r\n- Nitro Version: `2.1.1`\r\n- Package Manager: `yarn@3.4.1`\r\n- Builder: `vite`\r\n- User Config: `modules`\r\n- Runtime Modules: `nuxt-icon@0.2.10`\r\n- Build Modules: `-`\r\n\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-dgdjfn-hhmxav?file=pages%2Findex%2Fposts.vue,nuxt.config.ts,pages%2Findex.vue\r\n\r\n### Describe the bug\r\n- After upgrade to 3.1.2 from 3.0.0, any content change makes `hydration mismatch` error.\r\n\r\n### pages/index\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n aaa\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\n\u003C/script>\r\n\r\n\u003Cstyle scoped>\r\n\u003C/style>\r\n```\r\n\r\n### Reproduction\r\n- Start nuxt\r\n- Open page `http://localhost:3000`\r\n- Change template content (e.g. \"aaa\" to \"bbb\")\r\n - (Any change of content makes Hydration node mismatch error)\r\n- Refresh page `http://localhost:3000`\r\n- See console.\r\n\r\n### Additional context\r\n\r\n\r\n\r\n\r\n### Logs\r\n\r\n_No response_",[2081,2082,2083],{"name":2001,"color":2002},{"name":1985,"color":1986},{"name":2084,"color":2085},"windows","C681FD",18764,"Any change of content makes hydration node/text content mismatch","2023-02-21T07:37:04Z","https://github.com/nuxt/nuxt/issues/18764",0.62099624,{"description":2092,"labels":2093,"number":2099,"owner":1991,"repository":1991,"state":2005,"title":2100,"updated_at":2101,"url":2102,"score":2103},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v20.11.0\r\n- Nuxt Version: 3.12.4\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.7\r\n- Package Manager: yarn@1.22.21\r\n- Builder: -\r\n- User Config: modulesDir, build, modules, eslint, tailwindcss, vite, css, i18n, compatibilityDate\r\n- Runtime Modules: @pinia/nuxt@0.5.1, vue3-swatches/nuxt, floating-vue/nuxt, @nuxtjs/i18n@8.3.1, @nuxtjs/tailwindcss@6.12.1, @nuxt/eslint@0.4.0\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-muuvjp?file=app.vue\r\n\r\n### Describe the bug\r\n\r\nA hydration mismatch occurs inside a TransitionGroup when there is an element with v-if. This issue only happens if a tag is set on the TransitionGroup. Replacing v-if with v-show resolves the error.\r\n````\r\n[Vue warn]: Hydration children mismatch on \u003Cdiv>…\u003C/div> \r\nServer rendered element contains more child nodes than client vdom. \r\n at \u003CTransitionGroup tag=\"div\" > \r\n````\r\n\r\nAdditionally, if there is a comment inside the TransitionGroup, a similar error occurs. Removing the tag resolves the hydration mismatch caused by the comment. However, after removing the tag and switching v-if to v-show, the error reappears.\r\n````\r\nruntime-core.esm-bundler.js?v=5dd078cf:50 [Vue warn]: Hydration node mismatch:\r\n- rendered on server: \u003C!-- test --> \r\n- expected on client: div \r\n at \u003CTransitionGroup> \r\n````\r\n\r\nI have provided both cases in the reproduction.\r\n\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[2094,2095,2096],{"name":2054,"color":2055},{"name":2034,"color":2035},{"name":2097,"color":2098},"upstream-bug","B60205",28381,"TransitionGroup hydration mismatch","2024-09-19T11:24:39Z","https://github.com/nuxt/nuxt/issues/28381",0.62117106,["Reactive",2105],{},["Set"],["ShallowReactive",2108],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"cc6L5odr9GEmtdov8Xqu-ZKHdepRu8aTEqnr7BFyEiI":-1},"/nuxt/nuxt/14083"]