\n \u003C/UChip>\n\u003C/template>\n```\n\nEven though the component is a copy-paste off of [ui.nuxt.com](), it immediately causes hydration mismatches, which I experienced with pretty much every other NuxtUI component. It took me some time to figure out that the error disappeared once I changed the value of `selectiveClient` from `'deep'` to `true` in _nuxt.config.ts_ – basically disabling slots in client components, [as mentioned in the documentation](https://nuxt.com/docs/guide/directory-structure/components#client-components-within-server-components:~:text=This%20only%20works,once%20client%2Dside.).\n```ts\nexport default defineNuxtConfig({\n experimental: {\n componentIslands: {\n selectiveClient: 'deep', // Changing this to `true` prevents hydration mismatches.\n },\n },\n});\n```\n\n\u003Cbr />\n\nI decided to file this as a Nuxt issue instead of a NuxtUI issue since it's literally based on the experimental Nuxt config and may happen with components other than those from NuxtUI.",[2865],{"name":2866,"color":2867},"pending triage","E99695",32251,"nuxt","open","Hydration Mismatch in Non-server Components with `componentIslands.selectiveClient: 'deep'`","2025-05-31T17:00:10Z","https://github.com/nuxt/nuxt/issues/32251",0.6305499,{"description":2876,"labels":2877,"number":2882,"owner":2869,"repository":2869,"state":2883,"title":2884,"updated_at":2885,"url":2886,"score":2887},"### 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_",[2878,2881],{"name":2879,"color":2880},"3.x","29bc7f",{"name":2866,"color":2867},21385,"closed","Hydration mismatch in error page with NuxtLayout (component duplication)","2023-07-23T11:56:03Z","https://github.com/nuxt/nuxt/issues/21385",0.5993725,{"description":2889,"labels":2890,"number":2896,"owner":2869,"repository":2869,"state":2883,"title":2897,"updated_at":2898,"url":2899,"score":2900},"### Environment\r\n\r\n------------------------------\r\n- Operating System: `Linux`\r\n- Node Version: `v16.14.0`\r\n- Nuxt Version: `0.0.0`\r\n- Nitro Version: `-`\r\n- Package Manager: `unknown`\r\n- Builder: `webpack`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\r\n\r\n\r\n### Reproduction\r\n\r\nhttps://github.com/nuxt/framework\r\n\r\n### Describe the bug\r\n\r\nMy code:\r\n\r\n```\r\n\u003Ctemplate>\r\n\t\u003Cdiv v-if=\"!loading\">\r\n\t\t\u003Cdiv>\r\n\t\t\t\u003CNuxtPage :user=\"user\"/>\r\n\t\t\u003C/div>\r\n\t\u003C/div>\r\n\u003C/template>\r\n```\r\n\r\nError:\r\n\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_",[2891,2892,2893],{"name":2879,"color":2880},{"name":2866,"color":2867},{"name":2894,"color":2895},"needs reproduction","FBCA04",15458,"Hydration completed but contains mismatches.","2023-01-19T17:50:47Z","https://github.com/nuxt/nuxt/issues/15458",0.61512804,{"labels":2902,"number":2905,"owner":2869,"repository":2869,"state":2883,"title":2906,"updated_at":2907,"url":2908,"score":2909},[2903,2904],{"name":2879,"color":2880},{"name":2866,"color":2867},14083,"Shared state update causes hydration mismatch","2023-01-19T17:24:11Z","https://github.com/nuxt/nuxt/issues/14083",0.62002623,{"description":2911,"labels":2912,"number":2918,"owner":2869,"repository":2869,"state":2883,"title":2919,"updated_at":2920,"url":2921,"score":2922},"### 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.",[2913,2914,2915],{"name":2866,"color":2867},{"name":2894,"color":2895},{"name":2916,"color":2917},"possible regression","B90A42",31355,"mismatching versions of `ohash` lead to hydration failures","2025-03-20T07:31:37Z","https://github.com/nuxt/nuxt/issues/31355",0.6201055,{"description":2924,"labels":2925,"number":2931,"owner":2869,"repository":2869,"state":2883,"title":2932,"updated_at":2933,"url":2934,"score":2935},"### Environment\n\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.20.3\r\n- Nuxt Version: 3.12.2\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.6\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-qjtrhd-mtyvxv\n\n### Describe the bug\n\nWhen placing a server component in another server component, vue throw the following warning:\r\n\r\n```\r\nruntime-core.esm-bundler.js:48 [Vue warn]: Hydration node mismatch:\r\n- rendered on server: \u003C!--]--> \r\n- expected on client: Symbol(v-fgt) \r\n at \u003CNuxtIsland name=\"MyWrapper\" lazy=false props= Proxy(Object) {} ... > \r\n at \u003CMyWrapper> \r\n at \u003CApp key=4 > \r\n at \u003CNuxtRoot>\r\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2926,2927,2928],{"name":2879,"color":2880},{"name":2866,"color":2867},{"name":2929,"color":2930},"server components","839413",27731,"Hydration mismatch for nested server component","2024-06-20T13:58:28Z","https://github.com/nuxt/nuxt/issues/27731",0.6204332,{"description":2937,"labels":2938,"number":2944,"owner":2869,"repository":2869,"state":2883,"title":2945,"updated_at":2946,"url":2947,"score":2948},"### 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_",[2939,2940,2941],{"name":2879,"color":2880},{"name":2866,"color":2867},{"name":2942,"color":2943},"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.62240195,{"description":2950,"labels":2951,"number":2956,"owner":2869,"repository":2869,"state":2883,"title":2957,"updated_at":2958,"url":2959,"score":2960},"### 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",[2952,2953,2955],{"name":2879,"color":2880},{"name":2954,"color":2895},"🔨 p3-minor",{"name":2929,"color":2930},26434,"Server components cause hydration error when used inside resolved component","2024-03-26T14:03:01Z","https://github.com/nuxt/nuxt/issues/26434",0.6225482,{"description":2962,"labels":2963,"number":2966,"owner":2869,"repository":2869,"state":2883,"title":2967,"updated_at":2968,"url":2969,"score":2970},"### Environment\r\n\r\n````\r\n- Operating System: Linux\r\n- Node Version: v18.14.2\r\n- Nuxt Version: 3.7.1\r\n- CLI Version: 3.7.3\r\n- Nitro Version: 2.6.2\r\n- Package Manager: pnpm@8.6.12\r\n- Builder: -\r\n- User Config: devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n````\r\n\r\n### Reproduction\r\n\r\nhttps://github.com/martinszeltins/nuxt-mismatch\r\nor\r\nhttps://stackblitz.com/edit/nuxt-starter-ehmtcj?file=app.vue\r\n\r\n### Describe the bug\r\n\r\nI started a new Nuxt project, added 1 simple component and I am getting a hydration mismatch in the console. The error does not always appear on the initial load. But if you refresh the page a few times the mismatch error shows up. Sometimes with multiple refreshes it disappears. It is really strange.\r\n\r\n````\r\n[Vue warn]: Hydration children mismatch in \u003Cdiv>: server rendered element contains more child nodes than client vdom. \r\n at \u003CFormField> \r\n at \u003CApp key=3 > \r\n at \u003CNuxtRoot>\r\n````\r\n\r\nHere is my app.vue:\r\n\r\n```js\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CFormField>\r\n \u003Cinput type=\"text\" placeholder=\"Username\">\r\n \u003C/FormField>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\nAnd here is my FormField:\r\n```js\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Cdiv>\r\n \u003Cslot>\u003C/slot>\r\n \u003C/div>\r\n\r\n \u003Cdiv v-if=\"props?.errors?.length\">\u003C/div>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\n const props = defineProps\u003C{\r\n errors?: any[]\r\n }>()\r\n\u003C/script>\r\n\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_",[2964,2965],{"name":2879,"color":2880},{"name":2866,"color":2867},23056,"Nuxt 3.7 - Hydration children mismatch in \u003Cdiv>: server rendered element contains more child nodes than client vdom.","2023-09-08T19:14:21Z","https://github.com/nuxt/nuxt/issues/23056",0.62832546,{"description":2972,"labels":2973,"number":2975,"owner":2869,"repository":2869,"state":2883,"title":2976,"updated_at":2977,"url":2978,"score":2979},"### Environment\n\n- Operating System: Linux\n- Node Version: v18.20.3\n- Nuxt Version: 3.15.4\n- CLI Version: 3.22.4\n- Nitro Version: 2.11.0\n- Package Manager: npm@10.2.3\n- Builder: -\n- User Config: compatibilityDate, devtools\n- Runtime Modules: -\n- Build Modules: -\n\n### Reproduction\n\n[https://stackblitz.com/edit/github-gktrh3sr](https://stackblitz.com/edit/github-gktrh3sr)\n\nFirst navigate to /page2 to confirm the text is red and it contains the attribute `data-important=\"true\"`.\n\nThen navigate to /page1. It will immediately redirect to /page2 but the text will be black and the attribute will be missing. There will also be a warning in the console.\n\n### Describe the bug\n\nWhen loading a page, a global middleware redirects to other page but the top level element loses its attributes, causing a hydration mismatch.\n\nMay be related to #20187 and #25650.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n[Vue warn]: Hydration text content mismatch on \n\u003Ch1 data-v-inspector=\"pages/page1.vue:3:5\"> \n - rendered on server: Secret page\n - expected on client: Public Page \n at \u003CPage2 onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \n at \u003CAnonymous key=\"/page2\" vnode= Object { __v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, ref: {…}, scopeId: null, slotScopeIds: null, children: null, component: null, … } route= \n Object { fullPath: \"/page2\", hash: \"\", query: {}, name: \"page2\", path: \"/page2\", params: {}, matched: (1) […], meta: Proxy, redirectedFrom: {…}, href: \"/page2\" } ... > \n at \u003CRouterView name=undefined route=undefined > \n at \u003CNuxtPage > \n at \u003CNuxtLayoutProvider layoutProps= Object { ref: {…} } key=\"default\" name=\"default\" ... > \n at \u003CNuxtLayout > \n at \u003CApp key=4 > \n at \u003CNuxtRoot> runtime-core.esm-bundler.js:51:12\nHydration completed but contains mismatches. .localservice@runtime.495c5120.js:26:36955\n[Vue warn]: Hydration class mismatch on \n\u003Cdiv data-v-inspector=\"pages/page1.vue:2:3\"> \n - rendered on server: class=\"null\"\n - expected on client: class=\"text-red\"\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 \u003CPage2 onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \n at \u003CAnonymous key=\"/page2\" vnode= Object { __v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, ref: {…}, scopeId: null, slotScopeIds: null, children: null, component: null, … } route= \n Object { fullPath: \"/page2\", hash: \"\", query: {}, name: \"page2\", path: \"/page2\", params: {}, matched: (1) […], meta: Proxy, redirectedFrom: {…}, href: \"/page2\" } ... > \n at \u003CRouterView name=undefined route=undefined > \n at \u003CNuxtPage > \n at \u003CNuxtLayoutProvider layoutProps= Object { ref: {…} } key=\"default\" name=\"default\" ... > \n at \u003CNuxtLayout > \n at \u003CApp key=4 > \n at \u003CNuxtRoot>\n```",[2974],{"name":2866,"color":2867},31228,"Hydration mismatch when navigating with middleware","2025-03-12T22:56:19Z","https://github.com/nuxt/nuxt/issues/31228",0.6288767,["Reactive",2981],{},["Set"],["ShallowReactive",2984],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fZ0voh-k0b2lIH84eydudXCyWm1DykDSUuZ_4mIYLnvo":-1},"/nuxt/nuxt/31470"]