\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_",[3165,3168],{"name":3166,"color":3167},"enhancement","a2eeef",{"name":3149,"color":3150},4537,"closed","Modal emitting close event if is dismissed","2025-07-17T10:06:09Z","https://github.com/nuxt/ui/issues/4537",0.7318626,{"description":3176,"labels":3177,"number":3182,"owner":3155,"repository":3156,"state":3170,"title":3183,"updated_at":3184,"url":3185,"score":3186},"### 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",[3178,3181],{"name":3179,"color":3180},"question","d876e3",{"name":3149,"color":3150},4001,"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.73319983,{"description":3188,"labels":3189,"number":3192,"owner":3155,"repository":3156,"state":3170,"title":3193,"updated_at":3194,"url":3195,"score":3196},"### 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```",[3190,3191],{"name":3179,"color":3180},{"name":3149,"color":3150},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.74745667,{"description":3198,"labels":3199,"number":3206,"owner":3155,"repository":3155,"state":3170,"title":3207,"updated_at":3208,"url":3209,"score":3210},"I have the following dependencies:\n\n```\n\"dependencies\": {\n \"bootstrap\": \"^5.3.3\",\n \"consola\": \"^3.2.3\",\n \"jquery\": \"^3.7.1\",\n \"nuxt\": \"^3.14.1592\",\n \"vue\": \"latest\",\n \"vue-router\": \"latest\"\n }\n\n```\nInitially I wanted to implement push state in the modal so that when the back button is used, it will close the modal. but when I implemented it I had to press the back button 2 times to be able to close the modal. is the bootstrap modal like that or is there something else that affects it? ",[3200,3203],{"name":3201,"color":3202},"pending triage","E99695",{"name":3204,"color":3205},"needs reproduction","FBCA04",30245,"Bootstrap modal uses push state, even though I don't use it","2024-12-13T11:47:56Z","https://github.com/nuxt/nuxt/issues/30245",0.74947894,{"description":3212,"labels":3213,"number":3217,"owner":3155,"repository":3156,"state":3170,"title":3218,"updated_at":3219,"url":3220,"score":3221},"### Description\n\n```ts\nimport { ModalsForgotPassword } from '#components'\n\nconst modal = useModal()\n\n\nconst onForgot = async () => {\n await modal.close()\n\n// not opened\n modal.open(ModalsForgotPassword)\n}\n```",[3214,3215],{"name":3179,"color":3180},{"name":3204,"color":3216},"CB47CF",4087,"how to open a new modal again when closing the mod execution","2025-06-01T13:25:48Z","https://github.com/nuxt/ui/issues/4087",0.7540891,{"description":3223,"labels":3224,"number":3226,"owner":3155,"repository":3156,"state":3170,"title":3227,"updated_at":3228,"url":3229,"score":3230},"### 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```",[3225],{"name":3179,"color":3180},3187,"[V2] How to prevent button pre-selection on UModal?","2025-05-23T15:45:56Z","https://github.com/nuxt/ui/issues/3187",0.7634438,{"description":3232,"labels":3233,"number":3237,"owner":3155,"repository":3155,"state":3170,"title":3238,"updated_at":3239,"url":3240,"score":3241},"I couldn't see a way to do this even through my layout file; I want to add a class to the `\u003Chtml>` tag that does `overflow: hidden !important` when a modal is present so that I can prevent scrolling in the background.\r\n\r\nI figure since I have modals in different components I would use vuex to globally communicate:\r\n\r\nmy `store/index.js`\r\n```js\r\nimport Vuex from 'vuex'\r\n\r\nconst store = () => new Vuex.Store({\r\n state: {\r\n modal: false,\r\n },\r\n mutations: {\r\n modalOn (state) {\r\n state.modal = true\r\n document.getElementsByTagName('html')[0].classList.add('is-clipped')\r\n },\r\n modalOff (state) {\r\n state.modal = false\r\n document.getElementsByTagName('html')[0].classList.remove('is-clipped')\r\n },\r\n },\r\n})\r\nexport default store\r\n```\r\n\r\nThen in my component I add a watcher that hits these mutations when the modal is on/off:\r\n\r\n```js\r\n watch: {\r\n 'modal' (value) {\r\n if (value) {\r\n this.$store.commit('modalOn')\r\n } else {\r\n this.$store.commit('modalOff')\r\n }\r\n },\r\n },\r\n```\r\n\r\nAm I doing it wrong? is there a better approach?\r\n\r\n\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://nuxtjs.cmty.io\">Nuxt.js\u003C/a> community (\u003Ca href=\"https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1487\">#c1487\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[3234],{"name":3235,"color":3236},"2.x","d4c5f9",1662,"Proper strategy for binding a class to \u003Chtml>","2023-01-18T15:42:08Z","https://github.com/nuxt/nuxt/issues/1662",0.7694985,{"description":3243,"labels":3244,"number":3245,"owner":3155,"repository":3246,"state":3170,"title":3247,"updated_at":3248,"url":3249,"score":3250},"",[],1245,"nuxt.com","Use pinceau for UI Components","2023-03-09T09:23:15Z","https://github.com/nuxt/nuxt.com/issues/1245",0.77300155,{"description":3252,"labels":3253,"number":3261,"owner":3155,"repository":3156,"state":3170,"title":3262,"updated_at":3263,"url":3264,"score":3265},"### 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```",[3254,3255,3256,3259],{"name":3146,"color":3147},{"name":3152,"color":3153},{"name":3257,"color":3258},"closed-by-bot","ededed",{"name":3260,"color":3258},"stale",3062,"The input box in the modal will automatically gain focus","2025-06-18T09:02:39Z","https://github.com/nuxt/ui/issues/3062",0.77320445,["Reactive",3267],{},["Set"],["ShallowReactive",3270],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f1L-jPWL8mi4aKWcLtwDVjOOwUJT9i3NH3lFIEdlkfpA":-1},"/nuxt/ui/4948"]