\n\n\u003Cimg width=\"712\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/0a9f273f-cb27-4824-ac2f-6497980294ec\" />\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2856,2859,2862],{"name":2857,"color":2858},"bug","d73a4a",{"name":2860,"color":2861},"v3","49DCB8",{"name":2863,"color":2864},"triage","ffffff",3558,"nuxt","ui","open","Padding and Sizing on UAvatar","2025-03-13T13:44:50Z","https://github.com/nuxt/ui/issues/3558",0.78082055,{"description":2874,"labels":2875,"number":2881,"owner":2866,"repository":2867,"state":2868,"title":2882,"updated_at":2883,"url":2884,"score":2885},"### Description\n\nI propose the addition of a UTheme component which would allow scoped theming of components to reduce repeated styling that's error prone when refactoring.\n\n## Example\nThe Dashboard template has a bunch of forms that have horizontal form fields (label left, input right).\n\nBefore:\n```html\n\u003CUForm ...>\n \u003CUFormField ... class=\"flex max-sm:flex-col justify-between items-center gap-4\">\n ...\n \u003CUFormField>\n \u003CUFormField ... class=\"flex max-sm:flex-col justify-between items-center gap-4\">\n ...\n \u003CUFormField>\n\u003CUForm/>\n```\n\nAfter:\n```html\n\u003C!-- `ui` prop is the same as `app.config.ts` theming config\n\u003CUTheme :ui=\"{\n formField: {\n\t slots: {\n\t root: \"flex max-sm:flex-col justify-between items-center gap-4\",\n\t},\n },\n}\">\n \u003CUForm ...>\n \u003CUFormField ...>\n ...\n \u003CUFormField>\n \u003CUFormField ...>\n ...\n \u003CUFormField>\n \u003CUForm/>\n\u003C/UTheme>\n```\n\n## Benefits\n- Easily componentized. I could create a `AppForm` component which contains the `UTheme` usage with a slot, so now its 1 line to get the exact theming that I want. This makes consistency across the app really easy.\n- Nestable - If implemented with provide/inject, you could have an infinite number of UTheme's nested and it would take the latest one\n\n## Implementation\nI'd tentatively be willing to implement this. My approach would be:\n- Create `UTheme`, it should have a `ui` and `uiPro` prop, each of which take the same type as the `app.config.ts`\n- `provide()` those props\n- `inject()` those props into each component and merge with passed in `ui` field.\n- Theme priority order should be:\n 1. `ui` prop passed to component\n 2. `ui` prop coming from UTheme component\n 3. `ui` config coming from `app.config.ts`\n\n### Additional context\n\n_No response_",[2876,2879,2880],{"name":2877,"color":2878},"enhancement","a2eeef",{"name":2860,"color":2861},{"name":2863,"color":2864},4250,"UTheme component","2025-05-28T22:24:36Z","https://github.com/nuxt/ui/issues/4250",0.79083675,{"description":2887,"labels":2888,"number":2894,"owner":2866,"repository":2867,"state":2868,"title":2895,"updated_at":2896,"url":2897,"score":2898},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nwhen use UHeader of nuxt pro ,it does support a link slot that i can customize ,because when i use nuxti18n ,i must use the \u003CNuxtLinkLocale to=\"/\">\u003C/NuxtLinkLocale> provided by nuxti18n to skip routes in multi-language environments\n\n### Additional context\n\n_No response_",[2889,2890,2893],{"name":2877,"color":2878},{"name":2891,"color":2892},"pro","5BD3CB",{"name":2863,"color":2864},2765,"UHeader and UFooter doesnt support a link slot that users can customize","2025-01-13T11:17:00Z","https://github.com/nuxt/ui/issues/2765",0.79423404,{"description":2900,"labels":2901,"number":2905,"owner":2866,"repository":2867,"state":2906,"title":2907,"updated_at":2908,"url":2909,"score":2910},"### Environment\n\nOperating System: mac os\nNode Version: v22.14.0\nLaravel Version: 12.12.0\nNitro Version: -\nPackage Manager: bun 1.2.11\nBuilder: -\nUser Config: -\nRuntime Modules: -\nBuild Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nVue\n\n### Version\n\nv3.1.1\n\n### Reproduction\n\nN/A\n\n### Description\n\nI'm using the example from the documentation for implementing a login and the button behaves like a link. I've already tried as=\"button\" and it doesn't work.\n\n```\n\u003Cscript setup lang=\"ts\">\nimport * as z from 'zod'\nimport type { FormSubmitEvent } from '@nuxt/ui'\n\nconst schema = z.object({\n email: z.string().email('Invalid email'),\n password: z.string().min(8, 'Must be at least 8 characters')\n})\n\ntype Schema = z.output\u003Ctypeof schema>\n\nconst state = reactive\u003CPartial\u003CSchema>>({\n email: undefined,\n password: undefined\n})\n\nconst toast = useToast()\nasync function onSubmit(event: FormSubmitEvent\u003CSchema>) {\n toast.add({ title: 'Success', description: 'The form has been submitted.', color: 'success' })\n console.log(event.data)\n}\n\u003C/script>\n\u003Ctemplate>\n \u003CUForm :schema=\"schema\" :state=\"state\" class=\"space-y-4\" @submit=\"onSubmit\">\n \u003CUFormField label=\"Email\" name=\"email\">\n \u003CUInput v-model=\"state.email\" />\n \u003C/UFormField>\n \u003CUFormField label=\"Password\" name=\"password\">\n \u003CUInput v-model=\"state.password\" type=\"password\" />\n \u003C/UFormField>\n \u003CUButton type=\"submit\">\n Submit\n \u003C/UButton>\n \u003C/UForm>\n\u003C/template>\n```\n\n### Additional context\n\n\n\n### Logs\n\n```shell-script\n\n```",[2902,2903,2904],{"name":2857,"color":2858},{"name":2860,"color":2861},{"name":2863,"color":2864},4095,"closed","UButton works as a link in Inertia","2025-05-07T08:12:17Z","https://github.com/nuxt/ui/issues/4095",0.7677509,{"labels":2912,"number":2919,"owner":2866,"repository":2866,"state":2906,"title":2920,"updated_at":2921,"url":2922,"score":2923},[2913,2916],{"name":2914,"color":2915},"3.x","29bc7f",{"name":2917,"color":2918},"pending triage","E99695",13911,"Styles of unused components are being imported ","2023-01-19T17:09:15Z","https://github.com/nuxt/nuxt/issues/13911",0.76919466,{"description":2925,"labels":2926,"number":2934,"owner":2866,"repository":2867,"state":2906,"title":2935,"updated_at":2936,"url":2937,"score":2938},"On login page, i have UForm with validation. when clicking on register modal(UModal with #content slot) included Uform with validation, submit button doesn't trigger. if i focus on input, validation works automatically. when clicking submit button after filling all required fields, there are no error on validation(logged in the end of validation function). But no response(also logged in submit function) in submit function. how to fix it? i can't get it?",[2927,2930,2933],{"name":2928,"color":2929},"question","d876e3",{"name":2931,"color":2932},"needs reproduction","CB47CF",{"name":2860,"color":2861},3674,"can't handle submit button","2025-04-30T13:25:36Z","https://github.com/nuxt/ui/issues/3674",0.78392625,{"description":2940,"labels":2941,"number":2943,"owner":2866,"repository":2867,"state":2906,"title":2944,"updated_at":2945,"url":2946,"score":2947},"### Environment\r\n\r\n```\r\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v21.6.1\r\n- Nuxt Version: 3.13.1\r\n- CLI Version: 3.13.1\r\n- Nitro Version: 2.9.7\r\n- Package Manager: bun@1.1.26\r\n- Builder: -\r\n- User Config: compatibilityDate, devtools, modules\r\n- Runtime Modules: @nuxt/ui@2.18.4\r\n- Build Modules: -\r\n------------------------------\r\n```\r\n\r\n### Version\r\n\r\n2.18.4\r\n\r\n### Reproduction\r\n\r\nhttps://github.com/MickL/nuxtui-colors-bug\r\n\r\n### Description\r\n\r\nWhen the color prop is created dynamically, some css styles are not generated, especially for subtle and soft variants:\r\n\r\nFor example, `subtle` badges dont have correct border color and the background colors are missing:\r\n\r\n\u003Cimg width=\"237\" alt=\"Bildschirmfoto 2024-09-14 um 18 47 17\" src=\"https://github.com/user-attachments/assets/a3dd5d73-02ae-43d5-96ff-3ef67342cb1d\">\r\n\r\nIt should look like this:\r\n\r\n\u003Cimg width=\"236\" alt=\"Bildschirmfoto 2024-09-14 um 18 46 37\" src=\"https://github.com/user-attachments/assets/7fd2bd00-f2c2-40ed-a7f8-23ec07266d29\">\r\n\r\nIn my reproduction repo I used a table:\r\n```\r\n \u003CUTable :columns :rows>\r\n \u003Ctemplate #colors-data=\"{row}\">\r\n \u003CUBadge :color=\"row.color\" variant=\"subtle\">Subtle Badge\u003C/UBadge>\r\n \u003CUButton :color=\"row.color\" variant=\"soft\">Soft Button\u003C/UButton>\r\n \u003C/template>\r\n \u003C/UTable>\r\n```",[2942],{"name":2857,"color":2858},2199,"Missing tailwind classes for dynamic colors","2024-09-23T10:31:05Z","https://github.com/nuxt/ui/issues/2199",0.789594,{"description":2949,"labels":2950,"number":2953,"owner":2866,"repository":2954,"state":2906,"title":2955,"updated_at":2956,"url":2957,"score":2958},"Blocked by nuxtlabs/nuxt.com#617",[2951],{"name":2877,"color":2952},"1ad6ff",620,"nuxt.com","Replace `primary` buttons by `gradient` variant","2022-06-15T16:59:48Z","https://github.com/nuxt/nuxt.com/issues/620",0.7898833,{"description":2960,"labels":2961,"number":2953,"owner":2866,"repository":2970,"state":2906,"title":2971,"updated_at":2972,"url":2973,"score":2958},"After update `\"nuxt\": \"3.8.0\"` to `3.8.1` my test started to fail:\r\n```ts\r\nimport { describe, expect, it, vi } from 'vitest'\r\nimport { mountSuspended } from 'vitest-environment-nuxt/utils'\r\nimport type { DisplayInstance } from 'vuetify'\r\nimport * as vuetify from 'vuetify'\r\nimport GuestRegisterBtn from '~/components/main/header/GuestRegisterBtn.vue'\r\nimport * as nuxt from 'nuxt/app'\r\n\r\ndescribe('Guest Register button test', () => {\r\n const navigateToSPY = vi.spyOn(nuxt, 'navigateTo').mockReturnValue(Promise.resolve())\r\n\r\n it('check login guest button for mobile in header', async () => {\r\n const component = await mountSuspended(GuestRegisterBtn)\r\n const buttonWide = component.find('button')\r\n\r\n // This is still working\r\n const classes: string[] = buttonWide.classes()\r\n expect(classes).contains('v-btn--variant-plain')\r\n // ... other working asserts\r\n\r\n await buttonWide.trigger('click')\r\n // This does not work after update 👇🏻👇🏻👇🏻👇🏻 ❌\r\n expect(navigateToSPY).toHaveBeenCalledOnce()\r\n expect(navigateToSPY).toBeCalledWith('/login?t=1') \r\n })\r\n```",[2962,2965,2967],{"name":2963,"color":2964},"vitest-environment","b60205",{"name":2931,"color":2966},"DE7793",{"name":2968,"color":2969},"closed-by-bot","ededed","test-utils","trigger('click') stopped working after Nuxt update from `3.8.0` to `3.8.1`","2024-09-05T12:34:30Z","https://github.com/nuxt/test-utils/issues/620",{"description":2975,"labels":2976,"number":2979,"owner":2866,"repository":2866,"state":2906,"title":2980,"updated_at":2981,"url":2982,"score":2983},"### Describe the feature\n\nI'm currently using a component library that has a BaseButton.\r\n\r\nThis button changes it's implementation based on the framework where the ui library is used.\r\n\r\nEx.: if the library is used in Nuxt, it should use **nuxt-link**, otherwise **router-link** or even plain **button**\r\n\r\n```\r\n\u003Ctemplate>\r\n \u003Cnuxt-link v-if=\"nuxt && to\" :to=\"to\" class=\"base-button button-primary\" :disabled=\"disabled\">\r\n \u003Cslot/>\r\n \u003C/nuxt-link>\r\n \u003Crouter-link v-else-if=\"!nuxt && to\" :to=\"to\" class=\"base-button\" :disabled=\"disabled\">\r\n \u003Cslot/>\r\n \u003C/router-link>\r\n \u003Cbutton v-else type=\"button\" @click=\"$emit('click')\" class=\"base-button\" :disabled=\"disabled\">\r\n \u003Cslot/>\r\n \u003C/button>\r\n\u003C/template>\r\n```\r\n\r\nSee https://stackoverflow.com/questions/74593611/detect-in-vue-component-if-its-used-in-nuxt-3-or-somewhere-else\r\n\r\n**This worked perfectly in Nuxt 2** because there was a global nuxt object you could use to check against, but this does not exist anymore.\r\n\r\nI've seen there is a **__NUXT__** property in the browser, but you can't address the window object when using SSR.\r\n\r\nAlso, process.env.NUXT_VITE_NODE_OPTIONS can't be used to check against in the browser.\r\n\r\n**There needs to be a way to detect the framework from within components without requiring imports from Nuxt, that would fail when used outside of Nuxt.**\n\n### Additional information\n\n- [ ] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2977,2978],{"name":2914,"color":2915},{"name":2917,"color":2918},19698,"Way to detect Nuxt framework from library during SSR / CSR","2024-08-13T13:19:34Z","https://github.com/nuxt/nuxt/issues/19698",0.79181224,["Reactive",2985],{},["Set"],["ShallowReactive",2988],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fWz46stOUClb-c8JBf0WUF5fTdza2nz3rYNm6N7AvsI4":-1},"/nuxt/ui/4241"]