\n \u003C/UFormField>\n\n \u003CUFormField label=\"Last name\" name=\"familyName\" required>\n \u003CUInput v-model=\"state.familyName\" />\n \u003C/UFormField>\n \u003C/template>\n\n \u003Ctemplate #footer>\n \u003CUButton label=\"Save\" type=\"submit\" />\n \u003C/template>\n \u003C/UModal>\n \u003C/UForm>\n\u003C/template>\n```",[2902,2905],{"name":2903,"color":2904},"question","d876e3",{"name":2906,"color":2907},"v3","49DCB8",4401,"nuxt","ui","open","How to use a UForm within a UModal with footer?","2025-06-26T12:51:18Z","https://github.com/nuxt/ui/issues/4401",0.7457853,{"description":2917,"labels":2918,"number":2926,"owner":2909,"repository":2910,"state":2911,"title":2927,"updated_at":2928,"url":2929,"score":2930},"### Description\n\nHello 👋,\n\nI'm building a dashboard and I often need to put a table in a modal. Currently, I have to manually change the style of the modal and the table to match perfectly.\n\nSee this example: https://stackblitz.com/edit/github-2aatsynx?file=app%2Fpages%2Findex.vue\n\nTo solve this, I have to solution in mind:\n\n1. props to change the table and modal class;\n2. injection key to tell the table that it is in a modal.\n\nTo be honest, I don't like the second one as it removes a lot of flexibility.\n\nThe first one will introduce some new variants to all customization globally which is better than the current manual customization. For a Modal component, a new `table` (or `body-padding` or something even more generic but used to remove the padding from the body) props and a `modal` props for the table to align the internal padding.\n\nMaybe there is more solutions to this!\n\n### Additional context\n\n_No response_",[2919,2922,2923],{"name":2920,"color":2921},"enhancement","a2eeef",{"name":2906,"color":2907},{"name":2924,"color":2925},"triage","ffffff",4366,"Simplify table usage in modals","2025-06-17T07:42:04Z","https://github.com/nuxt/ui/issues/4366",0.7503323,{"description":2932,"labels":2933,"number":2937,"owner":2909,"repository":2910,"state":2911,"title":2938,"updated_at":2939,"url":2940,"score":2941},"### 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_",[2934,2935,2936],{"name":2920,"color":2921},{"name":2906,"color":2907},{"name":2924,"color":2925},4250,"UTheme component","2025-05-28T22:24:36Z","https://github.com/nuxt/ui/issues/4250",0.76811624,{"description":2943,"labels":2944,"number":2947,"owner":2909,"repository":2910,"state":2948,"title":2949,"updated_at":2950,"url":2951,"score":2952},"### Description\n\nCan the width of the modal be customized? Currently, I set it globally through the `app\\assets\\css\\main.css` file. However, if I only want to modify the width of a single component, I can't find the place to do it. I tried adding `w-[1000px]` to `UModal`, but it didn't work.\n\n\n\n\n",[2945,2946],{"name":2903,"color":2904},{"name":2906,"color":2907},3041,"closed","Can the width of the modal be customized?","2025-01-08T09:31:14Z","https://github.com/nuxt/ui/issues/3041",0.72951746,{"description":2954,"labels":2955,"number":2961,"owner":2909,"repository":2910,"state":2948,"title":2962,"updated_at":2963,"url":2964,"score":2965},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v18.20.8`\n- Nuxt Version: `-`\n- CLI Version: `3.25.1`\n- Nitro Version: `-`\n- Package Manager: `npm@10.8.2`\n- Builder: `-`\n- User Config: `-`\n- Runtime Modules: `-`\n- Build Modules: `-`\n\n### Is this bug related to Nuxt or Vue?\n\nVue\n\n### Version\n\nv3.1.3\n\n### Reproduction\n\nhttps://codesandbox.io/p/sandbox/modal-close-not-working-kc99r3\n\n### Description\n\nThe scoped slots `content`, `header`, `body` and `footer` in UModal are supposed to receive an object containing a close-method, as per [the docs](https://ui.nuxt.com/components/modal#slots). They do not; only an empty object is received. Due to this, the Cancel-button from the [footer-example](https://ui.nuxt.com/components/modal#with-footer-slot) in the docs does not work. Inexplicably, the example in the docs works 🤔\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2956,2959,2960],{"name":2957,"color":2958},"bug","d73a4a",{"name":2906,"color":2907},{"name":2924,"color":2925},4266,"Modal content, header, body and footer slots not receiving the close method","2025-06-01T06:07:09Z","https://github.com/nuxt/ui/issues/4266",0.74915725,{"description":2967,"labels":2968,"number":2975,"owner":2909,"repository":2909,"state":2948,"title":2976,"updated_at":2977,"url":2978,"score":2979},"Hello, I need some help here. \r\n\r\nI'm using Nuxt js with Storefront Ui components and I got this error.\r\n\r\n**vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: \u003CSfHeader> - did you register the component correctly? For recursive components, make sure to provide the \"name\" option.\r\n\r\nfound in**\r\n\r\n---> \u003CHeader> at components/Header.vue\r\n \u003CLayouts/default.vue> at layouts/default.vue\r\n \u003CRoot>\r\n\r\ncomponents- Header.js\r\n```\r\n\u003Ctemplate>\r\n \u003CSfHeader\r\n :title=\"title\"\r\n :active-icon=\"activeIcon\"\r\n :search-placeholder=\"searchPlaceholder\"\r\n :search-value=\"searchValue\"\r\n :cart-icon=\"cartIcon\"\r\n :wishlist-icon=\"wishlistIcon\"\r\n :is-sticky=\"isSticky\"\r\n :account-icon=\"accountIcon\"\r\n :cart-items-qty=\"cartItemsQty\"\r\n :wishlist-items-qty=\"wishlistItemsQty\"\r\n @click:cart=\"alert('@click:cart')\"\r\n @click:wishlist=\"alert('@click:wishlist')\"\r\n @click:account=\"alert('@click:account')\"\r\n @change:search=\"searchValue = $event\"\r\n >\r\n \u003Ctemplate #navigation>\r\n \u003CSfHeaderNavigationItem v-for=\"item in navigation\" :key=\"item\">\r\n \u003Ctemplate slot=\"desktop-navigation-item\">\r\n \u003CSfLink href=\"#\">{{ item }}\u003C/SfLink>\r\n \u003C/template>\r\n \u003C/SfHeaderNavigationItem>\r\n \u003C/template>\r\n \u003C/SfHeader>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\nimport { SfHeader, SfLink } from \"@storefront-ui/vue\";\r\n\r\nexport default {\r\n name: 'Header',\r\n components: {\r\n SfHeader,\r\n SfLink,\r\n },\r\n data() {\r\n return {\r\n isMobile: false,\r\n navigation: [\"women\", \"man\", \"kids\"],\r\n searchValue: \"\",\r\n title: \"\",\r\n activeIcon: \"account\",\r\n isSticky: true,\r\n searchPlaceholder: \"Search for items\",\r\n cartIcon: \"empty_cart\",\r\n wishlistIcon: \"heart\",\r\n accountIcon: \"profile\",\r\n cartItemsQty: \"0\",\r\n wishlistItemsQty: \"0\",\r\n };\r\n }\r\n};\r\n\u003C/script>\r\n```\r\n\r\nand in layout folder I have default file \r\n\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv>\r\n \u003CHeader />\r\n \u003CNuxt />\r\n \u003CFooter/>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\nimport Footer from \"~/components/Footer\";\r\nimport Header from \"~/components/Header\";\r\n\r\nexport default {\r\n components: {\r\n Footer,\r\n Header\r\n }\r\n}\r\n\u003C/script>\r\n\r\n\u003Cstyle>\r\n body {\r\n margin: 0;\r\n }\r\n\u003C/style>\r\n```\r\n\r\n\r\n \"@nuxt/typescript-runtime\": \"^2.0.0\",\r\n \"@nuxtjs/axios\": \"^5.12.5\",\r\n \"@storefront-ui/vue\": \"^0.9.1\",\r\n \"axios\": \"^0.21.1\",\r\n \"core-js\": \"^3.6.5\",\r\n \"js-cookie\": \"^2.2.1\",\r\n \"nuxt\": \"^2.14.6\"",[2969,2972],{"name":2970,"color":2971},"pending triage","E99695",{"name":2973,"color":2974},"2.x","d4c5f9",8643,"Unknown custom element: \u003CSfHeader> - did you register the component correctly?","2023-01-22T15:38:40Z","https://github.com/nuxt/nuxt/issues/8643",0.75569665,{"description":2981,"labels":2982,"number":2993,"owner":2909,"repository":2910,"state":2948,"title":2994,"updated_at":2995,"url":2996,"score":2997},"### Description\n\nIf I open one of these 3 (modal, sidebar, dropdown) nuxt ui is adding styles to the body which cause strange layout behaviors.\nI would like to costumize these or modify. Thats what currently gets added when opening a modal and causes problems\n```\n\u003Cbody style=\"padding-right: 9px; margin-right: 0px; --scrollbar-width: 9px; overflow: hidden; pointer-events: none;\">\n```\n\nIs there a way to do that right now?",[2983,2984,2985,2988,2991],{"name":2903,"color":2904},{"name":2906,"color":2907},{"name":2986,"color":2987},"reka-ui","56d799",{"name":2989,"color":2990},"closed-by-bot","ededed",{"name":2992,"color":2990},"stale",3078,"Scrolllock when opening modal, dropdown, sidebar","2025-06-18T09:02:37Z","https://github.com/nuxt/ui/issues/3078",0.75708175,{"description":2999,"labels":3000,"number":3007,"owner":2909,"repository":2910,"state":2948,"title":3008,"updated_at":3009,"url":3010,"score":3011},"### Environment\n\n\n```\n\"@nuxt/ui\": \"^3.1.3\",\n\"@nuxt/ui-pro\": \"^3.1.3\",\n\"nuxt\": \"^3.17.5\",\n```\n\n\n```\nui: {\n prefix: 'Custom',\n},\n```\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.17.5\n\n### Reproduction\n\nIf I simply switch out the `CustomHeader` to a basic `header` element and remove the `template` tags the nested CustomNavigationMenu works and I'm not getting unable to resolve component warnings.\n\n```\n\u003Cscript setup lang=\"ts\">\nimport type { NavigationMenuItem } from '@nuxt/ui'\n\ndefineProps\u003C{\n links: NavigationMenuItem[]\n}>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003CCustomHeader>\n \u003Ctemplate #left>\n \u003CClientOnly>\n \u003CNuxtLink to=\"/\">\n \u003CBaseLogo />\n \u003C/NuxtLink>\n \u003C/ClientOnly>\n \u003C/template>\n\n \u003CCustomNavigationMenu :items=\"links\" variant=\"link\" />\n\n \u003Ctemplate #right>\n \u003CThemePicker />\n \u003C/template>\n\n \u003Ctemplate #body>\n \u003CCustomNavigationMenu\n orientation=\"vertical\"\n :items=\"links\"\n />\n \u003C/template>\n \u003C/CustomHeader>\n\u003C/template>\n```\n\nerrors:\n[Vue warn]: Failed to resolve component: UButton\nIf this is a native custom element, make sure to exclude it from component resolution via ...\n[Vue warn]: Failed to resolve component: UContainer\nIf this is a native custom element, make sure to exclude it from component resolution via ...\n[Vue warn]: Failed to resolve component: ULink\nIf this is a native custom element, make sure to exclude it from component resolution via ..\n\n### Description\n\nIf i'm setting a custom prefix in the `ui: {}` config object for the components the UHeader component is unable to resolve its nested components.\n\n### Additional context\n\nI think i've seen issues like this previously also posted, and maybe its some import that is missing.\n\n### Logs\n\n```shell-script\n\n```",[3001,3002,3003,3006],{"name":2957,"color":2958},{"name":2906,"color":2907},{"name":3004,"color":3005},"nuxt/ui-pro","00dc82",{"name":2924,"color":2925},4371,"custom prefix not working when set with UHeader","2025-06-18T09:09:47Z","https://github.com/nuxt/ui/issues/4371",0.7582938,{"description":3013,"labels":3014,"number":3018,"owner":2909,"repository":2910,"state":2948,"title":3019,"updated_at":3020,"url":3021,"score":3022},"### Environment\n\nOperating System: Darwin\nNode Version: v20.18.0\nNuxt Version: 3.14.1592\nPackage Manager: pnpm@9.14.4\nBuilder: -\nUser Config: default\nRuntime Modules: @nuxt/ui@3.0.0-alpha.10\nBuild Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.10\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/nifty-ride-lx6qlg\n\n### Description\n\nThe same problem occurs in official documents. https://ui3.nuxt.dev/components/toast\n1. Open the Toast component of the document.\n2. Click the \"Show toast\" button to show toast.\n3. Click X to close the toast when it appears.\n4. Click the \"Show toast\" button again, and the toast that appears does not have a progress bar and does not automatically close.\n\nMy production environment project also has this problem, I hope it can be solved as soon as possible.\nAlso, the progress bar sometimes flashes, so i can expect new configurations to setting the progress bar showing is true or false.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3015,3016,3017],{"name":2957,"color":2958},{"name":2906,"color":2907},{"name":2924,"color":2925},3003,"The Toast component loses the progress bar and does not automatically close","2025-03-24T13:48:53Z","https://github.com/nuxt/ui/issues/3003",0.7632111,{"description":3024,"labels":3025,"number":3027,"owner":2909,"repository":2909,"state":2948,"title":3028,"updated_at":3029,"url":3030,"score":3031},"\u003Ctemplate>\n \u003CNuxtLayout>\n \u003Cdiv class=\"main-wrapper\">\n \u003CHeaderComponent />\n \u003Ctransition name=\"fade\" mode=\"out-in\">\n \u003CNuxtPage />\n \u003C/transition>\n \u003CFooterComponent />\n \u003C/div>\n \u003C/NuxtLayout>\n\u003C/template>\n\n\u003Cscript setup>\n// Nuxt 3+ optimized setup\nimport HeaderComponent from '~/components/HeaderComponent.vue'\nimport FooterComponent from '~/components/FooterComponent.vue'\n\u003C/script>\n\n\u003Cstyle>\n:root {\n --bg: #0a0a0a;\n --fg: #f0f0f0;\n --accent: #00ffe7;\n --highlight: #a600ff;\n}\n\nbody {\n margin: 0;\n font-family: 'Inter', sans-serif;\n background-color: var(--bg);\n color: var(--fg);\n transition: background-color 0.3s, color 0.3s;\n}\n\n.main-wrapper {\n max-width: 1440px;\n margin: 0 auto;\n padding: 1rem;\n}\n\n.fade-enter-active, .fade-leave-active {\n transition: opacity 0.3s ease;\n}\n.fade-enter-from, .fade-leave-to {\n opacity: 0;\n}\n\na {\n color: var(--accent);\n text-decoration: none;\n}\n\na:hover {\n text-decoration: underline;\n}\n\u003C/style>",[3026],{"name":2970,"color":2971},32033,"Update app.vue","2025-05-08T13:44:27Z","https://github.com/nuxt/nuxt/issues/32033",0.7641635,["Reactive",3033],{},["Set"],["ShallowReactive",3036],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fumvZWL4LPAAnAuTOaezYs7ZKfwTvRAVhg-gM8WQkDAU":-1},"/nuxt/ui/3372"]