\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.",[3137],{"name":3138,"color":3139},"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.59382087,{"description":3148,"labels":3149,"number":3154,"owner":3141,"repository":3141,"state":3155,"title":3156,"updated_at":3157,"url":3158,"score":3159},"### 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_",[3150,3153],{"name":3151,"color":3152},"3.x","29bc7f",{"name":3138,"color":3139},23056,"closed","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.5600205,{"description":3161,"labels":3162,"number":3168,"owner":3141,"repository":3141,"state":3155,"title":3169,"updated_at":3170,"url":3171,"score":3172},"### Environment\n\n------------------------------\r\n- Operating System: `Darwin`\r\n- Node Version: `v16.14.2`\r\n- Nuxt Version: `3.0.0-rc.8`\r\n- Package Manager: `yarn@1.22.18`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-fpnxxl?file=app.vue,pages%2Findex.vue\n\n### Describe the bug\n\nAn hydratation warn appears when using an `input` of type `text` or `email` inside `index.vue` file. \n\n### Additional context\n\nIt does not occur if moving code in `app.vue` without `pages` folder.\r\n\r\nIt does not occur with type `date`.\n\n### Logs\n\n```shell\nvue.js?v=cd7cae4a:1268 [Vue warn]: Hydration children mismatch in \u003Cform>: server rendered element contains more child nodes than client vdom. \r\n at \u003CIndex onVnodeUnmounted=fn\u003ConVnodeUnmounted> ref=Ref\u003C undefined > > \r\n at \u003CAnonymous key=\"/\" routeProps= {Component: {…}, route: {…}} pageKey=\"/\" > \r\n at \u003CBaseTransition mode=\"out-in\" appear=false persisted=false ... > \r\n at \u003CTransition name=\"page\" mode=\"out-in\" > \r\n at \u003CRouterView name=undefined route=undefined > \r\n at \u003CNuxtPage> \r\n at \u003CApp key=1 > \r\n at \u003CNuxtRoot>\n```\n",[3163,3164,3165],{"name":3151,"color":3152},{"name":3138,"color":3139},{"name":3166,"color":3167},"needs reproduction","FBCA04",14734,"Hydration children mismatch with simple `input` of type `email`","2023-01-19T17:39:25Z","https://github.com/nuxt/nuxt/issues/14734",0.5857598,{"description":3174,"labels":3175,"number":3178,"owner":3141,"repository":3141,"state":3155,"title":3179,"updated_at":3180,"url":3181,"score":3182},"### 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_",[3176,3177],{"name":3151,"color":3152},{"name":3138,"color":3139},21385,"Hydration mismatch in error page with NuxtLayout (component duplication)","2023-07-23T11:56:03Z","https://github.com/nuxt/nuxt/issues/21385",0.5961861,{"description":3184,"labels":3185,"number":3188,"owner":3141,"repository":3141,"state":3155,"title":3189,"updated_at":3190,"url":3191,"score":3192},"### 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",[3186,3187],{"name":3151,"color":3152},{"name":3138,"color":3139},25963,"Hydration issue","2024-02-26T17:48:58Z","https://github.com/nuxt/nuxt/issues/25963",0.6036302,{"description":3194,"labels":3195,"number":3202,"owner":3141,"repository":3141,"state":3155,"title":3203,"updated_at":3204,"url":3205,"score":3206},"### 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",[3196,3197,3199],{"name":3151,"color":3152},{"name":3198,"color":3167},"🔨 p3-minor",{"name":3200,"color":3201},"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.6041521,{"description":3208,"labels":3209,"number":3212,"owner":3141,"repository":3141,"state":3155,"title":3189,"updated_at":3213,"url":3214,"score":3215},"### 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",[3210,3211],{"name":3151,"color":3152},{"name":3138,"color":3139},25940,"2024-02-24T23:46:06Z","https://github.com/nuxt/nuxt/issues/25940",0.60456353,{"description":3217,"labels":3218,"number":3221,"owner":3141,"repository":3141,"state":3155,"title":3222,"updated_at":3223,"url":3224,"score":3225},"### Environment\n\n- Operating System: Darwin\r\n- Node Version: v16.14.2\r\n- Nuxt Version: 3.1.0\r\n- Nitro Version: 2.0.0\r\n- Package Manager: npm@7.17.0\r\n- Builder: vite\r\n- User Config: components\r\n- Runtime Modules: -\r\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-ffmmnf?file=package.json\n\n### Describe the bug\n\nWhen using `defineNuxtComponent` and `components: false` manually causes Hydration error like above reproduction.\r\nThis error doesn't appear at 3.0.0.\r\n\r\n```vue\r\n// e.g. layout\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n layout\r\n \u003CFoo />\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript lang=\"ts\">\r\nimport { defineNuxtComponent } from '#imports';\r\nimport Foo from '~/components/Foo.vue';\r\n\r\nexport default defineNuxtComponent({\r\n name: 'default',\r\n components: {\r\n Foo,\r\n },\r\n});\r\n\u003C/script>\r\n\r\n// foo component\r\n\u003Ctemplate>\r\n \u003Cdiv>foo\u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript lang=\"ts\">\r\nimport { defineNuxtComponent } from '#imports';\r\n\r\nexport default defineNuxtComponent({\r\n name: 'Foo',\r\n});\r\n\u003C/script>\r\n\r\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\nvue.js?v=4752a486:1355 [Vue warn]: Hydration text content mismatch in \u003Cdiv>:\r\n- Client: \r\n- Server: foo \r\n at \u003CFoo> \r\n at \u003CDefault > \r\n at \u003CLayoutLoader key=\"default\" name=\"default\" hasTransition=false > \r\n at \u003CFragmentWrapper > \r\n at \u003CNuxtLayout> \r\n at \u003CApp key=2 > \r\n at \u003CNuxtRoot>\r\n```\n```\n",[3219,3220],{"name":3151,"color":3152},{"name":3138,"color":3139},18511,"Using defineNuxtComponent and components:false causes hydration mismatches error","2023-01-26T00:37:25Z","https://github.com/nuxt/nuxt/issues/18511",0.6048368,{"description":3227,"labels":3228,"number":3232,"owner":3141,"repository":3141,"state":3155,"title":3233,"updated_at":3234,"url":3235,"score":3236},"### 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_",[3229,3230,3231],{"name":3151,"color":3152},{"name":3138,"color":3139},{"name":3200,"color":3201},27731,"Hydration mismatch for nested server component","2024-06-20T13:58:28Z","https://github.com/nuxt/nuxt/issues/27731",0.60617304,{"description":3238,"labels":3239,"number":3245,"owner":3141,"repository":3141,"state":3155,"title":3246,"updated_at":3247,"url":3248,"score":3249},"### Environment\n\nNuxt project info: \r\n\r\n------------------------------\r\n- Operating System: `Linux`\r\n- Node Version: `v16.17.0`\r\n- Nuxt Version: `3.2.2`\r\n- Nitro Version: `2.2.2`\r\n- Package Manager: `pnpm@7.1.0`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\n\n### Reproduction\n\nhttps://codesandbox.io/p/sandbox/dreamy-mcclintock-3j327f\n\n### Describe the bug\n\nUsing a rich-text renderer causes an hydration mismatch in nuxt3. It did not happen in nuxt2.\r\n\r\nLooking at the [source code of the library](https://github.com/paramander/contentful-rich-text-vue-renderer/blob/master/src/index.js), shows that it does nothing special, just renders a series of elements. But the output that the server throws is a mismatch with the one that the client throws. Seems like the server only renders the first child?\r\n\r\nDo you have any hints to what I should investigate?\r\n\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\nVue warn]: Hydration text mismatch:\r\n- Client: \"When we launched in 2006, our ambition was simple: help businesses grow. We started with payments, taking an engineering-first approach to solving some of the most complex challenges. Today, we are the preferred financial technology platform of many of the world's leading brands. We did this by working with exceptional talent, prioritizing success over ego, and having fun along the way.\"\r\n- Server: \"When we launched in 2006, our ambition was simple: help businesses grow. We started with payments, taking an engineering-first approach to solving some of the most complex challenges. \" \r\n at \u003CRichText document= Objectcontent: Array(2)0: {data: {…}, content: Array(6), nodeType: 'paragraph'}content: (6) [{…}, {…}, {…}, {…}, {…}, {…}]data: {}nodeType: \"paragraph\"[[Prototype]]: Object1: {data: {…}, content: Array(1), nodeType: 'paragraph'}length: 2[[Prototype]]: Array(0)data: {}nodeType: \"document\"[[Prototype]]: Object > \r\n at \u003CRichText> \r\n at \u003CApp key=2 > \r\n at \u003CNuxtRoot>\r\nwarn2 @ chunk-Q53DPCWL.js:1381\r\n```\n```\n",[3240,3241,3242],{"name":3151,"color":3152},{"name":3138,"color":3139},{"name":3243,"color":3244},"upstream","E8A36D",22128,"Hydration mismatch warning when using a rich-text renderer","2023-10-04T12:44:45Z","https://github.com/nuxt/nuxt/issues/22128",0.609879,["Reactive",3251],{},["Set"],["ShallowReactive",3254],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fX2G00COx0xuJD8UUIVhTLdhXwMY6pcjLgJlqxzgRhVY":-1},"/nuxt/ui/4846"]