\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```",[2937,2938],{"name":2896,"color":2897},{"name":2869,"color":2870},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.7975842,{"labels":2945,"number":2949,"owner":2875,"repository":2875,"state":2900,"title":2950,"updated_at":2951,"url":2952,"score":2953},[2946],{"name":2947,"color":2948},"2.x","d4c5f9",7690,"Help wanted: incompatibility with modal component – vue-js-modal","2023-01-18T15:34:02Z","https://github.com/nuxt/nuxt/issues/7690",0.80315804,{"description":2955,"labels":2956,"number":2958,"owner":2875,"repository":2875,"state":2900,"title":2959,"updated_at":2960,"url":2961,"score":2962},"I did exactly as you have in your docs for plugins.\r\ni have a file named iview.js and inside of there i have.\r\nIm using nuxt/express template\r\n\r\n ` \r\n\r\n import iView from 'iview'\r\n import Vue from 'vue'\r\n import 'iview/dist/styles/iview.css'\r\n\r\n Vue.use(iView)\r\n`\r\n\r\njust like u recommend. Next i add that plugin in nuxt.config.js\r\n `\r\n\r\n plugins: [\r\n // ssr: false to only include it on client-side\r\n { src: '~plugins/iview.js', ssr: false }\r\n ]\r\n\r\n`\r\n\r\nbut it keeps giving me this error \r\n\r\n> The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside \u003Cp>, or missing \u003Ctbody>. Bailing hydration and performing full client-side render.\r\n\r\nI hope there is a way around it. I tried to import Button from iview manually but i get an error saying\r\n`'Button' is defined but never used no-unused-vars` but its nonsense because i have ` \u003CButton type=\"primary\">Primary\u003C/Button>`\r\n\r\nSo then it made me think to go to my component and do the following inside of the \u003Cscript>\r\n`\r\n\r\n import Button from 'iview/src/components/button'\r\n export default {\r\n data () {\r\n return {\r\n Button\r\n }\r\n }\r\n}`\r\n\r\nAnd it started WORKING, right for a few seconds and then i get an error saying this:\r\n\r\n> /home/linux/Desktop/test/node_modules/iview/src/components/button/index.js:1\r\n(function (exports, require, module, __filename, __dirname) { import Button from './button.vue';SyntaxError: Unexpected token import\r\n\r\n\r\n\r\n\r\n\r\n**EDIT:**\r\n\r\n\r\n\r\n\r\nin my iview.js i have this\r\n\r\n import Vue from 'vue'\r\n import iView from 'iview'\r\n import 'iview/dist/styles/iview.css'\r\n if (process.BROWSER_BUILD) {\r\n require('iview')\r\n }\r\n Vue.use(iView)\r\n\r\nthen in my vendors and plugins\r\n\r\n plugins: [{ src: 'plugins/iview.js', ssr: false }]\r\n vendor: ['axios', 'iview'],\r\n\r\nthen in my index.vue\r\n\r\n \u003Ctemplate>\r\n \u003Cdiv class=\"\">\r\n \u003CButton type=\"primary\" @click=\"modal6 = true\">Open modal\u003C/Button>\r\n \u003CModal\r\n v-model=\"modal6\"\r\n title=\"sync\"\r\n :loading=\"loading\"\r\n @on-ok=\"asyncOK\">\r\n \u003Cp>This is a sync modal\u003C/p>\r\n \u003C/Modal>\r\n \u003C/div>\r\n \u003C/template>\r\n\r\n \u003Cscript>\r\n export default {\r\n layout: 'iview',\r\n data () {\r\n return {\r\n modal6: false,\r\n loading: true\r\n }\r\n },\r\n methods: {\r\n asyncOK () {\r\n setTimeout(() => {\r\n this.modal6 = false\r\n }, 2000)\r\n }\r\n }\r\n\r\n }\r\n \u003C/script>\r\n\r\n\r\n\r\n\r\nand it gives me the following errors\r\n\r\n Mismatching childNodes vs. VNodes: (5) [VNode, VNode, VNode, VNode, VNode]\r\n\r\n [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside \u003Cp>, or missing \u003Ctbody>. Bailing hydration and performing full client-side render.\r\n\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/c909\">#c909\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2957],{"name":2947,"color":2948},1049,"iview tree is not matching server-rendered content","2023-01-18T15:40:43Z","https://github.com/nuxt/nuxt/issues/1049",0.8048486,{"description":2964,"labels":2965,"number":2967,"owner":2875,"repository":2876,"state":2900,"title":2968,"updated_at":2969,"url":2970,"score":2971},"### 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```",[2966],{"name":2896,"color":2897},3187,"[V2] How to prevent button pre-selection on UModal?","2025-05-23T15:45:56Z","https://github.com/nuxt/ui/issues/3187",0.8055802,["Reactive",2973],{},["Set"],["ShallowReactive",2976],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$ftZwPOw0rp70XltRSGfMUJvQgFOI9HeanYpLrGIs8RXk":-1},"/nuxt/ui/3914"]