\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.",[3019],{"name":3020,"color":3021},"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.66184103,{"description":3030,"labels":3031,"number":3036,"owner":3023,"repository":3023,"state":3037,"title":3038,"updated_at":3039,"url":3040,"score":3041},"### 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",[3032,3035],{"name":3033,"color":3034},"3.x","29bc7f",{"name":3020,"color":3021},25963,"closed","Hydration issue","2024-02-26T17:48:58Z","https://github.com/nuxt/nuxt/issues/25963",0.62779504,{"labels":3043,"number":3046,"owner":3023,"repository":3023,"state":3037,"title":3047,"updated_at":3048,"url":3049,"score":3050},[3044,3045],{"name":3033,"color":3034},{"name":3020,"color":3021},14139,"Hydration error on HTML attributes (style variables)","2023-01-19T17:25:51Z","https://github.com/nuxt/nuxt/issues/14139",0.6423432,{"description":3052,"labels":3053,"number":3058,"owner":3023,"repository":3023,"state":3037,"title":3059,"updated_at":3060,"url":3061,"score":3062},"### 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_",[3054,3055],{"name":3033,"color":3034},{"name":3056,"color":3057},"❗ p4-important","D93F0B",18491,"Hydration node mismatch in 3.1.0","2023-01-25T19:46:40Z","https://github.com/nuxt/nuxt/issues/18491",0.64910966,{"labels":3064,"number":3067,"owner":3023,"repository":3023,"state":3037,"title":3068,"updated_at":3069,"url":3070,"score":3071},[3065,3066],{"name":3033,"color":3034},{"name":3020,"color":3021},14083,"Shared state update causes hydration mismatch","2023-01-19T17:24:11Z","https://github.com/nuxt/nuxt/issues/14083",0.6526243,{"description":3073,"labels":3074,"number":3077,"owner":3023,"repository":3023,"state":3037,"title":3078,"updated_at":3079,"url":3080,"score":3081},"### Environment\n\n- Operating System: Linux\r\n- Node Version: v20.11.0\r\n- Nuxt Version: 3.10.0\r\n- CLI Version: 3.10.0\r\n- Nitro Version: 2.8.1\r\n- Package Manager: pnpm@8.15.1\r\n- Builder: -\r\n- User Config: modules, devtools, app, vite, vue, css, postcss, nitro, build, typescript, runtimeConfig\r\n- Runtime Modules: @nuxtjs/tailwindcss@6.11.2, @pinia/nuxt@0.5.1, @formkit/auto-animate/nuxt@0.8.1, nuxt-headlessui@1.1.5, nuxt-icon@0.6.8\r\n- Build Modules: -\r\n- latest firefox & chromium\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-pgrig4?file=app.vue\n\n### Describe the bug\n\nUsing v-bind together with style attribute on component root gives ```Hydration style mismatch``` warning:\r\n```\r\n- rendered on server: style=\"padding:100px;--938b83b0-test:100;--938b83b0-test2:red;\"\r\n- expected on client: style=\"padding:100px;\"\r\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3075,3076],{"name":3033,"color":3034},{"name":3020,"color":3021},25588,"Hydration style mismatch: v-bind and style attribute on component root","2024-02-02T10:24:04Z","https://github.com/nuxt/nuxt/issues/25588",0.65504235,{"description":3083,"labels":3084,"number":3085,"owner":3023,"repository":3023,"state":3037,"title":3086,"updated_at":3087,"url":3088,"score":3089},"### Environment\n\nNuxt CLI v3.0.0-27236898.4a34c2a 17:35:42\r\nRootDir: /home/centos/nuxt3-app/nuxt 17:35:42\r\nNuxt project info: 17:35:42\r\n\r\n------------------------------\r\n- Operating System: `Linux`\r\n- Node Version: `v14.17.6`\r\n- Nuxt Version: `3-3.0.0-27236898.4a34c2a`\r\n- Package Manager: `npm`\r\n- Bundler: `Webpack`\r\n- User Config: `vite`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n------------------------------\r\n\r\n\r\nI tried with `vite: false` and without, but that's the same result\n\n### Describe the bug\n\nThe first frame, i see \"Page visits: true\" but next frame, i see \"Page visits:\" (`true` not showing)\r\n\r\n\r\n\r\n```vue\r\n\u003Ctemplate>Page visits: {{ data }}\u003C/template>\r\n\r\n\u003Cscript setup>\r\nconst { data } = await useFetch('/api2/health', { baseURL: process.server ? \"http://127.0.0.1/\" : undefined });\r\nconsole.log(data.value) // Display true in server-side\r\n\u003C/script>\r\n```\r\n\r\nIn console : \r\n```\r\n✔ Client Compiled successfully in 180.09ms\r\n✔ Server Compiled successfully in 151.10ms\r\ntrue\r\n```\r\n\r\nIn chrome view-source :\r\n\r\n\r\nIn chrome dev (Elements) : \r\n\r\n\n\n### Reproduction\n\n/api2 is nginx end-point\r\n\r\n`app.get(\"/health\", (req, res) => res.json(true));`\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[],12058,"Hydration text mismatch","2023-01-19T15:54:17Z","https://github.com/nuxt/nuxt/issues/12058",0.6573237,{"description":3083,"labels":3091,"number":3092,"owner":3023,"repository":3023,"state":3037,"title":3086,"updated_at":3093,"url":3094,"score":3089},[],12236,"2023-01-19T16:00:22Z","https://github.com/nuxt/nuxt/issues/12236",{"description":3083,"labels":3096,"number":3097,"owner":3023,"repository":3023,"state":3037,"title":3086,"updated_at":3098,"url":3099,"score":3089},[],12296,"2023-01-19T16:02:56Z","https://github.com/nuxt/nuxt/issues/12296",{"description":3101,"labels":3102,"number":3104,"owner":3023,"repository":3023,"state":3037,"title":3105,"updated_at":3106,"url":3107,"score":3108},"### 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\">`",[3103],{"name":3020,"color":3021},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.6575762,["Reactive",3110],{},["Set"],["ShallowReactive",3113],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$foTW-D5GRjmMrlLs7AEAxNbU1D971PJ4zMcK_LoonRZ4":-1},"/nuxt/nuxt/12533"]