\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.720462,{"description":3030,"labels":3031,"number":3041,"owner":3022,"repository":3023,"state":3024,"title":3042,"updated_at":3043,"url":3044,"score":3045},"### 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.",[3032,3035,3038],{"name":3033,"color":3034},"bug","d73a4a",{"name":3036,"color":3037},"v3","49DCB8",{"name":3039,"color":3040},"triage","ffffff",4274,"UTooltip breaks when attached to button that opens a UModal","2025-06-02T04:23:45Z","https://github.com/nuxt/ui/issues/4274",0.75624835,{"description":3047,"labels":3048,"number":3054,"owner":3022,"repository":3023,"state":3024,"title":3055,"updated_at":3056,"url":3057,"score":3058},"### Description\n\nCurrently, Nuxt UI v3 defines theme colors within a `\u003Cstyle>` tag using the following structure:\n\n```css\n@layer base {\n :root {\n --ui-color-primary-50: var(--color-blue-50);\n --ui-color-primary-100: var(--color-blue-100);\n --ui-color-primary-200: var(--color-blue-200);\n --ui-color-primary-300: var(--color-blue-300);\n --ui-color-primary-400: var(--color-blue-400);\n --ui-color-primary-500: var(--color-blue-500);\n --ui-color-primary-600: var(--color-blue-600);\n --ui-color-primary-700: var(--color-blue-700);\n --ui-color-primary-800: var(--color-blue-800);\n --ui-color-primary-900: var(--color-blue-900);\n --ui-color-primary-950: var(--color-blue-950);\n /* other colors... */\n }\n :root, .light {\n --ui-primary: var(--ui-color-primary-500);\n /* other colors... */\n }\n .dark {\n --ui-primary: var(--ui-color-primary-400);\n /* other colors... */\n }\n}\n```\n\nHowever, dynamically overriding these CSS variables programmatically (e.g., user-selected colors, colors fetched via API calls, or runtime adjustments) is currently complex and involves manual DOM manipulation.\n\n**Proposed Solution:**\nIntroduce a simple JavaScript composable or utility (`useUiColors()` or `setUiColor(variable, value)`) that allows easy runtime modification of these CSS variables.\n\n**Use-cases:**\n- Switching themes or branding colors dynamically.\n- Allowing users to set custom colors using a color picker.\n- Dynamically adjusting colors (primary, secondary, info, etc.) based on data from API responses.\n\n**Example Usage:**\n```javascript\nconst { setUiColor } = useUiColors();\n\n// Set primary color using a predefined variable\nsetUiColor('primary', 'green');\n\n// Set a custom color dynamically from user input or API\nsetUiColor('secondary', {\n '50': '#f1f1ff',\n '100': '#e6e7ff',\n '200': '#d1d3ff',\n '300': '#abadff',\n '400': '#807cff',\n '500': '#5647ff',\n '600': '#4022ff',\n '700': '#3110f1',\n '800': '#280dca',\n '900': '#240da5',\n '950': '#110570',\n});\n```\n\n**Benefits:**\n- Simplifies dynamic theme customizations.\n- Eliminates the need for manual DOM or CSS manipulation.\n- Enhances user experience by allowing quick, seamless color changes.\n\n\n### Additional context\n\nThis approach addresses the common need for dynamic customization in Nuxt UI applications, significantly improving usability and maintainability.",[3049,3052,3053],{"name":3050,"color":3051},"enhancement","a2eeef",{"name":3036,"color":3037},{"name":3039,"color":3040},3914,"Feature Request: Utility to Dynamically Override Nuxt UI v3 CSS Variables in `\u003Chead>`","2025-04-16T09:35:28Z","https://github.com/nuxt/ui/issues/3914",0.7661243,{"description":3060,"labels":3061,"number":3064,"owner":3022,"repository":3023,"state":3024,"title":3065,"updated_at":3066,"url":3067,"score":3068},"### 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```",[3062,3063],{"name":3019,"color":3020},{"name":3036,"color":3037},4401,"How to use a UForm within a UModal with footer?","2025-06-26T12:51:18Z","https://github.com/nuxt/ui/issues/4401",0.77473336,{"description":3070,"labels":3071,"number":3074,"owner":3022,"repository":3023,"state":3075,"title":3076,"updated_at":3077,"url":3078,"score":3079},"### Description\n\nI am using the modal component with the programatic opening and closing, exactly as described in the documentation here: https://ui.nuxt.com/components/modal#programmatic-usage\n\nHowever, whenever I try to get a result on close, for instance if I were to add a form or something in the modal, I do not get anything. When I log the result as in this line in the documentation: const shouldIncrement = await modal.open() - I get an unresolved promise. I am using the documentation verbatim.\n\nHow can I get something back from my modal that isn't an unresolved promise? I am using v 3.1.0",[3072,3073],{"name":3019,"color":3020},{"name":3036,"color":3037},4001,"closed","How to get a modal to emit on close instead of only on open","2025-04-29T02:46:40Z","https://github.com/nuxt/ui/issues/4001",0.6814664,{"description":3081,"labels":3082,"number":3089,"owner":3022,"repository":3023,"state":3075,"title":3090,"updated_at":3091,"url":3092,"score":3093},"### 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_",[3083,3084,3087],{"name":3033,"color":3034},{"name":3085,"color":3086},"closed-by-bot","ededed",{"name":3088,"color":3086},"stale",1932,"`UModal` preventClose doesn't allow to interact with elements","2025-06-19T02:12:17Z","https://github.com/nuxt/ui/issues/1932",0.7318922,{"description":3095,"labels":3096,"number":3100,"owner":3022,"repository":3023,"state":3075,"title":3101,"updated_at":3102,"url":3103,"score":3104},"### 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```",[3097,3098,3099],{"name":3033,"color":3034},{"name":3036,"color":3037},{"name":3039,"color":3040},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.7378147,{"description":3106,"labels":3107,"number":3110,"owner":3022,"repository":3023,"state":3075,"title":3111,"updated_at":3112,"url":3113,"score":3114},"### Description\n\nhttps://github.com/user-attachments/assets/80bfa1b6-a5ee-4d58-84cc-0a282d3a6cb7\n\n### DeleteModal.vue\n\n```\n\u003Cscript setup lang=\"ts\">\ninterface Props {\n title: string\n description: string\n loading?: boolean\n}\n\nwithDefaults(defineProps\u003CProps>(), {\n loading: false\n})\n\nconst emit = defineEmits\u003C{\n close: [boolean]\n}>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUModal :title=\"title\" :description=\"description\">\n \u003Ctemplate #body>\n \u003Cdiv class=\"flex justify-end gap-2\">\n \u003CUButton\n label=\"Cancel\"\n color=\"neutral\"\n variant=\"subtle\"\n size=\"md\"\n @click=\"emit('close', false)\"\n />\n \u003CUButton\n label=\"Delete\"\n color=\"error\"\n variant=\"solid\"\n loading-auto\n :loading=\"loading\"\n size=\"md\"\n @click=\"emit('close', true)\"\n />\n \u003C/div>\n \u003C/template>\n \u003C/UModal>\n\u003C/template>\n```\n\n### NotesListModal.vue\n\n```\n\u003Cscript setup lang=\"ts\">\nimport { UserModalsNoteFormModal as NoteFormModal, DeleteModal } from '#components'\n\nconst overlay = useOverlay()\n\nconst { getUserNotes } = useGetRequest()\nconst { deleteNote } = useDeleteRequest()\nconst { user, UserNotes } = storeToRefs(useUserStore())\n\nconst isLoading = ref(false)\nconst isDeleting = ref(false)\n\nasync function openDeleteModal(id: number) {\n const instance = overlay.create(DeleteModal).open({\n title: 'Delete this note',\n description: 'Are you sure, this action cannot be undone.',\n })\n\n const confirm = await instance.result\n\n if (confirm) {\n await handleDelete(id)\n }\n}\n\nasync function handleDelete(id: number) {\n isDeleting.value = true\n try {\n const response = await deleteNote(id)\n if (response.status_code !== 200) return\n const index = UserNotes.value.findIndex(note => note.id === id)\n if (index !== -1) UserNotes.value?.splice(index, 1)\n } catch (error) {\n console.error('Error:', error)\n } finally {\n isDeleting.value = false\n }\n}\n\nonMounted(async () => {\n if (user.value?.id) {\n isLoading.value = true\n try {\n const response = await getUserNotes(user.value.id)\n if (response.status_code !== 200) return\n UserNotes.value = response.data.data\n } catch (err) {\n console.error(err)\n } finally {\n isLoading.value = false\n }\n }\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUModal :dismissible=\"false\" title=\"Show all notes\">\n \u003Ctemplate #body>\n \u003Cdiv v-if=\"isLoading\" class=\"flex justify-center\">\n \u003CUIcon name=\"i-lucide:loader-circle\" class=\"size-8 animate-spin\" />\n \u003C/div>\n \u003Cdiv v-else class=\"flex flex-col space-y-3\">\n \u003Cdiv v-for=\"note in UserNotes\" :key=\"`note-${note.id}`\" class=\"p-2.5 bg-[var(--ui-bg-elevated)]\">\n \u003Cp class=\"text-highlighted ltr:first-letter:uppercase\">\n {{ note.title }}\n \u003C/p>\n \u003Cspan class=\"text-sm text-muted inline-block ltr:first-letter:uppercase\">{{ note.body }}\u003C/span>\n \u003Cdiv class=\"flex items-center justify-between space-x-3\">\n \u003Cspan class=\"text-sm text-highlighted font-light inline-block\">{{ note.created_at?.split('T')[0] }}\u003C/span>\n \u003Cdiv class=\"flex items-center\">\n \u003CUButton icon=\"i-lucide:edit\" variant=\"link\" size=\"md\" @click=\"overlay.create(NoteFormModal).open({ mode: 'edit', noteId: note.id })\" />\n \u003CUButton icon=\"i-lucide:trash-2\" color=\"error\" variant=\"link\" size=\"md\" @click=\"openDeleteModal(note.id)\" />\n \u003C/div>\n \u003C/div>\n \u003C/div>\n \u003C/div>\n \u003C/template>\n \u003Ctemplate #footer>\n \u003CUButton\n label=\"Add new note\"\n icon=\"i-lucide-plus\"\n color=\"neutral\"\n variant=\"outline\"\n block\n @click=\"overlay.create(NoteFormModal).open({ mode: 'create' })\"\n />\n \u003C/template>\n \u003C/UModal>\n\u003C/template>\n```",[3108,3109],{"name":3019,"color":3020},{"name":3036,"color":3037},4249,"Show loading on delete button and close modal after deletion finishes","2025-06-01T12:38:39Z","https://github.com/nuxt/ui/issues/4249",0.74639547,{"description":3116,"labels":3117,"number":3123,"owner":3022,"repository":3023,"state":3075,"title":3124,"updated_at":3125,"url":3126,"score":3127},"### Environment\n\n------------------------------\n- Operating System: Windows_NT\n- Node Version: v20.17.0\n- Nuxt Version: 3.16.1\n- CLI Version: 3.23.1\n- Nitro Version: 2.11.7\n- Package Manager: npm@10.8.2\n- Builder: -\n- User Config: devtools, modules, css, future, compatibilityDate\n- Runtime Modules: @nuxt/ui@3.0.2, @nuxt/eslint@1.2.0, @nuxt/content@3.4.0, @vueuse/nuxt@13.0.0, @nuxt/image@1.10.0\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.2\n\n### Reproduction\n\nTried to setup repo, but codesandbox was giving errors and stalling out.\n\n\n\n### Description\n\nWhen using the UDrawer component with `:dismissible=\"false\"` and `:modal=\"false\"`, the drawer still closes when users interact with elements outside the drawer. This prevents users from interacting with the form or other page elements while the drawer is open.\n\n**Steps to Reproduce**\nCreate a UDrawer component with :dismissible=\"false\"\nSet the drawer to be open\nTry to interact with form elements or other content outside the drawer\n\n### Additional context\n\nExpected Behavior\nAccording to the documentation at https://ui.nuxt.com/components/drawer#prevent-closing, setting dismissible=\"false\" should prevent the drawer from closing when clicking outside or pressing escape.\nActual Behavior\nThe drawer still closes when clicking outside, making it impossible to interact with form elements on the page while the drawer is open.\n\n```\n\u003CUDrawer\n v-model:open=\"showMobileResults\"\n direction=\"bottom\"\n :modal=\"false\"\n :handle=\"false\"\n :overlay=\"false\"\n dismissible=\"false\"\n title=\"Biological Age Results\"\n description=\"View your biological age and longevity estimates\"\n>\n \u003C!-- Drawer content here -->\n\u003C/UDrawer>\n```\n\n### Logs\n\n```shell-script\n\n```",[3118,3119,3122],{"name":3033,"color":3034},{"name":3120,"color":3121},"needs reproduction","CB47CF",{"name":3036,"color":3037},3727,"UDrawer ignores :dismissible=\"false\" prop and still closes when interacting outside","2025-06-12T15:30:30Z","https://github.com/nuxt/ui/issues/3727",0.7507963,{"description":3129,"labels":3130,"number":3132,"owner":3022,"repository":3023,"state":3075,"title":3133,"updated_at":3134,"url":3135,"score":3136},"### 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```",[3131],{"name":3019,"color":3020},3187,"[V2] How to prevent button pre-selection on UModal?","2025-05-23T15:45:56Z","https://github.com/nuxt/ui/issues/3187",0.7533798,["Reactive",3138],{},["Set"],["ShallowReactive",3141],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fJCy89Ei9C1TW8Gs1oZZ1Fa8OSSiYjwE3hw-o9H05vP8":-1},"/nuxt/ui/4537"]