Skip to content Skip to footer navigation
Light theme Dark theme

Modals

Modals

You can create modals using the <modal> component.

<modal
    v-if="isOpen"
    name="my-modal"
    width="300px" height="300px"
    @closed="isOpen = false"
>
    <div slot-scope="{ close }">
        Your modal's content.
        <button @click="close">x</button>
    </div>
</modal>

When a modal is rendered in the DOM, it will be automatically opened. So, to control whether or not it’s open, you should add a v-if to it.

When closed, the modal will emit a closed event. You should use this event to change the ‘open’ condition back to false.

You should also add a button somewhere inside your modal to be able to close it. To close it, emit a closed event.

Confirmation Modals

There is a prebuilt modal component available to you if you don’t need something completely custom.

Similar to the regular modal, you should use a v-if to make it appear.

<confirmation-modal
    v-if="confirming"
    title="Do the thing"
    @confirm="doTheThing"
    @cancel="confirming = false"
/>

Props

Prop Description
title Header text
bodyText Provide a simple string as a content of the modal. Defaults to Are you sure?.
buttonText Text for the confirmation button label. Defaults to Confirm.
danger Boolean for making the modal red. Useful for when you’re doing something scary like deletions.

Events

Event Description
confirm When the user clicks the confirm button.
cancel When the user clicks the cancel button.

Slots

The default slot replaces the bodyText prop. Useful when you need something more complicated than a single paragraph.

``` html
<confirmation-modal ...>
    <p>More complicated</p>
    <p>stuff here.</p>
</confirmation-modal>
```