\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```",[3145,3148,3151],{"name":3146,"color":3147},"bug","d73a4a",{"name":3149,"color":3150},"v3","49DCB8",{"name":3152,"color":3153},"triage","ffffff",4530,"nuxt","ui","open","[UInputTags, UInputMenu] Theming behaviour issues","2025-07-15T17:50:02Z","https://github.com/nuxt/ui/issues/4530",0.6990841,{"description":3163,"labels":3164,"number":3168,"owner":3155,"repository":3155,"state":3157,"title":3169,"updated_at":3170,"url":3171,"score":3172},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v22.17.0`\n- Nuxt Version: `4.0.3`\n- CLI Version: `3.28.0`\n- Nitro Version: `2.12.4`\n- Package Manager: `pnpm@10.12.1`\n- Builder: `-`\n- User Config: `compatibilityDate`, `devtools`\n- Runtime Modules: `-`\n- Build Modules: `-`\n\n\n### Reproduction\n\nVue SSR (correct order): https://stackblitz.com/edit/github-ifxk7hsj?file=src/components/BlueSquare.vue,src/pages/Home.vue\n\nVue (correct order in dev mode): https://stackblitz.com/edit/vitejs-vite-h4thdsyp?file=src/components/BlueSquare.vue,src/App.vue&terminal=dev\n\nNuxt (wrong order in prod): https://stackblitz.com/edit/github-ristas3f-hetgu6mm?file=app%2Fcomponents%2FBlueSquare.vue,app%2Fapp.vue\n\n### Describe the bug\n\nThis is a follow-up on:\n- https://github.com/nuxt/nuxt/issues/25229\n- https://github.com/nuxt/nuxt/issues/23785\n\nThe styles are now correctly ordered in the `entry.css` file, but the rendered `\u003Cstyle>` tags are not.\nStyles from the parent component should always have a higher priority _(in the case of equal specificity - be defined later)_ than the styles from children.\n\nCurrently, after the `entry.css` file loads, the correct styles get applied, however, **while the css file is loading**, the styles are broken due to the rendered `\u003Cstyle>` tags being ordered incorrectly. This can cause layout shifts / flashes / etc.\n\n\n```vue\n// CHILD\n\u003Ctemplate>\n \u003Cdiv class=\"blue\" />\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```",[3165],{"name":3166,"color":3167},"pending triage","E99695",33041,"Incorrect component style order","2025-09-02T22:32:28Z","https://github.com/nuxt/nuxt/issues/33041",0.70243764,{"description":3174,"labels":3175,"number":3179,"owner":3155,"repository":3156,"state":3157,"title":3180,"updated_at":3181,"url":3182,"score":3183},"### Environment\n\n- Operating System: Darwin\n- Node Version: v23.11.0\n- Nuxt Version: 3.17.3\n- CLI Version: 3.25.1\n- Nitro Version: 2.11.12\n- Package Manager: npm@10.9.2\n- Builder: -\n- User Config: devtools, typescript, css, compatibilityDate, devServer, vite, runtimeConfig, app, ui, scripts, modules, sentry, sourcemap\n- Runtime Modules: @nuxt/ui@3.1.2, @pinia/nuxt@0.11.0, pinia-plugin-persistedstate/nuxt@4.3.0, @sentry/nuxt/module@9.19.0, @nuxt/scripts@0.11.7, @nuxt/eslint@1.4.0\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.2\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/r7ryl3\n\n### Description\n\nI recently upgrade to NuxtUI 3.1.2 (from 3.0.1) and It's impossible (or I don't know) how to deal with custom type for `InputMenu`, I got some types issues on `label-key`, `v-model`, `items`, `slots` as you can see in my reproduction.\n\n### Additional context\n\n\n\n### Logs\n\n```shell-script\n\n```",[3176,3177,3178],{"name":3146,"color":3147},{"name":3149,"color":3150},{"name":3152,"color":3153},4182,"Custom type with InputMenu","2025-05-19T12:22:28Z","https://github.com/nuxt/ui/issues/4182",0.7028274,{"description":3185,"labels":3186,"number":3194,"owner":3155,"repository":3156,"state":3195,"title":3196,"updated_at":3197,"url":3198,"score":3199},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.12.0\n- Nuxt Version: 3.15.4\n- CLI Version: 3.21.1\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@9.15.2\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\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://codesandbox.io/p/devbox/bug-report-ubutton-8st7kw\n\n### Description\n\nWhen I throw an error within the click event of `UButton`, the `NuxtErrorBoundary` component does not catch the error as expected. However, if I use a standard `\u003Cbutton>` tag instead of `UButton`, the error is caught correctly by the NuxtErrorBoundary.\n\n### Additional context\n\n\n\n\n### Logs\n\n```shell-script\n\n```",[3187,3188,3189,3192],{"name":3146,"color":3147},{"name":3149,"color":3150},{"name":3190,"color":3191},"closed-by-bot","ededed",{"name":3193,"color":3191},"stale",3237,"closed","[UButton] is not working with NuxtErrorBoundary","2025-06-18T09:02:19Z","https://github.com/nuxt/ui/issues/3237",0.6739221,{"description":3201,"labels":3202,"number":3207,"owner":3155,"repository":3156,"state":3195,"title":3208,"updated_at":3209,"url":3210,"score":3211},"### Environment\n\n- Operating System: Linux\n- Node Version: v22.13.1\n- Nuxt Version: 3.16.1\n- CLI Version: 3.23.1\n- Nitro Version: 2.11.8\n- Package Manager: yarn@4.8.1\n- Builder: -\n- User Config: compatibilityDate, imports, components, devtools, modules, css, fonts, ui\n- Runtime Modules: @nuxt/eslint@1.2.0, @nuxt/fonts@0.11.0, @nuxt/image@1.10.0, @nuxt/test-utils@3.17.2, @nuxt/ui@3.0.2\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.2\n\n### Reproduction\n\nhttps://github.com/nuxt/ui/blob/v3/src/theme/button.ts\n\n### Description\n\nI want to customize a button variant by `size`, `trailing` and `square` params. It works, but the types are broken.\n\nThe line in the `compoundVariants`:\n`{ size: 'md', trailing: true, square: false, class: { trailingIcon: '-mr-1' } }`\n\nErrors:\n`Type '{ trailingIcon: string; }' is not assignable to type 'string'`\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3203,3204,3205,3206],{"name":3146,"color":3147},{"name":3149,"color":3150},{"name":3152,"color":3153},{"name":3193,"color":3191},3738,"Incorrect compound button variants types","2025-08-12T11:07:19Z","https://github.com/nuxt/ui/issues/3738",0.6850435,{"description":3213,"labels":3214,"number":3220,"owner":3155,"repository":3156,"state":3195,"title":3221,"updated_at":3222,"url":3223,"score":3224},"### Environment\n\n- Operating System: Darwin\n- Node Version: v21.7.3\n- Nuxt Version: 3.16.2\n- CLI Version: 3.24.1\n- Nitro Version: 2.11.8\n- Package Manager: npm@10.5.0\n- Builder: -\n- User Config: extends, components, devtools, googleFonts, modules, runtimeConfig, compatibilityDate, typescript, build, vite, devServer, app, colorMode, spaLoadingTemplate, bugsnag\n- Runtime Modules: @nuxtjs/google-fonts@3.2.0, @nuxt/ui@3.0.2, nuxt-bugsnag@8.4.0, @nuxt/devtools@2.3.2\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.2\n\n### Reproduction\n\n\n\n### Description\n\nI try to make a design with position absolute. It works correctly when I use `solid` colors. But if I use `soft` or `subtle` variants it displays the background line anyway. Also, the color varies depending on the background color.\n\nIs there a way to make it work with those colors? \n\nMaybe the solution is to create variables for those colors instead of using opacity.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3215,3216,3217,3218,3219],{"name":3146,"color":3147},{"name":3149,"color":3150},{"name":3152,"color":3153},{"name":3190,"color":3191},{"name":3193,"color":3191},3863,"Button color may not work properly in position absolute","2025-06-18T09:01:10Z","https://github.com/nuxt/ui/issues/3863",0.6858109,{"description":3226,"labels":3227,"number":3235,"owner":3155,"repository":3155,"state":3195,"title":3236,"updated_at":3237,"url":3238,"score":3239},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v16.14.2\r\n- Nuxt Version: 3.6.5\r\n- Nitro Version: 2.5.2\r\n- Package Manager: yarn@3.2.0\r\n- Builder: vite\r\n- User Config: alias, app, components, css, devtools, experimental, extends, i18n, modules, nitro, pinia, router, runtimeConfig, tailwindcss, telemetry, veeValidate, vite, vue\r\n- Runtime Modules: @pinia/nuxt@^0.4.11, @nuxtjs/stylelint-module@^5.1.0, @nuxtjs/i18n@8.0.0-beta.13, @vueuse/nuxt@10.2.1, @vee-validate/nuxt@^4.9.6, @nuxtjs/tailwindcss@^6.8.0\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Reproduction\r\nI provide a minimal reproduction\r\n\r\nhttps://stackblitz.com/edit/github-brcyvh?file=pages%2Findex.vue\r\n\r\n### Describe the bug\r\n\r\nI'm using a plugin `$bp` that use `useBreakpoints` from `vueuse` under the hood https://vueuse.org/core/useBreakpoints\r\n\r\nMy goal is to change the `size` of the component `NButton` based on a boolean : `$bp.isLapM`.\r\n\r\nWhen we refresh the page, we see that the `btnSize` inside the button is updated but the class still `-sm`.\r\nIf I resize my window, both are updated\r\n\r\nWe are migrating our app to Nuxt 3, and on Nuxt 2 we didn't have this issue... :cry: \r\n\r\nI'm a doing something wrong about this ? \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_",[3228,3231,3232],{"name":3229,"color":3230},"3.x","29bc7f",{"name":3166,"color":3167},{"name":3233,"color":3234},"upstream","E8A36D",22722,"class / style attribute does not update on node mismatch","2023-08-23T10:38:59Z","https://github.com/nuxt/nuxt/issues/22722",0.68956727,{"description":3241,"labels":3242,"number":3248,"owner":3155,"repository":3156,"state":3195,"title":3249,"updated_at":3250,"url":3251,"score":3252},"### Environment\n\n- Operating System: `Windows_NT`\n- Node Version: `v22.11.0`\n- Nuxt Version: `3.16.2`\n- CLI Version: `3.24.1`\n- Nitro Version: `2.11.9`\n- Package Manager: `pnpm@9.12.2`\n- Builder: `-`\n- User Config: `future`, `compatibilityDate`, `devtools`, `modules`, `css`\n- Runtime Modules: `@nuxt/ui@3.0.2`, `@vueuse/nuxt@13.1.0`, `@vue-macros/nuxt@3.0.0-beta.8`\n- Build Modules: `-`\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.16.2\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/new-star-4x9vqf\n\njust run the repo check in terminal for warnings\n\n### Description\n\nhi, \n\ni am getting type warnings like this for all components, every thing works fine, i am not even using typescript in my Vue SFC\n\n```\n WARN warning: unplugin-vue-better-define TransformError: Cannot resolve TS type: ButtonProps 11:01:47 pm \n Plugin: unplugin-vue-better-define\n File: F:/node-local/nuxt-apps/nuxt-with-nuxt-ui/node_modules/.pnpm/@nuxt+ui@3.0.2_@babel+parser@7.27.0_db0@0.3.1_embla-carousel@8.6.0_ioredis@5.6.1_magicast@0.3_eiavxvfntsids5hrxwa6ymgw74/node_modules/@nuxt/ui/dist/runtime/components/Button.vue\n\n\n WARN warning: unplugin-vue-better-define TransformError: Cannot resolve TS type: LinkProps 11:01:46 pm \n Plugin: unplugin-vue-better-define\n File: F:/node-local/nuxt-apps/nuxt-with-nuxt-ui/node_modules/.pnpm/@nuxt+ui@3.0.2_@babel+parser@7.27.0_db0@0.3.1_embla-carousel@8.6.0_ioredis@5.6.1_magicast@0.3_eiavxvfntsids5hrxwa6ymgw74/node_modules/@nuxt/ui/dist/runtime/components/Link.vue\n\n\n WARN Cannot resolve TS type: LinkProps 11:01:46 pm \n\n at /F:/node-local/nuxt-apps/nuxt-with-nuxt-ui/node_modules/.pnpm/@vue-macros+api@3.0.0-beta.8_vue@3.5.13_typescript@5.8.3_/node_modules/@vue-macros/api/dist/index.js:1308:13 \n\n\n```\n\n### Additional context\n\nif i remove the `@vue-macros/nuxt` plugin all warnings gone\n\n### Logs\n\n```shell-script\n\n```",[3243,3244,3245,3246,3247],{"name":3146,"color":3147},{"name":3149,"color":3150},{"name":3152,"color":3153},{"name":3190,"color":3191},{"name":3193,"color":3191},3909,"conflict with @vue-macros/nuxt 'Type warnings'","2025-08-20T02:09:00Z","https://github.com/nuxt/ui/issues/3909",0.690785,{"description":3254,"labels":3255,"number":3264,"owner":3155,"repository":3155,"state":3195,"title":3265,"updated_at":3266,"url":3267,"score":3268},"### Environment\r\n\r\n- Operating System: `Darwin`\r\n- Node Version: `v18.16.0`\r\n- Nuxt Version: `3.6.5`\r\n- Nitro Version: `2.5.2`\r\n- Package Manager: `pnpm@8.6.11`\r\n- Builder: `vite`\r\n- User Config: `extends`, `telemetry`\r\n- Runtime Modules: `-`\r\n- Build Modules: `-`\r\n\r\n### Reproduction\r\n\r\n### Create component in our Nuxt layer\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cbutton :class=\"[$style.root]\">\r\n \u003Cspan :class=\"$style.title\">TEST\u003C/span>\u003Cslot />\r\n \u003C/button>\r\n\u003C/template>\r\n\r\n\u003Cstyle module>\r\n.root {\r\n display: flex;\r\n background-color: black;\r\n}\r\n.title {\r\n color: rgb(51, 48, 211);\r\n}\r\n\u003C/style>\r\n```\r\n```ts\r\nexport default defineNuxtConfig({\r\n extends: [\"our-same-layer\"],\r\n});\r\n```\r\n\u003Cimg width=\"1641\" alt=\"image\" src=\"https://github.com/nuxt/nuxt/assets/52721424/37b8fd5c-40bf-40a2-9178-c7dbb6a8c2dd\">\r\n\r\n### But if we run only layer, we get the correct result\r\n\u003Cimg width=\"1643\" alt=\"image\" src=\"https://github.com/nuxt/nuxt/assets/52721424/dbfb15e0-5180-43b1-8b07-76a86bb445f4\">\r\n\r\n\r\n\r\n### Describe the bug\r\n\r\nDuplicate stylesheet in dev when using Nuxt Layer..\r\n### Additional context\r\n\r\nI tested pure css, it's reproduced on css module and pure css\r\n```vue\r\n\u003Ctemplate>\r\n \u003Cbutton class=\"root\">\r\n \u003Cspan class=\"title\">TEST\u003C/span>\u003Cslot />\r\n \u003C/button>\r\n\u003C/template>\r\n\r\n\u003Cstyle>\r\n.root {\r\n display: flex;\r\n background-color: black;\r\n}\r\n.title {\r\n color: rgb(51, 48, 211);\r\n}\r\n\u003C/style>\r\n```\r\n\u003Cimg width=\"1642\" alt=\"image\" src=\"https://github.com/nuxt/nuxt/assets/52721424/422ddc69-a372-4255-a7a0-b33fdf99c54a\">\r\n\r\n### Logs\r\n\r\n_No response_",[3256,3257,3258,3261],{"name":3229,"color":3230},{"name":3146,"color":3147},{"name":3259,"color":3260},"🔨 p3-minor","FBCA04",{"name":3262,"color":3263},"layers","006B75",22658,"Duplicate stylesheet in dev when using Nuxt Layer","2023-09-11T13:39:19Z","https://github.com/nuxt/nuxt/issues/22658",0.69105417,{"description":3270,"labels":3271,"number":3275,"owner":3155,"repository":3156,"state":3195,"title":3276,"updated_at":3277,"url":3278,"score":3279},"### 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```",[3272,3273,3274],{"name":3146,"color":3147},{"name":3149,"color":3150},{"name":3152,"color":3153},3987,"[NavigationMenu] Regression - Update","2025-05-02T09:52:45Z","https://github.com/nuxt/ui/issues/3987",0.6911443,["Reactive",3281],{},["Set"],["ShallowReactive",3284],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fXbCMNoJPC_3Zf5KXNTtLATVdK03lqZ82s9s9FcTZjIA":-1},"/nuxt/ui/3466"]