Modal - Nuxt UI

Usage

Use a v-model to control the Modal state.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

You can put a Card component inside your Modal to handle forms and take advantage of header and footer slots:

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Disable overlay

Set the overlay prop to false to disable it.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Disable transition

Set the transition prop to false to disable it.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Prevent close

Use the prevent-close prop to disable the outside click alongside the esc keyboard shortcut. A close-prevented event will be emitted when the user tries to close the modal.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

You can still handle the esc shortcut yourself by using our defineShortcuts composable.

<script setup lang="ts">
const isOpen = ref(false)

defineShortcuts({
  escape: {
    usingInput: true,
    whenever: [isOpen],
    handler: () => { isOpen.value = false }
  }
})
</script>

Fullscreen

Set the fullscreen prop to true to enable it.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Control programmatically

First of all, add the Modals component to your app, preferably inside app.vue. This component provides your application a place to render programmatically created modals.

app.vue

<template>
  <div>
    <UContainer>
      <NuxtPage />
    </UContainer>

    <UModals />
  </div>
</template>

Then, you can use the useModal composable to control your modals within your app.

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Additionally, you can close the modal within the modal component by calling modal.close().

{ wrapper?: string; inner?: string; container?: string; padding?: string; margin?: string; base?: string; overlay?: DeepPartial<{ base: string; background: string; transition: { enter: string; enterFrom: string; enterTo: string; leave: string; leaveFrom: string; leaveTo: string; }; }, any>; background?: string; ring?: string; rounded?: string; shadow?: string; width?: string; height?: string; fullscreen?: string; transition?: DeepPartial<{ enter: string; enterFrom: string; enterTo: string; leave: string; leaveFrom: string; leaveTo: string; }, any>; } & { [key: string]: any; } & { strategy?: Strategy; }

{}

onClose

(...args: any[]) => any

onUpdate:modelValue

(...args: any[]) => any

onClose-prevented

(...args: any[]) => any

onAfter-leave

(...args: any[]) => any

transition

boolean

true

modelValue

boolean

false

appear

boolean

false

overlay

boolean

true

fullscreen

boolean

false

preventClose

boolean

false

Config

{
  "message": "You should use slots with <ContentRenderer>",
  "value": {},
  "excerpt": false,
  "tag": "div"
}

Meter

Display a gauge meter that fills or depletes.

Notification

Display a toast notification in your app.