\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.",[2886],{"name":2887,"color":2888},"pending triage","E99695",32251,"Hydration Mismatch in Non-server Components with `componentIslands.selectiveClient: 'deep'`","2025-05-31T17:00:10Z","https://github.com/nuxt/nuxt/issues/32251",0.7052374,{"description":2895,"labels":2896,"number":2904,"owner":2877,"repository":2905,"state":2906,"title":2907,"updated_at":2908,"url":2909,"score":2910},"### Environment\n\n```\n- Operating System: Darwin\n- Node Version: v22.14.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.24.1\n- Nitro Version: 2.11.9\n- Package Manager: bun@1.2.9\n- Builder: -\n- User Config: ssr, imports, devtools, experimental, future, compatibilityDate, alias, runtimeConfig, devServer, app, css, modules, build, hooks, dayjs, ui, typescript\n- Runtime Modules: @nuxt/eslint@1.3.0, @vueuse/nuxt@13.1.0, @nuxt/test-utils/module@3.17.2, dayjs-nuxt@2.1.11, nuxt-svgo@4.0.17, @nuxt/ui-pro@3.1.0, @pinia/nuxt@0.11.0, @pinia/colada-nuxt@0.1.1, @nuxt/image@1.10.0\n- Build Modules: -\n```\n\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.1.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/empty-fast-5xtcmy?workspaceId=ws_SD2P6X4ufyWkm2P3aqoQA6\n\n### Description\n\nbetween version 3.0.2 and 3.1.0 the content container for the menu items is no longer filling the width.\n\n### Additional context\n\n__no response__\n\n### Logs\n\n```shell-script\n\n```",[2897,2898,2901],{"name":2871,"color":2872},{"name":2899,"color":2900},"v3","49DCB8",{"name":2902,"color":2903},"triage","ffffff",3987,"ui","closed","[NavigationMenu] Regression - Update","2025-05-02T09:52:45Z","https://github.com/nuxt/ui/issues/3987",0.6817952,{"labels":2912,"number":2917,"owner":2877,"repository":2877,"state":2906,"title":2918,"updated_at":2919,"url":2920,"score":2921},[2913,2914],{"name":2887,"color":2888},{"name":2915,"color":2916},"2.x","d4c5f9",7943,"Modern build is bigger with less browser requirements","2023-01-22T15:36:08Z","https://github.com/nuxt/nuxt/issues/7943",0.68229395,{"description":2923,"labels":2924,"number":2927,"owner":2877,"repository":2905,"state":2906,"title":2928,"updated_at":2929,"url":2930,"score":2931},"### Environment\n\n\"@vueuse/nuxt\": \"^13.1.0\"\n\"@nuxt/ui\": \"^3.1.2\"\nnode: lts/jod (22.11.0)\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.2\n\n### Reproduction\n\n\n\n\n\n### Description\n\nWhen using the UTab component with the variant=\"link\", applying custom CSS classes to enable horizontal scrolling (e.g., overflow-x: auto; or equivalent utility classes) causes the visual style indicating the currently active tab to be lost or overridden.\n\n```js\n{\n variant: 'link',\n ui: {\n list: 'bg-white overflow-x-auto overflow-y-hidden',\n trigger: 'min-w-auto'\n }\n}\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2925,2926],{"name":2871,"color":2872},{"name":2899,"color":2900},4198,"UTabs style issue","2025-05-23T13:23:24Z","https://github.com/nuxt/ui/issues/4198",0.6909231,{"description":2933,"labels":2934,"number":2939,"owner":2877,"repository":2877,"state":2906,"title":2940,"updated_at":2941,"url":2942,"score":2943},"### Environment\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v18.9.0`\r\n- Nuxt Version: `3.0.0-rc.12-27768618.05fd222`\r\n- Nitro Version: `0.6.0-27768582.4603279`\r\n- Package Manager: `pnpm@7.13.5`\r\n- Builder: `vite`\r\n- User Config: `typescript`, `runtimeConfig`, `css`, `pageTransition`, `nitro`, `modules`, `schemaOrg`, `unocss`, `umami`, `content`\r\n- Runtime Modules: `@nuxt/image-edge@1.0.0-27768165.4b0219a`, `@nuxt/content@2.1.1`, `@vueuse/nuxt@9.3.1`, `@unocss/nuxt@0.45.30`, `@formkit/nuxt@1.0.0-beta.11`, `nuxt-swiper@0.1.6`, `nuxt-umami@1.1.0`, `nuxt-schema-org@1.1.0-beta.5`\r\n- Build Modules: `-`\r\n\r\n\r\n### Reproduction\r\n\r\n> **Note**\r\n> I will add reproduction but for now I will have to decouple my current project that in private.\r\n\r\nIn the meantime I will try to re-produce this.\r\n\r\nThanks \r\n\r\n### Describe the bug\r\n\r\nUpstream bug: https://github.com/vueuse/head/issues/142\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n```shell\r\nUpstream bug: https://github.com/vueuse/head/issues/142\r\n```\r\n",[2935,2938],{"name":2936,"color":2937},"3.x","29bc7f",{"name":2887,"color":2888},15190,"`@vueuse/head` nuxt@3.0.0-rc.12 - upstream bug","2023-01-19T17:45:58Z","https://github.com/nuxt/nuxt/issues/15190",0.69195014,{"description":2945,"labels":2946,"number":2949,"owner":2877,"repository":2905,"state":2906,"title":2950,"updated_at":2951,"url":2952,"score":2953},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v20.11.0`\n- Nuxt Version: `3.15.4`\n- CLI Version: `3.21.1`\n- Nitro Version: `2.10.4`\n- Package Manager: `pnpm@9.12.3`\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.12\n\n### Reproduction\n\nhttps://github.com/AnotiaWang/deep-research-web-ui\n\n### Description\n\nThe UCard component's behavior is inconsistent across development and production builds. Separators between header/body/footer are missing in production builds.\n\nWhen in dev mode (`pnpm dev`):\n\u003Cimg width=\"912\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/9e88d4a9-ae6c-468a-8767-94f416cbb2e7\" />\n\nWhen in production mode (`pnpm build` or `pnpm generate`):\n\u003Cimg width=\"909\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/9d51185f-adc2-4fc1-ae12-a9dc1ae2d382\" />\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2947,2948],{"name":2871,"color":2872},{"name":2899,"color":2900},3304,"[UCard] Separators not shown in production","2025-02-27T21:23:40Z","https://github.com/nuxt/ui/issues/3304",0.6939536,{"description":2955,"labels":2956,"number":2963,"owner":2877,"repository":2877,"state":2906,"title":2964,"updated_at":2965,"url":2966,"score":2967},"### Environment\n\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v18.16.0\r\n- Nuxt Version: 3.6.0\r\n- Nitro Version: 2.4.1\r\n- Package Manager: yarn@1.22.19\r\n- Builder: vite\r\n- User Config: ssr, runtimeConfig, telemetry, css, modules, i18n, build, postcss, devtools, plugins\r\n- Runtime Modules: @vueuse/nuxt@10.1.2, @nuxtjs/i18n@8.0.0-beta.11, @vee-validate/nuxt@4.9.6, @nuxt/devtools@0.5.5, nuxt-lodash@2.4.1\r\n- Build Modules: -\r\n------------------------------\n\n### Reproduction\n\nCan't share the project (private company project)\n\n### Describe the bug\n\nAfter the update the application won'y run, and I have this error on te console : \r\n\r\n`[Vue warn]: \u003CSuspense> slots expect a single root node.`\r\n\r\n\u003Cimg width=\"518\" alt=\"Capture d’écran 2023-06-25 à 03 37 58\" src=\"https://github.com/nuxt/nuxt/assets/2084708/bbee0297-3052-4234-8bda-d71a521769b7\">\r\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[2957,2958,2959,2960],{"name":2936,"color":2937},{"name":2868,"color":2869},{"name":2871,"color":2872},{"name":2961,"color":2962},"❗ p4-important","D93F0B",21759,"layouts now require a single root node","2024-04-08T20:48:49Z","https://github.com/nuxt/nuxt/issues/21759",0.6978481,{"description":2969,"labels":2970,"number":2973,"owner":2877,"repository":2877,"state":2906,"title":2974,"updated_at":2975,"url":2976,"score":2977},"### 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_",[2971,2972],{"name":2936,"color":2937},{"name":2887,"color":2888},21385,"Hydration mismatch in error page with NuxtLayout (component duplication)","2023-07-23T11:56:03Z","https://github.com/nuxt/nuxt/issues/21385",0.69932324,{"description":2979,"labels":2980,"number":2983,"owner":2877,"repository":2877,"state":2906,"title":2984,"updated_at":2985,"url":2986,"score":2987},"### Environment\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v16.17.0`\r\n- Nuxt Version: `3.4.1`\r\n- Nitro Version: `2.3.3`\r\n- Package Manager: `npm@8.15.0`\r\n- Builder: `vite`\r\n- User Config: `runtimeConfig`, `app`, `css`, `components`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\r\n\r\n### Reproduction\r\n\r\npage/[...id].vue\r\n\r\n\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003Ccomponent\r\n v-for=\"(item, key) in data\"\r\n :key=\"key\"\r\n :is=\"item.type\" \r\n \r\n v-bind=\"item\"\r\n\r\n @lgc-action=\"$emit($event.handler, $event)\"\r\n\r\n\r\n @update:payload=\"(value) => item.payload = value\"\r\n @update:form=\"(value) => item.form = value\"\r\n @update:restriction=\"(value) => item.restriction = value\"/>\r\n \r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\n\r\n const route = useRoute()\r\n const runtimeConfig = useRuntimeConfig()\r\n const [path] = route.params.id.slice(-1)\r\n const { data } = reactive(await $fetch(`${runtimeConfig.public.BASE_URL}${runtimeConfig.public.SERVICE}/web/portal/${runtimeConfig.public.POI_NAME}/form/${path}`))\r\n \r\n\u003C/script>\r\n```\r\n\r\n\r\ncomponent/form.vue\r\n\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"lgc-form-input-group\">\r\n \u003Cp v-if=\"label\" class=\"lgc-form-input-group__label\">{{ label }}\u003C/p>\r\n \u003Cdiv class=\"lgc-form-input-group__form\">\r\n \u003C!-- v-bind=\"!item.type.toLowerCase().includes('form') ? { data: item } : item\" -->\r\n \u003Ccomponent :attr=\"index\" v-for=\"(item, index) in data\" :key=\"index\" :is=\"item.type\" v-bind=\"item\" \r\n @update:isValid=\"item.isValid = $event\"\r\n @emit-value=\"constructPayload(item, $event)\"\r\n @emit-input-and-value=\"constructPayload($event.input, $event.payload)\"\r\n @add-error=\"errorManagement('add', $event)\"\r\n @remove-error=\"errorManagement('remove', $event)\"\r\n @lgc-action=\"$emit($event.handler, $event)\"\r\n >\u003C/component>\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\nimport { v4 as uuidv4 } from 'uuid';\r\n\r\nconst emit = defineEmits(['emit-value','lgc-action'])\r\n\r\nconst props = defineProps({\r\n data: {\r\n type: Array,\r\n required: true\r\n },\r\n id: {\r\n type: String,\r\n required: false\r\n },\r\n label: {\r\n type: String,\r\n required: false\r\n },\r\n value: {\r\n type: Object,\r\n required: false,\r\n default() {\r\n return {}\r\n }\r\n },\r\n uuid: {\r\n type: String,\r\n required: false,\r\n default() {\r\n return uuidv4()\r\n }\r\n }\r\n })\r\n\r\n\r\n const inputValue= reactive(props.value ? props.value : {})\r\n\r\n function constructPayload(input, payload) {\r\n inputValue[input.id] = payload\r\n }\r\n\r\n function errorManagement(action, error) {\r\n let component = props.data.find(el => el.type === 'lgc-form-error');\r\n if (component) {\r\n let already = component.errors.find(el => el.key === error.key && el.byClient)\r\n let index = component.errors.indexOf(already)\r\n switch (action) {\r\n case 'add':\r\n if (component) {\r\n if (already) component.errors.splice(index, 1)\r\n if (error.value) component.errors.push(error)\r\n }\r\n break;\r\n case 'remove':\r\n if (component) {\r\n if (already) component.errors.splice(index, 1)\r\n }\r\n break;\r\n default:\r\n break;\r\n }\r\n } else {\r\n emit(`${action}-error`, error)\r\n }\r\n }\r\n\r\n async function submit() {\r\n emit('emit-value', inputValue)\r\n }\r\n\r\n\u003C/script>\r\n\r\n```\r\n\r\n### Describe the bug\r\n\r\nThe problem occurred when switching from nuxt2 to nuxt3.\r\nthis is a problem with the display order of compose with the `\u003Ccomponent :is=\"\" v-for=\"\" :key=\"\">` tag, in all that I find as documentation, it tells me offers 2 solutions:\r\n- make a sort function but even then, it doesn't work\r\n- that it is an asynchronous problem and must be made synchronous. Off, nuxt3 with \u003Cscript setup> makes compose directly asynchronous. It would then possibly be a \"bug\" linked to the frame work.\r\n\r\nafterwards, I haven't seen any documentation on the problem caused here: depending on the index, the order changes.\r\nIn addition to the tests you had done, I tried to put a uuid in key, the whole display is reversed.\r\nwithout key, it's good\r\nthe index, gives the current problem\r\na fixed key or just the item gives an even different display.\r\nregarding the key, ideally, the uuid should be in the object since using the index seems to be a bad practice\r\n \r\n The problem occurs in the compose form\r\n \r\n result nuxt 2 & nuxt3 no :key\r\n\u003Cimg width=\"701\" alt=\"Capture d’écran 2023-04-26 à 10 51 51\" src=\"https://user-images.githubusercontent.com/98752049/234523209-431b7cfc-d0c0-4397-a82d-d6120635a12a.png\">\r\n\r\nresult nuxt 3 whit :key=\"index\"\r\n\u003Cimg width=\"675\" alt=\"Capture d’écran 2023-04-26 à 10 55 16\" src=\"https://user-images.githubusercontent.com/98752049/234524004-76a98dde-1312-4266-9455-d9f28c1c521d.png\">\r\n\r\nresult nuxt3 whit :key=\"uuidv4()\"\r\n\u003Cimg width=\"678\" alt=\"Capture d’écran 2023-04-26 à 10 57 25\" src=\"https://user-images.githubusercontent.com/98752049/234524648-d85ae34d-70b5-4f58-a23d-005e8afd829a.png\">\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_",[2981,2982],{"name":2936,"color":2937},{"name":2887,"color":2888},20522,"Nuxt2 to Nuxt3, not display component in a correct order ","2023-04-26T09:06:18Z","https://github.com/nuxt/nuxt/issues/20522",0.700704,["Reactive",2989],{},["Set"],["ShallowReactive",2992],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f9hGTbxPGXca8IQ8kzC3yZ5CkWqzdeMIcg7sDT-enlVU":-1},"/nuxt/ui/2963"]