\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.",[2992],{"name":2955,"color":2956},32251,"Hydration Mismatch in Non-server Components with `componentIslands.selectiveClient: 'deep'`","2025-05-31T17:00:10Z","https://github.com/nuxt/nuxt/issues/32251",0.6409448,{"description":2999,"labels":3000,"number":3003,"owner":2942,"repository":2942,"state":2943,"title":3004,"updated_at":3005,"url":3006,"score":3007},"### Environment\n\n- Operating System: Linux\n- Node Version: v18.20.3\n- Nuxt Version: 3.14.1592\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.2.3\n- Builder: -\n- User Config: default\n- Runtime Modules: -\n- Build Modules: -\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-osnj7f?file=pages%2Findex.server.vue\n\n### Describe the bug\n\nIn an Nuxt Island Page, when using the `componentIslands.selectiveClient: true` configuration, the `nuxt-client` directive does not make components interactive, even for components 1-level deep.\n\nIn the example, I have an Island page: `/pages/index.server.vue`. This page has an interactive component `InteractiveButton` with the `nuxt-client` directive. The component is only 1 level deep so I would expect it to be interactive even if we have `componentIslands.selectiveClient: true` instead of `componentIslands.selectiveClient: \"deep\"`.\n\nHowever, the component is not interactive. \n\nIn contrast, I have an interactive page `/pages/interactive.vue`. This page has a server component `ServerComponent.server.vue`. Inside of `ServerComponent`, we have `InteractiveButton` with the `nuxt-client` directive. This time, the `InteractiveButton` is interactive, as expected.\n\n### Additional context\n\n\n\n\n",[3001,3002],{"name":2933,"color":2934},{"name":2939,"color":2940},30016,"Nuxt Island - nuxt-client directive not working with componentIslands.selectiveClient:true","2024-12-13T18:02:15Z","https://github.com/nuxt/nuxt/issues/30016",0.6450171,{"description":3009,"labels":3010,"number":3016,"owner":2942,"repository":2942,"state":3017,"title":3018,"updated_at":3019,"url":3020,"score":3021},"### 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",[3011,3014,3015],{"name":3012,"color":3013},"3.x","29bc7f",{"name":2936,"color":2937},{"name":2939,"color":2940},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.60828733,{"description":3023,"labels":3024,"number":3028,"owner":2942,"repository":2942,"state":3017,"title":3029,"updated_at":3030,"url":3031,"score":3032},"### 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_",[3025,3026,3027],{"name":3012,"color":3013},{"name":2955,"color":2956},{"name":2939,"color":2940},27731,"Hydration mismatch for nested server component","2024-06-20T13:58:28Z","https://github.com/nuxt/nuxt/issues/27731",0.62320304,{"labels":3034,"number":3037,"owner":2942,"repository":2942,"state":3017,"title":3038,"updated_at":3039,"url":3040,"score":3041},[3035,3036],{"name":3012,"color":3013},{"name":2955,"color":2956},14143,"Attributes are not updated on the client side (hydration issue 🤔)","2023-01-19T17:25:50Z","https://github.com/nuxt/nuxt/issues/14143",0.645574,{"description":3043,"labels":3044,"number":3049,"owner":2942,"repository":2942,"state":3017,"title":3050,"updated_at":3051,"url":3052,"score":3053},"\r\n\r\n### Versions\r\n\r\n- nuxt: 2.4.12\r\n- node: 14.12.1\r\n\r\n### Reproduction\r\nI could not provide a reproduction code but here is the screenshot: https://pasteboard.co/JNpteTp.png\r\n\r\n\r\n\u003Cdetails open>\r\n\u003Csummary>Additional Details\u003C/summary>\r\n\u003Cbr>\r\nexport default {\r\n // Global page headers: https://go.nuxtjs.dev/config-head\r\n head: {\r\n title: 'tile',\r\n meta: [\r\n { charset: 'utf-8' },\r\n { name: 'viewport', content: 'width=device-width, initial-scale=1' },\r\n {\r\n hid: 'description',\r\n name: 'description',\r\n content: ,\r\n },\r\n {\r\n name: 'og:site_name',\r\n content: 'chairwatch.com',\r\n },\r\n ],\r\n link: [{ rel: 'icon', type: 'image/x-icon', href: '/icon.png' }],\r\n },\r\n\r\n // Global CSS: https://go.nuxtjs.dev/config-css\r\n css: [\r\n '~/assets/css/style.css',\r\n '@sum.cumo/vue-datepicker/dist/Datepicker.css',\r\n ],\r\n\r\n // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins\r\n plugins: [\r\n { src: '~/plugins/vue-star-rating.js', mode: 'client' },\r\n { src: '~/plugins/vue-datepicker.js', mode: 'client' },\r\n { src: '~/plugins/persisted-state.client.js', mode: 'client' },\r\n { src: '~/plugins/fireauth.js', mode: 'client' },\r\n ],\r\n\r\n // Auto import components: https://go.nuxtjs.dev/config-components\r\n components: true,\r\n\r\n // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules\r\n buildModules: [\r\n // https://go.nuxtjs.dev/eslint\r\n '@nuxtjs/eslint-module',\r\n // https://go.nuxtjs.dev/tailwindcss\r\n '@nuxtjs/tailwindcss',\r\n ],\r\n\r\n // Modules: https://go.nuxtjs.dev/config-modules\r\n modules: [\r\n // https://go.nuxtjs.dev/axios\r\n '@nuxtjs/axios',\r\n // https://go.nuxtjs.dev/pwa\r\n ['@nuxtjs/pwa', { icon: false }],\r\n '@nuxtjs/toast',\r\n [\r\n 'nuxt-fontawesome',\r\n {\r\n imports: [\r\n {\r\n set: '@fortawesome/free-solid-svg-icons',\r\n icons: ['fas'],\r\n },\r\n {\r\n set: '@fortawesome/free-brands-svg-icons',\r\n icons: ['fab'],\r\n },\r\n ],\r\n },\r\n ],\r\n 'nuxtjs-stripe',\r\n ],\r\n\r\n // Axios module configuration: https://go.nuxtjs.dev/config-axios\r\n axios: {\r\n baseURL: '',\r\n },\r\n\r\n // PWA module configuration: https://go.nuxtjs.dev/pwa\r\n pwa: {\r\n manifest: {\r\n lang: 'en',\r\n },\r\n },\r\n\r\n // Build Configuration: https://go.nuxtjs.dev/config-build\r\n build: {},\r\n toast: {\r\n position: 'top-center',\r\n register: [\r\n // Register custom toasts\r\n {\r\n name: 'app-error',\r\n message: (payload) => {\r\n if (!payload) {\r\n return 'Oops...Something went wrong'\r\n }\r\n return 'Oops...' + payload\r\n },\r\n options: {\r\n type: 'error',\r\n },\r\n action: {\r\n text: 'Close',\r\n onClick: (e, toastObject) => {\r\n toastObject.goAway(0)\r\n },\r\n },\r\n },\r\n ],\r\n },\r\n vue: {\r\n config: {\r\n productionTip: false,\r\n devtools: true,\r\n },\r\n },\r\n stripe: {\r\n /* module options */\r\n publishableKey: '',\r\n version: 'v3', // Default\r\n defer: true, // Default\r\n async: true, // Default\r\n },\r\n}\r\n\r\n\u003C/details>\r\n\r\n### Steps to reproduce\r\n\r\n\r\n### What is Expected?\r\n\r\n\r\n### What is actually happening?\r\n",[3045,3046],{"name":2955,"color":2956},{"name":3047,"color":3048},"2.x","d4c5f9",8793,"Client App is not hydrated","2023-01-22T15:38:40Z","https://github.com/nuxt/nuxt/issues/8793",0.64737344,["Reactive",3055],{},["Set"],["ShallowReactive",3058],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f4uUxWgG_x3wBoVoOApVKUTGM10DVjP2UjrxjhxQ3BOI":-1},"/nuxt/nuxt/26452"]