\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.",[2948],{"name":2933,"color":2934},32251,"Hydration Mismatch in Non-server Components with `componentIslands.selectiveClient: 'deep'`","2025-05-31T17:00:10Z","https://github.com/nuxt/nuxt/issues/32251",0.6352742,{"description":2955,"labels":2956,"number":2969,"owner":2939,"repository":2939,"state":2940,"title":2970,"updated_at":2971,"url":2972,"score":2973},"### Environment\n\n- Operating System: Darwin\r\n- Node Version: v18.19.1\r\n- Nuxt Version: 3.11.1\r\n- CLI Version: 3.11.1\r\n- Nitro Version: 2.9.5\r\n- Package Manager: pnpm@8.6.0\r\n- Builder: -\r\n- User Config: devtools, experimental\r\n- Runtime Modules: -\r\n- Build Modules: -\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-ezhq5k?file=pages/index.server.vue\r\n\n\n### Describe the bug\n\nWhen using `nuxt-client` from a nested Server Component, the component with `nuxt-client` does not render. The repro shows the behavior when nesting on both:\r\n- Server page (`index.server.vue` -> `ServerWithNuxtClient.server.vue`)\r\n- Universally-rendered page (`page.vue` -> `ServerWithNestedServer.server.vue` -> `ServerWithNuxtClient.server.vue`)\r\n\r\nWithout `nuxt-client`, the component will render. \n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2957,2960,2963,2966,2968],{"name":2958,"color":2959},"good first issue","fbca04",{"name":2961,"color":2962},"bug","d73a4a",{"name":2964,"color":2965},"🔨 p3-minor","FBCA04",{"name":2967,"color":2959},"✨ good reproduction",{"name":2936,"color":2937},26527,"nuxt-client stops rendering in a nested server component","2024-11-19T16:21:05Z","https://github.com/nuxt/nuxt/issues/26527",0.63831246,{"description":2975,"labels":2976,"number":2979,"owner":2939,"repository":2939,"state":2940,"title":2980,"updated_at":2981,"url":2982,"score":2983},"### 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_",[2977,2978],{"name":2933,"color":2934},{"name":2936,"color":2937},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.64452577,{"description":2985,"labels":2986,"number":2992,"owner":2939,"repository":2939,"state":2940,"title":2993,"updated_at":2994,"url":2995,"score":2996},"### Environment\n\nOperating System: Darwin\r\nNode Version: v20.10.0\r\nNuxt Version: 3.12.2\r\nCLI Version: 3.12.0\r\nNitro Version: 2.9.6\r\nPackage Manager: pnpm@9.3.0\r\nBuilder: -\r\nUser Config: typescript,\r\n\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/server-components-style-forked-cp78pt\n\n### Describe the bug\n\n> Server components/islands can support all the features of normal components, including shared state, access to the current route, and more. Because they behave just like normal components, you can nest them within server components or just sprinkle them through the rest of your code.\r\n\r\n(https://roe.dev/blog/nuxt-server-components)\r\n\r\nUnlike the suggestion from this blog post, Server Components are not able to access the current route. \r\n\r\n- Open the repro (root contains no components)\r\n- Click a link. \r\n- The Server Component `useRoute` is empty\r\n- Universal Component is as expected\r\n- The Server Component which contains a nested Universal component marked (with `nuxt-client`) is as expected (sometimes) client side, but has a hydration error during SSR / full page reload\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2987,2990,2991],{"name":2988,"color":2989},"discussion","538de2",{"name":2933,"color":2934},{"name":2936,"color":2937},27949,"`nuxtRoute` doesn't work at all in Server Components. Hydration error in Universal Components nested in Server Components","2024-07-24T11:27:46Z","https://github.com/nuxt/nuxt/issues/27949",0.6488379,{"description":2998,"labels":2999,"number":3005,"owner":2939,"repository":2939,"state":3006,"title":3007,"updated_at":3008,"url":3009,"score":3010},"### 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",[3000,3003,3004],{"name":3001,"color":3002},"3.x","29bc7f",{"name":2964,"color":2965},{"name":2936,"color":2937},26434,"closed","Server components cause hydration error when used inside resolved component","2024-03-26T14:03:01Z","https://github.com/nuxt/nuxt/issues/26434",0.59169114,{"description":3012,"labels":3013,"number":3023,"owner":2939,"repository":2939,"state":3006,"title":3024,"updated_at":3025,"url":3026,"score":3027},"### Environment\r\n\r\nRootDir: /home/projects/github-aegvia \r\nNuxt project info: \r\n\r\n------------------------------\r\n- Operating System: `Linux`\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: `experimental`, `modules`\r\n- Runtime Modules: `nuxt-graphql-client@0.2.24`\r\n- Build Modules: `-`\r\n------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-aegvia\r\n\r\n### Describe the bug\r\n\r\nWhen using the new server islands, as soon as you use a method from a module, it results in a hydration mismatch, even if the html template is not using the data. Check the reproduction for a working and not-working example.\r\n\r\n\r\n\r\nWorks fine:\r\n```vue\r\n\u003Ctemplate>\r\n\t\u003Cdiv>This component will only be rendered on the server.\u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\n\tconsole.log('Server only!')\r\n\u003C/script>\r\n```\r\n\r\nAlso works fine:\r\n```ts\r\n// utils/example.ts\r\nexport const example = () => { return true }\r\n```\r\n```vue\r\n\u003Ctemplate>\r\n\t\u003Cdiv>This component will only be rendered on the server.\u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\n\tconst exampleRes = example()\r\n\tconsole.log('Server only!', { exampleRes })\r\n\u003C/script>\r\n\r\n```\r\n\r\nHydration mismatch (e.g. using another packages method, e.g. `nuxt-graphql-client`'s `useAsyncGql` method).\r\n```vue\r\n\u003Ctemplate>\r\n\t\u003Cdiv>This component will only be rendered on the server.\u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\n\tconst { data, error } = await useAsyncGql({\r\n\t\toperation: 'ListPosts',\r\n\t})\r\n\tconsole.log('Server only!', { data: data.value, error: error.value })\r\n\u003C/script>\r\n```\r\n\r\nSo it seems that there are issues in server-components when using composables from other packages. The `useAsyncGql` composable should work here because it is one that runs on the server + client normally. So it should not be the cause.\r\n\r\nLet me know what to add to the reproduction to test when a hydration error happens and when not.\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_",[3014,3015,3016,3019,3020],{"name":3001,"color":3002},{"name":2961,"color":2962},{"name":3017,"color":3018},"upstream","E8A36D",{"name":2964,"color":2965},{"name":3021,"color":3022},"upstream-bug","B60205",18500,"async server components are not rendered in initial HTML","2023-03-20T21:47:09Z","https://github.com/nuxt/nuxt/issues/18500",0.6095507,{"description":3029,"labels":3030,"number":3035,"owner":2939,"repository":2939,"state":3006,"title":3036,"updated_at":3037,"url":3038,"score":3039},"### Environment\r\n\r\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------------------------------\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/github-qjtrhd-mtyvxv\r\n\r\n### Describe the bug\r\n\r\n```vue\r\n\u003C!-- MyWrapper.server.vue -->\r\n\u003Ctemplate>\r\n \u003CAnotherServerComponent />\r\n\u003C/template>\r\n```\r\n\r\nDirectly using a server component as another server component's root will cause a hydration warning:\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```\r\n\r\n```\r\n[Vue warn]: Hydration children mismatch on \u003Cdiv data-v-inspector=\"app.vue:4:3\">…\u003C/div> \r\nServer rendered element contains fewer child nodes than client vdom. \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```\r\n\r\nI think it is at least an undocumented behavior.\r\n\r\n### Additional context\r\n\r\nThe previous post in https://github.com/nuxt/nuxt/issues/27731#issuecomment-2180766312 was ignored so I reopened a new issue.\r\n\r\n### Logs\r\n\r\n_No response_",[3031,3034],{"name":3032,"color":3033},"documentation","5319e7",{"name":2936,"color":2937},27810,"Server component cannot be the root element of another server component","2024-07-11T11:56:47Z","https://github.com/nuxt/nuxt/issues/27810",0.62455916,{"description":3041,"labels":3042,"number":3047,"owner":2939,"repository":2939,"state":3006,"title":3048,"updated_at":3049,"url":3050,"score":3051},"### Environment\n\n- Operating System: `Darwin`\r\n- Node Version: `v20.12.2`\r\n- Nuxt Version: `3.11.2`\r\n- CLI Version: `3.11.1`\r\n- Nitro Version: `2.9.6`\r\n- Package Manager: `bun@1.1.7`\r\n- Builder: `-`\r\n- User Config: `devtools`, `experimental`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\n\n### Reproduction\n\nhttps://github.com/Rigo-m/nuxt-selective-client-bug\n\n### Describe the bug\n\n\r\nCycling through a server component which contains a client component selectively hydrated breaks the page in the way which is shown above.\r\nThe moveTeleport function fails with this error:\r\nUncaught (in promise) TypeError: Failed to execute 'insertBefore' on 'Node': parameter 1 is not of type 'Node'.\r\n\r\n@huang-julien any idea on what's happening here?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3043,3044,3045,3046],{"name":3001,"color":3002},{"name":2961,"color":2962},{"name":2964,"color":2965},{"name":2936,"color":2937},27210,"Selective client in a v-for generates many client component references","2024-06-16T09:29:22Z","https://github.com/nuxt/nuxt/issues/27210",0.6269308,{"description":3053,"labels":3054,"number":3057,"owner":2939,"repository":2939,"state":3006,"title":3058,"updated_at":3059,"url":3060,"score":3061},"### 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",[3055,3056],{"name":2961,"color":2962},{"name":2964,"color":2965},15562,"Hydration node mismatch with `.server`/`.client` components","2025-03-24T22:47:45Z","https://github.com/nuxt/nuxt/issues/15562",0.6275212,["Reactive",3063],{},["Set"],["ShallowReactive",3066],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fyru3o7In2Hp2W_DroW4gK16S47lWBlvW3-hKGWuUCkM":-1},"/nuxt/nuxt/28100"]