\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```",[3038,3041],{"name":3039,"color":3040},"question","d876e3",{"name":3022,"color":3023},4401,"How to use a UForm within a UModal with footer?","2025-06-26T12:51:18Z","https://github.com/nuxt/ui/issues/4401",0.7795274,{"description":3048,"labels":3049,"number":3055,"owner":3028,"repository":3029,"state":3056,"title":3057,"updated_at":3058,"url":3059,"score":3060},"### Description\n\nI want to put the widget inside UModal. But when clicking the button to open, the widget seems to appear behind an overlay that causing it cannot be clicked. If i let's say click outside the box it will close the UModal, and i can click the opened widget again.\n\n\n\n",[3050,3051,3054],{"name":3039,"color":3040},{"name":3052,"color":3053},"needs reproduction","CB47CF",{"name":3022,"color":3023},3956,"closed","Issue when opening cloudinary upload widget inside a modal","2025-06-12T11:33:44Z","https://github.com/nuxt/ui/issues/3956",0.7180426,{"description":3062,"labels":3063,"number":3068,"owner":3028,"repository":3029,"state":3056,"title":3069,"updated_at":3070,"url":3071,"score":3072},"### Description\n\nHi, looking at the example for the UModal, it's easy to emit a close event if someone uses the close button. But if the modal is dismissible, I don't know how to emit easily an event.\n\nIn the example there is a \"dismiss\" Button, but for me that's not the same, for sure there are workarounds possible, but an easy solution that the component is catching all kinds of close events would be really helpful. Or is there a way and I don't see it?\n\nThanks a lot in advance\n\nChristoph\n\n```\n\u003Cscript setup lang=\"ts\">\ndefineProps\u003C{\n count: number\n}>()\n\nconst emit = defineEmits\u003C{ close: [boolean] }>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUModal\n :close=\"{ onClick: () => emit('close', false) }\"\n :title=\"`This modal was opened programmatically ${count} times`\"\n >\n \u003Ctemplate #footer>\n \u003Cdiv class=\"flex gap-2\">\n \u003CUButton color=\"neutral\" label=\"Dismiss\" @click=\"emit('close', false)\" />\n \u003CUButton label=\"Success\" @click=\"emit('close', true)\" />\n \u003C/div>\n \u003C/template>\n \u003C/UModal>\n\u003C/template>\n\n\n```\n\n\n### Additional context\n\n_No response_",[3064,3067],{"name":3065,"color":3066},"enhancement","a2eeef",{"name":3022,"color":3023},4537,"Modal emitting close event if is dismissed","2025-07-17T10:06:09Z","https://github.com/nuxt/ui/issues/4537",0.719657,{"description":3074,"labels":3075,"number":3077,"owner":3028,"repository":3029,"state":3056,"title":3078,"updated_at":3079,"url":3080,"score":3081},"### Description\n\nHello.\n\nWith a modal when it opens the first button present is selected. Is there a way to change selection order or prevent it completely?\nIn exemple below the reset button is pre-selected. \n\nI could reorder buttons instead but I would like no pre-selections instead and prevent users' \"miss-click\". Thanks.\n\n```html\n \u003CUModal v-model=\"dialog\" prevent-close>\n \u003CUCard>\n \u003Cp>Reset data or continue?\u003C/p>\n\n \u003Cdiv class=\"flex justify-between\">\n \u003CUButton color=\"gray\" variant=\"ghost\" @click=\"reset\">\n Delete current data\n \u003CUIcon name=\"i-heroicons-x-mark-20-solid\" class=\"text-red-600\" />\n \u003C/UButton>\n\n \u003CUButton color=\"gray\" variant=\"ghost\" @click=\"continue\">\n Continue\n \u003CUIcon name=\"i-mdi-arrow-right-circle\" class=\"text-primary\" />\n \u003C/UButton>\n \u003C/div>\n \u003C/UCard>\n \u003C/UModal>\n```",[3076],{"name":3039,"color":3040},3187,"[V2] How to prevent button pre-selection on UModal?","2025-05-23T15:45:56Z","https://github.com/nuxt/ui/issues/3187",0.732307,{"description":3083,"labels":3084,"number":3090,"owner":3028,"repository":3029,"state":3056,"title":3091,"updated_at":3092,"url":3093,"score":3094},"### Environment\r\n\r\n- Operating System: Darwin\r\n- Node Version: v22.1.0\r\n- Nuxt Version: 3.12.4\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.7\r\n- Package Manager: npm@10.7.0\r\n- Builder: -\r\n- User Config: extends, modules, tiptap, future, compatibilityDate, devtools, runtimeConfig\r\n- Runtime Modules: @pinia/nuxt@0.5.3, @nuxt/ui@2.18.4, nuxt-tiptap-editor@1.2.1\r\n- Build Modules: -\r\n\r\n### Version\r\n\r\nv2.18.4\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/~/github.com/nerdnum/projectx-frontend-v3 \r\n\r\n@moshetanzer , I tagged you as you requested on Discord. Please let me know if you can access the link. It is my first time creating something on stackblitz, and I am not sure how access is managed.\r\n\r\nThe panel behaves the same on Stackblitz as on my development machine. The panel does not close.\r\n\r\n### Description\r\n\r\nI am using Nuxt-UI Pro. I provide a NavigationTree (using \"label\" and \"to\" in the links tree) to the panel slot of the Header component. When the screen with is less than 1024px, as expected, the NavigationTree is displayed when one clicks on the hamburger icon. When one clicks on one of the links in the tree, the application navigates to the new URL, but it does not close the panel as expected. One has to click on the 'x' to close the panel.\r\n\r\nThis differs from the behaviour of the Nuxt-ui documentation site (https://ui.nuxt.com/pro/components/header), which closes the panel and does the navigation. I cannot find anything about closing the panel with code in the documentation. \r\n\r\nIt behaves the same in chrome, edge and firefox.\r\n\r\nDisabling SSR does not make a difference.\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3085,3086,3089],{"name":3019,"color":3020},{"name":3087,"color":3088},"pro","5BD3CB",{"name":3025,"color":3026},2098,"Panel with NavigationTree does not close on Navigation","2025-04-30T13:37:50Z","https://github.com/nuxt/ui/issues/2098",0.7360418,{"description":3096,"labels":3097,"number":3104,"owner":3028,"repository":3029,"state":3056,"title":3105,"updated_at":3106,"url":3107,"score":3108},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.20.3\r\n- Nuxt Version: 3.12.1\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.6\r\n- Package Manager: pnpm@8.15.6\r\n- Builder: -\r\n- User Config: modules\r\n- Runtime Modules: @nuxt/ui@2.17.0\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Version\r\n\r\nv2.17.0\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-ui-5movd8?file=app.vue\r\n(Test on mobile or open Devtools and toggle device mode.)\r\n\r\n### Description\r\n\r\nWhen two or more `UModal` are using `preventClose` prop doesn't allow to interact with the elements of the modal on top when in touch mode.\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_",[3098,3099,3102],{"name":3019,"color":3020},{"name":3100,"color":3101},"closed-by-bot","ededed",{"name":3103,"color":3101},"stale",1932,"`UModal` preventClose doesn't allow to interact with elements","2025-06-19T02:12:17Z","https://github.com/nuxt/ui/issues/1932",0.7382943,{"description":3110,"labels":3111,"number":3116,"owner":3028,"repository":3029,"state":3056,"title":3117,"updated_at":3118,"url":3119,"score":3120},"### Environment\n\nnuxt: 3.15.1\n\n### Version\n\nv2.20.0\n\n### Reproduction\n\n-\n\n### Description\n\n```\n\u003CUModal>\n \u003CUInput v-model=\"state.name\" placeholder=\"..\" />\n \u003CUInput v-model=\"state.name1\" placeholder=\"...\" />\n\u003C/UModal>\n```\n\nWhen a modal contains one or more input boxes, the first input box will always get focus automatically.\nIf I manually add a close button in the upper right corner, it will trigger a validation when I click it. This is not good. How can I avoid the input box getting focus when opening the modal?\n\n### Additional context\n\n\n\n\n### Logs\n\n```shell-script\n\n```",[3112,3113,3114,3115],{"name":3019,"color":3020},{"name":3025,"color":3026},{"name":3100,"color":3101},{"name":3103,"color":3101},3062,"The input box in the modal will automatically gain focus","2025-06-18T09:02:39Z","https://github.com/nuxt/ui/issues/3062",0.75329006,{"description":3122,"labels":3123,"number":3127,"owner":3028,"repository":3029,"state":3056,"title":3128,"updated_at":3129,"url":3130,"score":3131},"### Environment\n\nOperating System: Linux\nNode Version: v18.20.3\nNuxt Version: 3.15.4\nCLI Version: 3.21.1\nNitro Version: 2.10.4\nPackage Manager: pnpm@8.15.6\nBuilder: -\nUser Config: modules\nRuntime Modules: @nuxt/ui@2.21.0\nBuild Modules: -\n\n\n### Version\n\n^2.17.0\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-um7dcx8a?file=app.vue\n\n### Description\n\nIn a Nuxt project using Nuxt UI, when a u-notification appears over a u-slideover, the notification is not clickable. The issue occurs because the u-slideover element blocks interactions with elements positioned above it. \n\nI have provided a reproduction link above where if you open the slideover, a notification appears after 1 sec and the notification is not interactive (action button does not work).\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3124,3125,3126],{"name":3019,"color":3020},{"name":3100,"color":3101},{"name":3103,"color":3101},3214,"Bug: u-notification Not Clickable When Positioned Over u-slideoveror or u-modal","2025-06-18T09:02:21Z","https://github.com/nuxt/ui/issues/3214",0.7592779,{"description":3133,"labels":3134,"number":3142,"owner":3028,"repository":3029,"state":3056,"title":3143,"updated_at":3144,"url":3145,"score":3146},"### Environment\n\n- Operating System: Linux\n- Node Version: v20.17.0\n- Nuxt Version: 3.13.2\n- CLI Version: 3.14.0\n- Nitro Version: 2.9.7\n- Package Manager: pnpm@8.12.1\n- Builder: -\n- User Config: -\n- Runtime Modules: -\n- Build Modules: -\n\n### Version\n\nnuxt/ui-pro 1.4.3\n\n### Reproduction\n\n```ts\n// package.json\n\"@nuxt/ui-pro\": \"^1.4.3\",\n\"nuxt\": \"^3.13.2\",\n```\n\n\n### Description\n\nThe property `class` in a link object seems not to be used by `UHeaderLinks` or cannot override UI config from prop or the app.config.ts file.\n\nProperty `icon` is not used on the parent object but appears for children.\n\n\n\n```vue\n\u003Cscript setup lang=\"ts\">\n const links = [\n {\n label: 'Foo',\n to: '/foo',\n icon: 'i-mdi-car',\n },\n {\n label: 'Bar',\n to: '/bar',\n icon: 'i-mdi-star',\n class: 'text-red-500 italic',\n },\n {\n label: 'Baz',\n children: [\n {\n label: 'Baz Foo',\n to: '/foo',\n icon: 'i-mdi-car',\n class: 'text-red-500 italic',\n },\n {\n label: 'Baz Bar',\n to: '/bar',\n icon: 'i-mdi-star',\n class: 'text-red-500 italic',\n },\n ],\n },\n ]\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUHeader>\n \u003Ctemplate #logo> ... \u003C/template>\n \u003Ctemplate #center>\n \u003CUHeaderLinks\n :links=\"links\"\n :ui=\"{\n wrapper: 'hidden lg:flex flex-row flex-nowrap items-center gap-x-8',\n }\"\n />\n \u003C/template>\n\n \u003Ctemplate #panel>\n \u003Cdiv class=\"flex h-full content-center pt-[130px]\">\n \u003CUNavigationTree id=\"navtree\" :links=\"links\" default-open />\n \u003C/div>\n \u003C/template>\n \u003C/UHeader>\n\u003C/template>\n```\n\n### Workaround \nFor classes: split links in multiple UHeaderLinks with custom ui prop.\n\n\n\n```vue\n\u003Ctemplate #center>\n \u003Cdiv class=\"flex flex-row flex-nowrap gap-5\">\n \u003CUHeaderLinks\n :links=\"linksA\"\n :ui=\"{\n wrapper: 'hidden lg:flex flex-row flex-nowrap items-center gap-x-8',\n }\"\n />\n \u003CUHeaderLinks\n :links=\"linksB\"\n :ui=\"{\n wrapper: 'hidden lg:flex flex-row flex-nowrap items-center gap-x-8',\n inactive: 'hover:text-primary text-red-500 italic',\n default: {\n popover: {\n ui: {\n wrapper: 'text-red-500 italic',\n },\n },\n },\n }\"\n />\n \u003C/div>\n\u003C/template>\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n_No response_",[3135,3136,3139,3140,3141],{"name":3019,"color":3020},{"name":3137,"color":3138},"nuxt/ui-pro","00dc82",{"name":3025,"color":3026},{"name":3100,"color":3101},{"name":3103,"color":3101},2306,"HeaderLinks: properties class and icon has no effects","2025-06-18T09:06:02Z","https://github.com/nuxt/ui/issues/2306",0.7609979,["Reactive",3148],{},["Set"],["ShallowReactive",3151],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fpZWBlS_eWkK7y5hef9aymh3TmiIixs4h8_aZjjFDVKk":-1},"/nuxt/ui/4244"]