\r\n\u003C/template>\r\n```\r\n\r\n\r\n\r\n\r\n\r\n```\r\n\u003Ctemplate>\r\n \u003Cinput type=\"email\" placeholder=\"Please enter your emmmail\" />\r\n\u003C/template>\r\n```\r\n\r\n\r\n\r\n\r\nWTF???\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2883,2884,2885],{"name":2868,"color":2869},{"name":2871,"color":2872},{"name":2886,"color":2887},"needs reproduction","FBCA04",24479,"Hydration children mismatch in \u003Cdiv>: server rendered element contains more child nodes than client vdom.","2023-11-27T12:30:02Z","https://github.com/nuxt/nuxt/issues/24479",0.5887876,{"description":2894,"labels":2895,"number":2901,"owner":2874,"repository":2874,"state":2875,"title":2902,"updated_at":2903,"url":2904,"score":2905},"### Environment\r\n\r\n- Operating System: `Linux`\r\n- Node Version: `v19.8.1`\r\n- Nuxt Version: `3.4.1`\r\n- Nitro Version: `2.3.3`\r\n- Package Manager: `npm@8.19.2`\r\n- Builder: `vite`\r\n- User Config: `vue`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\r\n### Reproduction\r\n\r\nhttps://github.com/dritter/nuxt-hydration-mismatch-reproducer\r\n\r\n### Describe the bug\r\n\r\nIf I have a custom element that has a child node, I get an hydration mismatch.\r\n\r\n\r\n\r\nThis reproducer configures a custom element [`my-component`](https://github.com/dritter/nuxt-hydration-mismatch-reproducer/blob/main/server/plugins/my-component.js) (using [a nitro hook](https://github.com/nuxt/nuxt/issues/14195#issuecomment-1397369535)) and [uses it](https://github.com/dritter/nuxt-hydration-mismatch-reproducer/blob/main/app.vue#L3).\r\nThe custom element renders a red block on the client side.\r\n\r\nInterestingly this does not happen, if:\r\n- the custom element has no child node\r\n- I wrap the `connectedCallback()` code in a `setTimeout` with a large timeout (like 1000ms)\r\n\r\nI would have guessed that by [marking it as custom element](https://github.com/dritter/nuxt-hydration-mismatch-reproducer/blob/main/nuxt.config.ts#L6) that this element gets completely ignored.\r\n\r\nNot sure if this is a Bug in really in nuxt or in Vues SSR part (apologies if this is wrong).\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n```shell-script\r\nFrom the Browser console:\r\n\r\nentry.js:49 [Vue warn]: Hydration children mismatch in \u003Cmy-component>: server rendered element contains more child nodes than client vdom. \r\n at \u003CApp key=3 > \r\n at \u003CNuxtRoot>\r\nwarn2 @ vue.js:1381\r\nhydrateElement @ vue.js:5497\r\nhydrateNode @ vue.js:5420\r\nhydrateChildren @ vue.js:5524\r\nhydrateElement @ vue.js:5492\r\nhydrateNode @ vue.js:5420\r\nhydrateSubTree @ vue.js:6101\r\ncomponentUpdateFn @ vue.js:6115\r\nrun @ vue.js:405\r\ninstance.update @ vue.js:6220\r\nsetupRenderEffect @ vue.js:6228\r\nmountComponent @ vue.js:6046\r\nhydrateNode @ vue.js:5425\r\nhydrateSuspense @ vue.js:2749\r\nhydrateNode @ vue.js:5448\r\nhydrateSubTree @ vue.js:6101\r\ncomponentUpdateFn @ vue.js:6115\r\nrun @ vue.js:405\r\ninstance.update @ vue.js:6220\r\nsetupRenderEffect @ vue.js:6228\r\nmountComponent @ vue.js:6046\r\nhydrateNode @ vue.js:5425\r\nhydrate2 @ vue.js:5342\r\nmount @ vue.js:5209\r\napp.mount @ vue.js:9291\r\ninitApp @ entry.js:49\r\nawait in initApp (async)\r\n(anonymous) @ entry.js:57\r\nShow 25 more frames\r\nentry.js:49 Hydration completed but contains mismatches.\r\n```\r\n",[2896,2897,2898],{"name":2868,"color":2869},{"name":2871,"color":2872},{"name":2899,"color":2900},"upstream","E8A36D",20327,"Hydration mismatch when custom element contains child node","2023-04-27T11:27:55Z","https://github.com/nuxt/nuxt/issues/20327",0.5977947,{"description":2907,"labels":2908,"number":2913,"owner":2874,"repository":2874,"state":2875,"title":2914,"updated_at":2915,"url":2916,"score":2917},"### 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_",[2909,2910],{"name":2868,"color":2869},{"name":2911,"color":2912},"❗ p4-important","D93F0B",18491,"Hydration node mismatch in 3.1.0","2023-01-25T19:46:40Z","https://github.com/nuxt/nuxt/issues/18491",0.60025144,{"description":2919,"labels":2920,"number":2926,"owner":2874,"repository":2874,"state":2875,"title":2927,"updated_at":2928,"url":2929,"score":2930},"### Environment\n\n- Operating System: `Linux`\r\n- Node Version: `v16.14.2`\r\n- Nuxt Version: `3.0.0`\r\n- Nitro Version: `1.0.0`\r\n- Package Manager: `npm@7.17.0`\r\n- Builder: `vite`\r\n- User Config: `-`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-uy1uwl?file=app.vue\n\n### Describe the bug\n\nAccording to the docs, server-side rendered `.server` components are replaced with their `.client` counterparts on the client-side. Unfortunately, this isn't working as expected and Vue throws an `Hydration node mismatch` warning even though both files contain the same template without any state dependent dynamic content.\r\n\r\n```html\r\n\u003Ctemplate>\r\n \u003Ch1>Hello World!\u003C/h1>\r\n\u003C/template>\r\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell\n[Vue warn]: Hydration node mismatch:\r\n- Client vnode: div \r\n- Server rendered DOM: \u003Ch1>Hello World!\u003C/h1> \r\n at \u003CHeadline.client> \r\n at \u003CApp key=1 > \r\n at \u003CNuxtRoot>\n```\n",[2921,2924],{"name":2922,"color":2923},"bug","d73a4a",{"name":2925,"color":2887},"🔨 p3-minor",15562,"Hydration node mismatch with `.server`/`.client` components","2025-03-24T22:47:45Z","https://github.com/nuxt/nuxt/issues/15562",0.60060716,{"description":2932,"labels":2933,"number":2936,"owner":2874,"repository":2874,"state":2875,"title":2937,"updated_at":2938,"url":2939,"score":2940},"### 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",[2934,2935],{"name":2868,"color":2869},{"name":2871,"color":2872},25940,"Hydration issue","2024-02-24T23:46:06Z","https://github.com/nuxt/nuxt/issues/25940",0.6099341,{"labels":2942,"number":2945,"owner":2874,"repository":2874,"state":2875,"title":2946,"updated_at":2947,"url":2948,"score":2949},[2943,2944],{"name":2868,"color":2869},{"name":2871,"color":2872},13431,"Throw \"Hydration node mismatch\" error when using teleport","2023-01-19T16:55:42Z","https://github.com/nuxt/nuxt/issues/13431",0.61624944,{"labels":2951,"number":2956,"owner":2874,"repository":2874,"state":2875,"title":2957,"updated_at":2958,"url":2959,"score":2960},[2952,2953],{"name":2871,"color":2872},{"name":2954,"color":2955},"2.x","d4c5f9",10231,"Bug of hydration children for html elements","2023-01-22T15:45:12Z","https://github.com/nuxt/nuxt/issues/10231",0.6167177,{"description":2962,"labels":2963,"number":2969,"owner":2874,"repository":2874,"state":2875,"title":2970,"updated_at":2971,"url":2972,"score":2973},"### 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_",[2964,2965,2966],{"name":2868,"color":2869},{"name":2871,"color":2872},{"name":2967,"color":2968},"server components","839413",27731,"Hydration mismatch for nested server component","2024-06-20T13:58:28Z","https://github.com/nuxt/nuxt/issues/27731",0.61672646,{"description":2975,"labels":2976,"number":2982,"owner":2874,"repository":2874,"state":2875,"title":2983,"updated_at":2984,"url":2985,"score":2986},"### 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_",[2977,2978,2979],{"name":2922,"color":2923},{"name":2899,"color":2900},{"name":2980,"color":2981},"upstream-bug","B60205",28381,"TransitionGroup hydration mismatch","2024-09-19T11:24:39Z","https://github.com/nuxt/nuxt/issues/28381",0.6195657,["Reactive",2988],{},["Set"],["ShallowReactive",2991],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fCbJ4JEqDSnyn6N8OCk1k244SJ-bvQc8FeRKojqGIEDI":-1},"/nuxt/nuxt/22736"]