Nuxt•6mo ago

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•6mo 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.

HroOP•6mo ago

Thank you. Used a custom callback to solve this 👍

Gaming

Programming

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