` 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.6304155,{"description":1998,"labels":1999,"number":2004,"owner":1991,"repository":1991,"state":1992,"title":2005,"updated_at":2006,"url":2007,"score":2008},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v20.12.2`\r\n- Nuxt Version: `3.12.3`\r\n- CLI Version: `3.12.0`\r\n- Nitro Version: `2.9.7`\r\n- Package Manager: `bun@1.1.13`\r\n- Builder: `-`\r\n- User Config: `devtools`, `modules`, `compatibilityDate`, `i18n`, `experimental`\r\n- Runtime Modules: `@nuxtjs/i18n@8.3.1`\r\n- Build Modules: `-`\r\n\n\n### Reproduction\n\nhttps://github.com/Rigo-m/nuxt-link-hydration-mismatch\n\n### Describe the bug\n\nThere's an hydration error due to the nuxt-active-class being applied client side and not server side, but also there are some failed teleports in console in the nuxtlink inside a component marked with nuxt-client.\r\nThis leads also to the links being treated as normal html anchors\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2000,2001],{"name":1985,"color":1986},{"name":2002,"color":2003},"server components","839413",28004,"[Server components] Hydration mismatch and failed teleport with nuxt-client and nuxtlink","2024-07-09T06:02:45Z","https://github.com/nuxt/nuxt/issues/28004",0.6345944,{"description":2010,"labels":2011,"number":2019,"owner":1991,"repository":1991,"state":2020,"title":2021,"updated_at":2022,"url":2023,"score":2024},"### 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",[2012,2015,2018],{"name":2013,"color":2014},"3.x","29bc7f",{"name":2016,"color":2017},"🔨 p3-minor","FBCA04",{"name":2002,"color":2003},26434,"closed","Server components cause hydration error when used inside resolved component","2024-03-26T14:03:01Z","https://github.com/nuxt/nuxt/issues/26434",0.6033382,{"description":2026,"labels":2027,"number":2029,"owner":1991,"repository":1991,"state":2020,"title":2030,"updated_at":2031,"url":2032,"score":2033},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.20.4\r\n- Nuxt Version: 3.13.0\r\n- CLI Version: 3.13.1\r\n- Nitro Version: 2.9.7\r\n- Package Manager: npm@10.7.0\r\n- Builder: -\r\n- User Config: site, vite, experimental, css, extends, modules, appConfig, gtag, routeRules, nitro, htmlValidator, delayHydration, colorMode, sitemap, image, components, devtools\r\n- Runtime Modules: @nuxt/ui@2.18.4, @nuxt/image@1.7.1, @pinia/nuxt@0.5.4, nuxt-delay-hydration@1.3.6, @nuxtjs/sitemap@5.3.5, nuxt-gtag@2.1.0\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nN/A\r\n\r\n### Describe the bug\r\n\r\nafter upgrading from 3.12.2 to 3.13.0 i am getting these hydration errors on all my images.\r\nWhen I check the build HTML/code it is missing a lot of attributes that it wasn't before the update.\r\n\r\nThis is the console log error:\r\n\r\n`runtime-core.esm-bundler.js?v=de2f8f45:50 [Vue warn]: Hydration attribute mismatch on \u003Cimg onerror=\"this.setAttribute('data-error', 1)\" class=\"rounded-md opacity-80 drop-shadow-md group-hover:opacity-100\" src=\"/_ipx/s_350x197/assets/img/video-cpanel-install.jpg\" data-v-inspector=\"node_modules/@nuxt/image/dist/runtime/components/NuxtImg.vue:2:3\"> \r\n - rendered on server: (not rendered)\r\n - expected on client: width=\"350\"\r\n Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.\r\n You should fix the source of the mismatch. \r\n at \u003CNuxtImg src=\"/assets/img/video-cpanel-install.jpg\" loading=\"lazy\" class=\"rounded-md opacity-80 drop-shadow-md group-hover:opacity-100\" ... > `\r\n\r\n\r\n## This is what the raw code is I have:\r\n\r\n`\u003CNuxtImg src=\"/assets/img/video-cpanel-install.jpg\" loading=\"lazy\" class=\"rounded-md opacity-80 drop-shadow-md group-hover:opacity-100\" width=\"350\" height=\"197\" :alt=\"brand + ' cPanel install video screenshot'\" />`\r\n\r\n## This is what is output on a static generation:\r\n\r\n`\u003Cimg onerror=\"this.setAttribute('data-error', 1)\" class=\"rounded-md opacity-80 drop-shadow-md group-hover:opacity-100\" src=\"[/_ipx/s_350x197/assets/img/video-cpanel-install.jpg](http://new-pre.ssltrust.rack/_ipx/s_350x197/assets/img/video-cpanel-install.jpg)\">`\r\n\r\n## This is what is in the HTML code after the render:\r\n`\u003Cimg width=\"350\" height=\"197\" alt=\"GeoTrust cPanel install video screenshot\" loading=\"lazy\" data-nuxt-img=\"\" srcset=\"/_ipx/s_350x197/assets/img/video-cpanel-install.jpg 1x, /_ipx/s_700x394/assets/img/video-cpanel-install.jpg 2x\" class=\"rounded-md opacity-80 drop-shadow-md group-hover:opacity-100\" src=\"/_ipx/s_350x197/assets/img/video-cpanel-install.jpg\">`",[2028],{"name":1985,"color":1986},28751,"Hydration attribute mismatch on images after upgrade to 3.13.0 from 3.12.2","2024-10-24T12:37:02Z","https://github.com/nuxt/nuxt/issues/28751",0.60975194,{"description":2035,"labels":2036,"number":2039,"owner":1991,"repository":1991,"state":2020,"title":2040,"updated_at":2041,"url":2042,"score":2043},"### 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_",[2037,2038],{"name":2013,"color":2014},{"name":1985,"color":1986},21385,"Hydration mismatch in error page with NuxtLayout (component duplication)","2023-07-23T11:56:03Z","https://github.com/nuxt/nuxt/issues/21385",0.61053693,{"description":2045,"labels":2046,"number":2051,"owner":1991,"repository":1991,"state":2020,"title":2052,"updated_at":2053,"url":2054,"score":2055},"### Environment\n\n- Operating System: `Linux`\n- Node Version: `v22.11.0`\n- Nuxt Version: `3.16.0`\n- CLI Version: `3.23.0`\n- Nitro Version: `2.11.6`\n- Package Manager: `npm@11.0.0`\n- Builder: `-`\n- User Config: `vite`, `delayHydration`, `seo`, `site`, `sitemap`, `robots`, `schemaOrg`, `image`, `experimental`, `build`, `compatibilityDate`, `devtools`, `nitro`, `routeRules`, `turnstile`, `runtimeConfig`, `modules`, `app`, `css`, `postcss`\n- Runtime Modules: `@bootstrap-vue-next/nuxt@0.28.0`, `vue3-carousel-nuxt@1.1.5`, `@nuxtjs/turnstile@0.9.15`, `@nuxtjs/seo@3.0.0-beta.3`, `@vueuse/nuxt@12.8.2`, `@nuxt/scripts@0.11.2`, `@nuxt/image@1.9.0`, `nuxt-delay-hydration@1.3.8`\n- Build Modules: `-`\n\n\n\n\n\n### Reproduction\n\nAfter upgrading Nuxt to v3.16 and used dependencies to latest versions:\n- when previewing build either with 'npx nuxi preview' or 'node .output/server/index.mjs' my app displays 404 page. WHen redirecting from 404 page to home, the app works as intended, but as soon as browser is refreshed it's 404 page again.\n\n There are no errors reported, except for some hydration mismatch\n\n### Describe the bug\n\n\n\n### Additional context\n\nI tried with removing all the modules but the error and bug persist. \n\n### Logs\n\n```shell-script\n\n- server logs the following:\n\nListening on http://[::]:3000\n[nitro-runtime] request: 0.538ms\n[nitro-runtime] site-config:init: 0.027ms\n[nitro-runtime] render:before: 0.021ms\n[Vue Router warn]: No match found for location with path \"/_nuxt/\"\n[Vue Router warn]: No match found for location with path \"/_nuxt/\"\n[nuxt-app] page:loading:start: 0.036ms\n[nuxt-app] app:created: 3.05ms\n[nuxt-app] vue:setup: 0.046ms\n[nuxt-app] app:rendered: 0.813ms\n[nitro-runtime] error: 0.714ms\n[nitro-runtime] request: 0.14ms\n[nitro-runtime] site-config:init: 0.066ms\n[nitro-runtime] render:before: 0.023ms\n\n```\n\nI have no idea what might be causing this behavior, since everything worked perfectly in v3.15.4.",[2047,2048,2050],{"name":1985,"color":1986},{"name":2049,"color":2017},"needs reproduction",{"name":1988,"color":1989},31355,"mismatching versions of `ohash` lead to hydration failures","2025-03-20T07:31:37Z","https://github.com/nuxt/nuxt/issues/31355",0.6270418,{"description":2057,"labels":2058,"number":2063,"owner":1991,"repository":1991,"state":2020,"title":2064,"updated_at":2065,"url":2066,"score":2067},"### 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```",[2059,2060],{"name":1985,"color":1986},{"name":2061,"color":2062},"upstream","E8A36D",29656,"Hydration errors on useId inside KeepAlive","2024-10-25T09:23:46Z","https://github.com/nuxt/nuxt/issues/29656",0.6321293,{"description":2069,"labels":2070,"number":2076,"owner":1991,"repository":1991,"state":2020,"title":2077,"updated_at":2078,"url":2079,"score":2080},"### 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_",[2071,2072,2073],{"name":2013,"color":2014},{"name":1985,"color":1986},{"name":2074,"color":2075},"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.6324781,{"description":2082,"labels":2083,"number":2086,"owner":1991,"repository":1991,"state":2020,"title":2087,"updated_at":2088,"url":2089,"score":2090},"### 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",[2084,2085],{"name":2013,"color":2014},{"name":1985,"color":1986},25963,"Hydration issue","2024-02-26T17:48:58Z","https://github.com/nuxt/nuxt/issues/25963",0.6334715,{"description":2092,"labels":2093,"number":2098,"owner":1991,"repository":1991,"state":2020,"title":2099,"updated_at":2100,"url":2101,"score":2102},"### Environment\n\n------------------------------\r\n- Operating System: `Windows_NT`\r\n- Node Version: `v19.2.0`\r\n- Nuxt Version: `3.1.0`\r\n- Nitro Version: `2.0.0`\r\n- Package Manager: `pnpm@7.25.1`\r\n- Builder: `vite`\r\n- User Config: `app`, `css`, `components`, `alias`, `modules`, `colorMode`\r\n- Runtime Modules: `@nuxtjs/color-mode@3.2.0`, `@pinia/nuxt@0.4.6`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\n[codesandbox](https://codesandbox.io/p/sandbox/adoring-dirac-pbw7ds?selection=%5B%7B%22endColumn%22%3A1%2C%22endLineNumber%22%3A6%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A6%7D%5D&file=%2Fpages%2Findex.vue)\n\n### Describe the bug\n\n```\r\n[Vue warn]: Hydration children mismatch in \u003Cdiv>: server rendered element contains fewer child nodes than client vdom. \r\n at \u003CSpin> \r\n at \u003CIndex onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \r\n at \u003CRouteProvider key=\"/\" routeProps= {Component: {…}, route: {…}} pageKey=\"/\" ... > \r\n at \u003CFragmentWrapper > \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CApp key=2 > \r\n at \u003CNuxtRoot>\r\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2094,2095],{"name":2013,"color":2014},{"name":2096,"color":2097},"❗ p4-important","D93F0B",18491,"Hydration node mismatch in 3.1.0","2023-01-25T19:46:40Z","https://github.com/nuxt/nuxt/issues/18491",0.63691854,["Reactive",2104],{},["Set"],["ShallowReactive",2107],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"St2-K8VHjhJ5he4OTzf_luvHWUOPAiueJjG4d3IvuvI":-1},"/nuxt/nuxt/30188"]