N
Nuxtβ€’2mo ago
Hro

How to close programmatically opened nuxt ui modal from within the modal

I have a modal that opens like this: modal.open(SomeModal, {onClose() => {console.log('closed')}) When clicking outside the modal, it console logs properly, however, when I call modal.close() from inside the modal it does not. What's the proper way to close the modal from inside? (a cancel button for example)
2 Replies
JonathanDoerfler
JonathanDoerflerβ€’2mo ago
For only closing, you can use useModal().close() also from within the modal. Like this:
<template #header>
<div class="flex">
<h1 class="flex-1 text-xl">
This is some modal
</h1>
<UButton icon="i-heroicons-x-mark" @click="useModal().close" />
</div>
</template>
<template #header>
<div class="flex">
<h1 class="flex-1 text-xl">
This is some modal
</h1>
<UButton icon="i-heroicons-x-mark" @click="useModal().close" />
</div>
</template>
If you want your parent component to do something you have to emit a custom event (see the example at https://ui.nuxt.com/components/modal#control-programmatically)
Nuxt UI
Modal - Nuxt UI
Display a modal within your application.
Hro
Hroβ€’2mo ago
Thank you. Used a custom callback to solve this πŸ‘