\n \u003C/template>\n\n \u003Ctemplate #right>\n \u003CUColorModeButton />\n\n \u003CUButton\n to=\"https://github.com/nuxt/ui\"\n target=\"_blank\"\n icon=\"i-simple-icons-github\"\n color=\"gray\"\n variant=\"ghost\"\n />\n \u003C/template>\n\u003Ctemplate>\n\n\n \u003Ctemplate #panel>\n \u003CUNavigationTree :links=\"menus\" />\n \u003Cdiv class=\"flex items-center justify-between gap-x-[20px] mt-[20px]\">\n \u003CUButton class=\"flex-1 flex items-center justify-center\" @click=\"onLogin\">login\u003C/UButton>\n \u003CUButton class=\"flex-1 flex items-center justify-center\" @click=\"onRegister\"\n >register\u003C/UButton\n >\n \u003C/div>\n \u003C/template>\n \u003C/UHeader>`",[3018],{"name":3019,"color":3020},"question","d876e3",4244,"nuxt","ui","open","Clicking on any area when opening the UModal component in UHeader will cause the panel to be closed","2025-05-28T14:43:17Z","https://github.com/nuxt/ui/issues/4244",0.7307184,{"description":3030,"labels":3031,"number":3036,"owner":3022,"repository":3023,"state":3024,"title":3037,"updated_at":3038,"url":3039,"score":3040},"### Description\n\nIs it possible to use a UForm within a UModal, but have the submit button in the modal's footer? I tried to wrap the whole modal with no success:\n\n```vue\n\u003Ctemplate>\n \u003CUForm :schema=\"userCreateSchema\" :state @submit=\"onSubmit\">\n \u003CUModal title=\"Create user\">\n \u003Ctemplate #body>\n \u003CUFormField label=\"First name\" name=\"givenName\" required>\n \u003CUInput v-model=\"state.givenName\" />\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```",[3032,3033],{"name":3019,"color":3020},{"name":3034,"color":3035},"v3","49DCB8",4401,"How to use a UForm within a UModal with footer?","2025-06-26T12:51:18Z","https://github.com/nuxt/ui/issues/4401",0.764266,{"description":3042,"labels":3043,"number":3051,"owner":3022,"repository":3023,"state":3024,"title":3052,"updated_at":3053,"url":3054,"score":3055},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v23.11.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: `-`\n- Runtime Modules: `-`\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/condescending-euclid-k9r7nc\n\n### Description\n\nWhen a Modal is in a ButtonGroup, all buttons inside the Modal (including the X button) are styled as elements directly in the ButtonGroup\n\n```vue\n\n\u003Ctemplate>\n \u003CUButtonGroup>\n \u003CUInput placeholder=\"Search...\" />\n \u003CUModal>\n \u003CUButton color=\"neutral\" variant=\"outline\">\n Open modal\n \u003C/UButton>\n\n \u003Ctemplate #body>\n \u003CUButton label=\"button1\" />\n \u003CUButton label=\"button2\" />\n \u003CUButton label=\"button3\" />\n \u003C/template>\n \u003C/UModal>\n \u003C/UButtonGroup>\n\u003C/template>\n```\n\n\n\nAlso, size and orientation affect the buttons inside the modal\n\n```vue\n\u003Ctemplate>\n \u003CUButtonGroup orientation=\"vertical\" size=\"lg\">\n ...\n \u003C/UButtonGroup>\n\u003C/template>\n```\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3044,3047,3048],{"name":3045,"color":3046},"bug","d73a4a",{"name":3034,"color":3035},{"name":3049,"color":3050},"triage","ffffff",4242,"[ButtonGroup] Nested buttons are also styled as if they were directly placed","2025-05-28T10:43:07Z","https://github.com/nuxt/ui/issues/4242",0.76603466,{"description":3057,"labels":3058,"number":3062,"owner":3022,"repository":3023,"state":3024,"title":3063,"updated_at":3064,"url":3065,"score":3066},"### 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.",[3059,3060,3061],{"name":3045,"color":3046},{"name":3034,"color":3035},{"name":3049,"color":3050},4274,"UTooltip breaks when attached to button that opens a UModal","2025-06-02T04:23:45Z","https://github.com/nuxt/ui/issues/4274",0.7696421,{"description":3068,"labels":3069,"number":3075,"owner":3022,"repository":3023,"state":3024,"title":3076,"updated_at":3077,"url":3078,"score":3079},"### Description\n\nI want to make the text in a custom slot for a tree item child selectable.\nThe issue is that `user-select: text` doesn’t work on `\u003Cbutton>` elements in Safari (I’m using a Tauri app).\n\nIt would be great if the component allowed using a custom slot that avoids rendering a \u003Cbutton> for certain items. (Perhaps a new slot could be added to allow custom rendering?).\n\n\u003Cimg width=\"1217\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/39cf6666-e3c9-48f4-a922-90a57d604feb\" />\n\n\n### Additional context\n\n_No response_",[3070,3073,3074],{"name":3071,"color":3072},"enhancement","a2eeef",{"name":3034,"color":3035},{"name":3049,"color":3050},4424,"Ability to not use button container for tree custom slot","2025-06-30T07:50:57Z","https://github.com/nuxt/ui/issues/4424",0.7792559,{"description":3081,"labels":3082,"number":3090,"owner":3022,"repository":3023,"state":3091,"title":3092,"updated_at":3093,"url":3094,"score":3095},"### 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```",[3083,3084,3085,3088],{"name":3045,"color":3046},{"name":3049,"color":3050},{"name":3086,"color":3087},"closed-by-bot","ededed",{"name":3089,"color":3087},"stale",3062,"closed","The input box in the modal will automatically gain focus","2025-06-18T09:02:39Z","https://github.com/nuxt/ui/issues/3062",0.72220105,{"description":3097,"labels":3098,"number":3102,"owner":3022,"repository":3023,"state":3091,"title":3103,"updated_at":3104,"url":3105,"score":3106},"### 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_",[3099,3100,3101],{"name":3045,"color":3046},{"name":3086,"color":3087},{"name":3089,"color":3087},1932,"`UModal` preventClose doesn't allow to interact with elements","2025-06-19T02:12:17Z","https://github.com/nuxt/ui/issues/1932",0.7432324,{"description":3108,"labels":3109,"number":3115,"owner":3022,"repository":3023,"state":3091,"title":3116,"updated_at":3117,"url":3118,"score":3119},"### Description\n\nA toggle button would be very useful. The closest thing we have is radio group or checkbox group. \nInspired by:\n[VBtnToggle](https://vuetifyjs.com/en/components/button-groups/)\n[VChipGroup](https://vuetifyjs.com/en/components/chip-groups/#usage)\n\nSimilar functionality could be achieved on RadioGroup by making unchecking possible (so null values are selectable)\nAND/OR\nBy adding a v-model to the button component, and model-active variants (so you can change the color, varient, icon, etc when checked). The model would be either a Boolean or an array of values similar to Vuetify.\n\n### Additional context\n\n_No response_",[3110,3113,3114],{"name":3111,"color":3112},"duplicate","cfd3d7",{"name":3071,"color":3072},{"name":3034,"color":3035},4246,"[Button] Toggle / V-Model","2025-05-28T17:19:55Z","https://github.com/nuxt/ui/issues/4246",0.7501222,{"description":3121,"labels":3122,"number":3125,"owner":3022,"repository":3023,"state":3091,"title":3126,"updated_at":3127,"url":3128,"score":3129},"### 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_",[3123,3124],{"name":3071,"color":3072},{"name":3034,"color":3035},4537,"Modal emitting close event if is dismissed","2025-07-17T10:06:09Z","https://github.com/nuxt/ui/issues/4537",0.7584436,{"description":3131,"labels":3132,"number":3135,"owner":3022,"repository":3023,"state":3091,"title":3136,"updated_at":3137,"url":3138,"score":3139},"### 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",[3133,3134],{"name":3019,"color":3020},{"name":3034,"color":3035},3041,"Can the width of the modal be customized?","2025-01-08T09:31:14Z","https://github.com/nuxt/ui/issues/3041",0.7720068,["Reactive",3141],{},["Set"],["ShallowReactive",3144],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fYlTHcJqjaQWv2cTUgzacJ4IzSYdBuPejZdpl0QJymuU":-1},"/nuxt/ui/3187"]