\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.",[3134],{"name":3135,"color":3136},"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.64355785,{"description":3145,"labels":3146,"number":3151,"owner":3138,"repository":3138,"state":3139,"title":3152,"updated_at":3153,"url":3154,"score":3155},"### 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_",[3147,3148],{"name":3135,"color":3136},{"name":3149,"color":3150},"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.6609908,{"description":3157,"labels":3158,"number":3165,"owner":3138,"repository":3138,"state":3166,"title":3167,"updated_at":3168,"url":3169,"score":3170},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v20.9.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.24.0\n- Nitro Version: 2.11.8\n- Package Manager: npm@10.1.0\n- Builder: -\n- User Config: compatibilityDate, devtools\n- Runtime Modules: -\n- Build Modules: -\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-7epzxrji?file=app.vue\n\n### Describe the bug\n\nWhen lazy hydration is applied to components that use slots, the slot content is not rendered\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3159,3162],{"name":3160,"color":3161},"bug","d73a4a",{"name":3163,"color":3164},"🔨 p3-minor","FBCA04",31633,"closed","Lazy hydration ignores slot content in components","2025-04-02T17:24:48Z","https://github.com/nuxt/nuxt/issues/31633",0.62527215,{"description":3172,"labels":3173,"number":3178,"owner":3138,"repository":3138,"state":3166,"title":3179,"updated_at":3180,"url":3181,"score":3182},"### 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",[3174,3177],{"name":3175,"color":3176},"3.x","29bc7f",{"name":3135,"color":3136},25963,"Hydration issue","2024-02-26T17:48:58Z","https://github.com/nuxt/nuxt/issues/25963",0.63603693,{"description":3184,"labels":3185,"number":3189,"owner":3138,"repository":3138,"state":3166,"title":3190,"updated_at":3191,"url":3192,"score":3193},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.18.0\r\n- Nuxt Version: 3.9.0\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: npm@9.4.2\r\n- Builder: -\r\n- User Config: devtools, experimental\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\n[StackBlitz](https://stackblitz.com/edit/nuxt-issues-25011)\r\n\r\n0. Enable `experimental.componentIslands` by setting it to `'local'`\r\n1. Create a `CtaButton.server.vue` component in `components`\r\n2. Render a `slot` in there:\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cbutton>\r\n \u003Cslot />\r\n \u003C/button>\r\n\u003C/template>\r\n```\r\n\r\n3. Render it in `app.vue`\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CCtaButton>Test\u003C/CtaButton>\r\n \u003C/div>\r\n\u003C/template>\r\n```\r\n\r\n4. See hydration error in the console\r\n\r\n### Describe the bug\r\n\r\nA hydration error occurs.\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3186,3187,3188],{"name":3175,"color":3176},{"name":3163,"color":3164},{"name":3149,"color":3150},25011,"Slot in server component causes hydration issues","2024-01-17T14:11:07Z","https://github.com/nuxt/nuxt/issues/25011",0.6365462,{"description":3195,"labels":3196,"number":3199,"owner":3138,"repository":3138,"state":3166,"title":3200,"updated_at":3201,"url":3202,"score":3203},"### 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_",[3197,3198],{"name":3175,"color":3176},{"name":3135,"color":3136},21385,"Hydration mismatch in error page with NuxtLayout (component duplication)","2023-07-23T11:56:03Z","https://github.com/nuxt/nuxt/issues/21385",0.6470075,{"description":3205,"labels":3206,"number":3214,"owner":3138,"repository":3215,"state":3166,"title":3216,"updated_at":3217,"url":3218,"score":3219},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v23.10.0`\n- Nuxt Version: `3.17.0`\n- CLI Version: `3.25.0`\n- Nitro Version: `2.11.10`\n- Package Manager: `pnpm@10.10.0`\n- Builder: `-`\n- User Config: `-`\n- Runtime Modules: `-`\n- Build Modules: `-`\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.0\n\n### Reproduction\n\nAny use of tabs slots\n\n### Description\n\nAfter upgrading all dependencies to the latest version and keeping NuxtUI v3.0.2 everything is ok but when in addition to other dependencies I also upgrade NuxtUI to the latest version v3.1.0 then TS errors appear as in the attached screen shot so I guess again a step backwards from the recent fixes with slots ;p\n\n\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3207,3208,3211],{"name":3160,"color":3161},{"name":3209,"color":3210},"duplicate","cfd3d7",{"name":3212,"color":3213},"v3","49DCB8",4005,"ui","Tab slots types error","2025-04-28T10:54:47Z","https://github.com/nuxt/ui/issues/4005",0.64936525,{"description":3221,"labels":3222,"number":3225,"owner":3138,"repository":3138,"state":3166,"title":3226,"updated_at":3227,"url":3228,"score":3229},"### Environment\n\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v18.15.0\r\n- Nuxt Version: 3.7.4\r\n- CLI Version: 3.9.0\r\n- Nitro Version: 2.6.3\r\n- Package Manager: bun@1.0.4\r\n- Builder: -\r\n- User Config: colorMode, devtools, experimental, typescript, modules, css, ui, runtimeConfig\r\n- Runtime Modules: @pinia/nuxt@0.4.11, @nuxt/ui@2.9.0, nuxt-security@0.14.4\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-dgvnv6-s4j4zq?file=pages%2Findex.vue\n\n### Describe the bug\n\nA simple use of `useFetch` and `v-if` inside the template is returning a Hydration node mismatch. \n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n[Vue warn]: Hydration node mismatch:\r\n- Client vnode: Symbol(\"v-cmt\") \r\n- Server rendered DOM: \r\n\u003Cdiv> \u003Cempty string> \r\n at \u003CIndex onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \r\n at \u003CRouteProvider key=\"/\" vnode= \r\nObject { __v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, ref: {…}, scopeId: null, slotScopeIds: null, children: null, component: null, … }\r\n route= \r\nObject { fullPath: \"/\", hash: \"\", query: {}, name: \"index\", path: \"/\", params: {}, matched: (1) […], meta: Proxy, redirectedFrom: undefined, href: \"/\" }\r\n ... > \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CApp key=3 > \r\n at \u003CNuxtRoot>\n```\n",[3223,3224],{"name":3175,"color":3176},{"name":3135,"color":3136},23572,"Hydration node mismatch","2023-10-08T14:43:58Z","https://github.com/nuxt/nuxt/issues/23572",0.65169346,{"description":3231,"labels":3232,"number":3234,"owner":3138,"repository":3138,"state":3166,"title":3235,"updated_at":3236,"url":3237,"score":3238},"### Environment\r\n\r\n- Operating System: Darwin\r\n- Node Version: v20.11.1\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: npm@10.8.2\r\n- Builder: -\r\n- User Config: compatibilityDate, devtools\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n\r\n### Reproduction\r\n\r\nI was able to reproduce this issue with a clean nuxt install, and I've put it in a public repository. You can find the hydration error in app.vue: https://github.com/joerosenthal/ul-ol-p-bug\r\n\r\n### Describe the bug\r\n\r\nIf I have a `\u003Cp>` with a `\u003Cul>` or `\u003Col>` inside it, I get hydration errors. The hydration errors end if I move the list outside of the paragraph block. \r\n\r\n### Additional context\r\n\r\nI've reproduced this bug with a clean nuxt install, but I was unable to reproduce this with just a clean vue install on its own. As far as I understand it, `\u003Cul>` and `\u003Col>` are able to be inside `\u003Cp>` as per HTML5, and I don't remember this being an issue with my production site in the past. This was also occurring on my production site, so I've just removed the surrounding `\u003Cp>`—easy enough fix once I had an idea of what the problem was, but that was a bear to track down on a relatively large codebase. Something like this wouldn't be my first guess as the source of a hydration issue.\r\n\r\nAlso, it's worth noting, this issue persisted in production after a nuxt generate on my website, so this isn't just an issue with nuxi dev. \r\n\r\n### Logs\r\n\r\n_No response_",[3233],{"name":3135,"color":3136},28325,"Hydration error if \u003Cul> or \u003Col> is within a \u003Cp> block ","2024-07-31T18:12:37Z","https://github.com/nuxt/nuxt/issues/28325",0.6533794,{"description":3240,"labels":3241,"number":3244,"owner":3138,"repository":3138,"state":3166,"title":3179,"updated_at":3245,"url":3246,"score":3247},"### 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",[3242,3243],{"name":3175,"color":3176},{"name":3135,"color":3136},25940,"2024-02-24T23:46:06Z","https://github.com/nuxt/nuxt/issues/25940",0.6540361,["Reactive",3249],{},["Set"],["ShallowReactive",3252],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f1GwCPNThmYAFXlYG5sAfNaBwlwQlbpGTzg25C0SoxTk":-1},"/nuxt/ui/4684"]