\n\u003C/template>\n\n\u003Cstyle scoped>\n.blue { background-color: blue; }\n\u003C/style>\n```\n\n```vue\n// PARENT\n\u003Ctemplate>\n \u003Cdiv>\n \u003CBlueSquare class=\"red\" />\n \u003C/div>\n\u003C/template>\n\n\u003Cstyle scoped>\n.red { background-color: red; }\n\u003C/style>\n```\n\nBoth plain Vue and Vue with SSR have the correct order:\n\n**Vue**\n\u003Cimg width=\"714\" height=\"163\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/fa26e7f4-3f89-4bae-b0b1-1fd19f383a02\" />\n\n**Vue SSR**\n\u003Cimg width=\"601\" height=\"190\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7e1dc7cc-4b32-4ccc-957c-dd207b7a836d\" />\n\n\nBut in Nuxt, the order is incorrect when built:\n\n**Nuxt**\n\u003Cimg width=\"596\" height=\"85\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/62458e07-886e-4c0b-b569-db6e08805f35\" />\n\n\n---\n\n\nIs this Nuxt related or not?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3139],{"name":3140,"color":3141},"pending triage","E99695",33041,"nuxt","open","Incorrect component style order","2025-09-02T22:32:28Z","https://github.com/nuxt/nuxt/issues/33041",0.7137685,{"description":3150,"labels":3151,"number":3161,"owner":3143,"repository":3162,"state":3144,"title":3163,"updated_at":3164,"url":3165,"score":3166},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.14.0\n- Nuxt Version: 3.17.4\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: pnpm@10.11.0\n- Builder: -\n- User Config: compatibilityDate, devtools, ssr, future, runtimeConfig, modules, css\n- Runtime Modules: @nuxt/eslint@1.3.1, @nuxt/image@1.10.0, @nuxt/ui@3.1.1, @pinia/nuxt@0.11.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.3\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/modest-shaw-dwjzc5\n\n### Description\n\n**What I'm trying to do:**\n\nI'm using the `UTooltip` component to show helpful text for buttons that only have icons (no text labels). These tooltips help users understand what each button does.\n\n**The issue:**\n\nI noticed that when a button with a tooltip is also used to open a `UModal`, the tooltip stops working after the modal is opened once. Specifically:\n\n- The tooltip works fine initially.\n- After I click the button (which has the tooltip) and the modal opens, the tooltip no longer appears when hovering over the button.\n- This only happens when the tooltip is on the same button that opens its own modal.\n\n**What I tried:**\n\n- Wrapping the button in `UTooltip`, both inside and outside the `UModal`, but the result is the same.\n- Setting `disableClosingTrigger` to `true` in the tooltip options\n- I added a second modal opened by another button without a tooltip, and that one does not break tooltips elsewhere. So the issue seems to be tied specifically to tooltips on buttons that open their own modal.",[3152,3155,3158],{"name":3153,"color":3154},"bug","d73a4a",{"name":3156,"color":3157},"v3","49DCB8",{"name":3159,"color":3160},"triage","ffffff",4274,"ui","UTooltip breaks when attached to button that opens a UModal","2025-06-02T04:23:45Z","https://github.com/nuxt/ui/issues/4274",0.7147238,{"description":3168,"labels":3169,"number":3173,"owner":3143,"repository":3162,"state":3144,"title":3174,"updated_at":3175,"url":3176,"score":3177},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.15.0\n- Nuxt Version: 3.17.7\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.13\n- Package Manager: pnpm@10.10.0\n- Builder: -\n- User Config: compatibilityDate, devtools, modules, fonts, icon, components, css, ui\n- Runtime Modules: @nuxt/fonts@0.11.4, @nuxt/eslint@1.5.2, @nuxt/icon@1.15.0, @nuxt/image@1.10.0, @nuxt/ui@3.2.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.2.0\n\n### Reproduction\n\nTheming with either of this method such as:\n\n### Theming in `app.config.ts`\nSame issue for both UInputTags and UInputMenu (multiple)\n```typescript\ninputTags: {\n ...\n compoundVariants: [\n {\n variant: 'outline',\n class : {\n root: 'root-test',\n base: 'base-test',\n },\n },\n ],\n},\ninputMenu: {\n ...\n compoundVariants: [\n // Works properly\n {\n variant: 'outline',\n class : {\n root: 'root-test',\n base: 'base-test',\n },\n },\n // Wrong behaviour\n {\n variant: 'outline',\n multiple: true,\n class : {\n root: 'root-test',\n base: 'base-test',\n },\n },\n ],\n},\n\n```\n### Theming directly using `ui`\n```tsx\n\u003CUInputTags\n ...\n :ui=\"{\n root: 'root-test',\n base: 'base-test',\n }\"\n/>\n```\n\n### Will results something like this\n```html\n\u003Cdiv class=\"... root-test base-test\">\n ...\n \u003Cinput class=\"...\" />\n\u003C/div>\n```\n\n### Description\n\nWhen applying themes in `app.config.ts`, both **UInputTags** and **UInputMenu (multiple)** share the same weird behaviour compared with other components, where the class applied to `base` part of the component are applied to `root` part of the component.\n\n### Expected Behaviour\nThe applied class on `base` should be applied to the `\u003Cinput />`, not the `root` part of the component which is the outer `\u003Cdiv />` just like other input components such as **UInput**, **UInputNumber**, or **UTextarea**.\n\nCorrect me if I'm wrong if this are intended, thank you!\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3170,3171,3172],{"name":3153,"color":3154},{"name":3156,"color":3157},{"name":3159,"color":3160},4530,"[UInputTags, UInputMenu] Theming behaviour issues","2025-07-15T17:50:02Z","https://github.com/nuxt/ui/issues/4530",0.71880394,{"description":3179,"labels":3180,"number":3183,"owner":3143,"repository":3162,"state":3144,"title":3184,"updated_at":3185,"url":3186,"score":3187},"### Environment\n\n- Operating System: Linux\n- Node Version: v18.20.6\n- Nuxt Version: 3.17.4\n- CLI Version: 3.26.2\n- Nitro Version: 2.12.0\n- Package Manager: bun@1.2.18\n- Builder: -\n- User Config: ssr, compatibilityDate, devtools, css, modules, gtag, nitro, vite, app, icon, ui, uiPro, i18n, runtimeConfig, plugins, dayjs, hooks, sentry, sourcemap\n- Runtime Modules: @nuxtjs/i18n@9.5.6, @nuxt/eslint@1.3.0, @nuxt/ui-pro@3.3.3, @nuxtjs/mdc@0.17.1, dayjs-nuxt@2.1.11, nuxt-gtag@3.0.3, @sentry/nuxt/module@9.41.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Package\n\nv3.x\n\n### Version\n\n3.17.4\n\n### Reproduction\n\n```\n \u003CUAvatarGroup\n v-if=\"sharedUsers.length\"\n :max=\"3\"\n size=\"sm\"\n @click=\"isShareProjectModalOpen = true\"\n >\n \u003CUTooltip\n v-for=\"user in sharedUsers\"\n :key=\"user.emailAddress\"\n :text=\"user.fullName ?? user.emailAddress\"\n :delay-duration=\"0\"\n >\n \u003CUAvatar\n :src=\"user.avatar ?? undefined\"\n :alt=\"user.fullName ?? user.emailAddress\"\n />\n \u003C/UTooltip>\n \u003C/UAvatarGroup>\n```\n\n---\n```\n \u003CShareProjectModal\n v-if=\"project\"\n v-model:open=\"isShareProjectModalOpen\"\n :project=\"project\"\n :template-name=\"project.template.name\"\n :primary-document-references=\"project.template.primary_document_reference?.map(d => d.name) || []\"\n />\n```\n\nSharedModal\n\n```\n \u003CUModal\n v-model:open=\"isOpen\"\n :ui=\"{\n content: 'max-w-124',\n footer: 'justify-between',\n body: 'flex flex-col gap-4 px-0 sm:px-0',\n }\"\n >\n\n\u003C/UModal>\n```\n\n\n### Description\n\n\nHi, we are using v4 with an avatarGroup tooltip\n```\n \u003CUAvatarGroup\n v-if=\"sharedUsers.length\"\n :max=\"3\"\n size=\"sm\"\n @click=\"isShareProjectModalOpen = true\"\n >\n \u003CUTooltip\n v-for=\"user in sharedUsers\"\n :key=\"user.emailAddress\"\n :text=\"user.fullName ?? user.emailAddress\"\n :delay-duration=\"0\"\n >\n \u003CUAvatar\n :src=\"user.avatar ?? undefined\"\n :alt=\"user.fullName ?? user.emailAddress\"\n />\n \u003C/UTooltip>\n \u003C/UAvatarGroup>\n```\n\nWe have few modal opening on the same page however we have inconsistency with the tooltip when playing around opening UModal on the page the tooltip would stop working. has anyone encounter such issue?\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3181,3182],{"name":3153,"color":3154},{"name":3159,"color":3160},4903,"AvatarGroup & Tooltip","2025-09-08T01:56:54Z","https://github.com/nuxt/ui/issues/4903",0.72066927,{"description":3189,"labels":3190,"number":3192,"owner":3143,"repository":3143,"state":3193,"title":3194,"updated_at":3195,"url":3196,"score":3197},"### Environment\n\nLinux `6.16.5-arch1-1` with nuxt `4.1.1`. \nBrowser used: Librewolf 142.0.1-1 and Chrome 139.0.7258.154\n\n```\n- Operating System: `Linux`\n- Node Version: `v22.13.0`\n- Nuxt Version: `4.1.1`\n- CLI Version: `3.28.0`\n- Nitro Version: `2.12.5`\n- Package Manager: `npm@10.9.2`\n- Builder: `-`\n- User Config: `-`\n- Runtime Modules: `-`\n- Build Modules: `-`\n```\n\n### Reproduction\n\nBarebones code example to reproduce this issue, no styling. \nIf you add Tailwind styling the issue becomes even more prominent, as the styling of the inner button gets applied to the outer button, breaking the layout entirely.\n\nI couldn't get any of the two code sandboxes to work, sorry, so here is the code directly:\n\n```vue\n\u003Ctemplate>\n \u003Cdiv>\n\n \u003Cbutton v-for=\"thisItem in storedItems\" :key=\"thisItem.id\">\n \u003Clabel>{{ thisItem.title }}\u003C/label>\n\n \u003Cdiv>\n \u003Cbutton v-for=\"thisLabel in thisItem.labels\" :key=\"thisLabel.id\">\n {{ thisLabel.name }}\n \u003C/button>\n \u003C/div>\n \u003C/button>\n\n \u003C/div>\n\u003C/template>\n\n\n\u003Cscript setup>\n\nconst storedItems = ref([{\n id: \"0\",\n title: \"0\",\n addedTimestamp: Date.now(),\n labels: [\n {\n id: \"0\",\n name: \"Summer\",\n type: \"season\"\n },\n {\n id: \"1\",\n name: \"Cocktail Dress\",\n type: \"type\"\n },\n {\n id: \"2\",\n name: \"2025\",\n type: \"year\"\n },\n {\n id: \"3\",\n name: \"Special\",\n type: \"occasion\"\n },\n {\n id: \"4\",\n name: \"Red\",\n type: \"color\"\n }\n ]\n },\n {\n id: \"1\",\n title: \"1\",\n addedTimestamp: Date.now(),\n labels: [\n {\n id: \"0\",\n name: \"Summer\",\n type: \"season\"\n },\n {\n id: \"1\",\n name: \"Cocktail Dress\",\n type: \"type\"\n },\n {\n id: \"2\",\n name: \"2025\",\n type: \"year\"\n },\n {\n id: \"3\",\n name: \"Special\",\n type: \"occasion\"\n },\n {\n id: \"4\",\n name: \"Red\",\n type: \"color\"\n }\n ]\n },\n {\n id: \"2\",\n title: \"2\",\n addedTimestamp: Date.now(),\n labels: [\n {\n id: \"0\",\n name: \"Summer\",\n type: \"season\"\n },\n {\n id: \"1\",\n name: \"Cocktail Dress\",\n type: \"type\"\n },\n {\n id: \"2\",\n name: \"2025\",\n type: \"year\"\n },\n {\n id: \"3\",\n name: \"Special\",\n type: \"occasion\"\n },\n {\n id: \"4\",\n name: \"Red\",\n type: \"color\"\n }\n ]\n }\n]);\n\n\u003C/script>\n```\n\n### Describe the bug\n\nTwo button elements, nested inside of each other, each containing a `v-for` instruction, causes the layout to break. \nThe for loop is executed an incorrect amount of times and the styling of the inner button can get applied to the outer button, starting with iteration >0.\n\nChanging one of the two button elements to a div/anchor/... fixes the issue.\n\n### Additional context\n\nThis is how it looks on page load:\n\u003Cimg width=\"1196\" height=\"649\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/520c3c98-61c7-4b40-9b97-a634d13d3e2f\" />\n\nThis is how it looks after a hot reload and *should* look:\n\u003Cimg width=\"1196\" height=\"649\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/99a6c586-13e4-4ff6-84f7-b79c4e301844\" />\n\nThe behavior does not change in \"build\" mode, so without the dev server. It technically is even worse because there is no hot-reload to circumvent the issue anymore.\n\n \n\nThis is how it looks in my app with Tailwind styling ^-^:\n\u003Cimg width=\"1849\" height=\"1171\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/e73db657-9526-418a-b611-772a73a4a22f\" />\n\n...and this is how it should look like:\n\u003Cimg width=\"1837\" height=\"1167\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/b34dd8fe-e625-4c84-9666-e46afd238b23\" />\n\n### Logs\n\n```shell-script\n\n```",[3191],{"name":3140,"color":3141},33188,"closed","Nested button elements with v-for loop are processed incorrectly and break layout","2025-09-09T19:05:58Z","https://github.com/nuxt/nuxt/issues/33188",0.6887599,{"labels":3199,"number":3200,"owner":3143,"repository":3143,"state":3193,"title":3201,"updated_at":3202,"url":3203,"score":3204},[],12073,"docs: explain component name resolution","2023-01-19T15:54:17Z","https://github.com/nuxt/nuxt/issues/12073",0.6949186,{"labels":3206,"number":3207,"owner":3143,"repository":3143,"state":3193,"title":3201,"updated_at":3208,"url":3209,"score":3204},[],12166,"2023-01-19T15:59:15Z","https://github.com/nuxt/nuxt/issues/12166",{"labels":3211,"number":3212,"owner":3143,"repository":3143,"state":3193,"title":3201,"updated_at":3213,"url":3214,"score":3204},[],12235,"2023-01-19T16:00:22Z","https://github.com/nuxt/nuxt/issues/12235",{"labels":3216,"number":3217,"owner":3143,"repository":3143,"state":3193,"title":3201,"updated_at":3218,"url":3219,"score":3204},[],12304,"2023-01-19T16:02:56Z","https://github.com/nuxt/nuxt/issues/12304",{"description":3221,"labels":3222,"number":3225,"owner":3143,"repository":3162,"state":3193,"title":3226,"updated_at":3227,"url":3228,"score":3229},"### Environment\n\n- Operating System: `Windows_NT`\n- Node Version: `v22.18.0`\n- Nuxt Version: `4.1.1`\n- CLI Version: `3.28.0`\n- Nitro Version: `2.12.4`\n- Package Manager: `npm@11.5.2`\n- Builder: `-`\n- User Config: `runtimeConfig`, `modules`, `devtools`, `supabase`, `css`, `routeRules`, `compatibilityDate`\n- Runtime Modules: `@nuxt/ui-pro@3.3.3`, `@vueuse/nuxt@13.9.0`, `@nuxtjs/supabase@1.6.2`, `nuxt-charts@0.2.3`\n- Build Modules: `-`\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Package\n\nv3.x\n\n### Version\n\nv3.3.3\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/zen-euclid-cf554n\n\n### Description\n\nThe problem occurs because the UFileUpload component likely contains a button element that doesn't have an explicit type attribute, causing it to default to type=\"submit\", which triggers form submission.\n\n### Additional context\n\n```\n\u003Ccomponent\n :is=\"variant === 'button' ? 'button' : 'div'\"\n ref=\"dropzoneRef\"\n :type=\"variant === 'button' ? 'button' : undefined\" // 👈 add this maybe?\n :role=\"variant === 'button' ? undefined : 'button'\"\n :data-dragging=\"isDragging\"\n :class=\"ui.base({ class: props.ui?.base })\"\n :tabindex=\"interactive && !disabled ? 0 : -1\"\n @click=\"interactive && !disabled && open()\" \n @keydown.prevent\n @keyup.enter.space=\"interactive && !disabled && open()\"\n>\n```\n\n### Logs\n\n```shell-script\n\n```",[3223,3224],{"name":3153,"color":3154},{"name":3156,"color":3157},4935,"UFileUpload with variant button inside form will cause UForm submit","2025-09-09T14:55:29Z","https://github.com/nuxt/ui/issues/4935",0.7011192,["Reactive",3231],{},["Set"],["ShallowReactive",3234],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f_JXn_uxdxQY-nCgMJjAHCStIG5-F0tge60rjecQxaMg":-1},"/nuxt/ui/4242"]