\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",[2937,2940],{"name":2938,"color":2939},"3.x","29bc7f",{"name":2922,"color":2923},18511,"closed","Using defineNuxtComponent and components:false causes hydration mismatches error","2023-01-26T00:37:25Z","https://github.com/nuxt/nuxt/issues/18511",0.57977444,{"description":2948,"labels":2949,"number":2952,"owner":2928,"repository":2928,"state":2942,"title":2953,"updated_at":2954,"url":2955,"score":2956},"### 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_",[2950,2951],{"name":2938,"color":2939},{"name":2922,"color":2923},21385,"Hydration mismatch in error page with NuxtLayout (component duplication)","2023-07-23T11:56:03Z","https://github.com/nuxt/nuxt/issues/21385",0.5841115,{"description":2958,"labels":2959,"number":2965,"owner":2928,"repository":2928,"state":2942,"title":2966,"updated_at":2967,"url":2968,"score":2969},"### 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",[2960,2961,2964],{"name":2938,"color":2939},{"name":2962,"color":2963},"🔨 p3-minor","FBCA04",{"name":2925,"color":2926},26434,"Server components cause hydration error when used inside resolved component","2024-03-26T14:03:01Z","https://github.com/nuxt/nuxt/issues/26434",0.59183246,{"description":2971,"labels":2972,"number":2976,"owner":2928,"repository":2928,"state":2942,"title":2977,"updated_at":2978,"url":2979,"score":2980},"### 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_",[2973,2974,2975],{"name":2938,"color":2939},{"name":2922,"color":2923},{"name":2925,"color":2926},27731,"Hydration mismatch for nested server component","2024-06-20T13:58:28Z","https://github.com/nuxt/nuxt/issues/27731",0.59453255,{"description":2982,"labels":2983,"number":2986,"owner":2928,"repository":2928,"state":2942,"title":2987,"updated_at":2988,"url":2989,"score":2990},"### 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",[2984,2985],{"name":2938,"color":2939},{"name":2922,"color":2923},25963,"Hydration issue","2024-02-26T17:48:58Z","https://github.com/nuxt/nuxt/issues/25963",0.5967209,{"description":2992,"labels":2993,"number":2995,"owner":2928,"repository":2928,"state":2942,"title":2996,"updated_at":2997,"url":2998,"score":2999},"### 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\">`",[2994],{"name":2922,"color":2923},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.6064574,{"description":3001,"labels":3002,"number":3005,"owner":2928,"repository":2928,"state":2942,"title":2987,"updated_at":3006,"url":3007,"score":3008},"### 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",[3003,3004],{"name":2938,"color":2939},{"name":2922,"color":2923},25940,"2024-02-24T23:46:06Z","https://github.com/nuxt/nuxt/issues/25940",0.6070816,{"description":3010,"labels":3011,"number":3014,"owner":2928,"repository":2928,"state":2942,"title":3015,"updated_at":3016,"url":3017,"score":3018},"### 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_",[3012,3013],{"name":2938,"color":2939},{"name":2922,"color":2923},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.60801125,{"labels":3020,"number":3023,"owner":2928,"repository":2928,"state":2942,"title":3024,"updated_at":3025,"url":3026,"score":3027},[3021,3022],{"name":2938,"color":2939},{"name":2922,"color":2923},13593,"Hydration completed but contains mismatches","2023-01-19T17:00:21Z","https://github.com/nuxt/nuxt/issues/13593",0.610666,["Reactive",3029],{},["Set"],["ShallowReactive",3032],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fgSkFCVGfgupix9bciKx8KpvsAycHBhX0_qz-MBhRbNM":-1},"/nuxt/nuxt/32251"]