Modal - Nuxt UI

Usage

Use a v-model to control the Modal state.

<script setup>
const isOpen = ref(false)
</script>

<template>
  <div>
    <UButton label="Open" @click="isOpen = true" />

    <UModal v-model="isOpen">
      <div class="p-4">
        <Placeholder class="h-48" />
      </div>
    </UModal>
  </div>
</template>

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

<script setup>
const isOpen = ref(false)
</script>

<template>
  <div>
    <UButton label="Open" @click="isOpen = true" />

    <UModal v-model="isOpen">
      <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
        <template #header>
          <Placeholder class="h-8" />
        </template>

        <Placeholder class="h-32" />

        <template #footer>
          <Placeholder class="h-8" />
        </template>
      </UCard>
    </UModal>
  </div>
</template>

Disable overlay

Set the overlay prop to false to disable it.

<script setup>
const isOpen = ref(false)
</script>

<template>
  <div>
    <UButton label="Open" @click="isOpen = true" />

    <UModal v-model="isOpen" :overlay="false">
      <div class="p-4">
        <Placeholder class="h-48" />
      </div>
    </UModal>
  </div>
</template>

Disable transition

Set the transition prop to false to disable it.

<script setup>
const isOpen = ref(false)
</script>

<template>
  <div>
    <UButton label="Open" @click="isOpen = true" />

    <UModal v-model="isOpen" :transition="false">
      <div class="p-4">
        <Placeholder class="h-48" />
      </div>
    </UModal>
  </div>
</template>

Prevent close

Use the prevent-close prop to disable the outside click alongside the esc keyboard shortcut.

<script setup>
const isOpen = ref(false)
</script>

<template>
  <div>
    <UButton label="Open" @click="isOpen = true" />

    <UModal v-model="isOpen" prevent-close>
      <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
        <template #header>
          <div class="flex items-center justify-between">
            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
              Modal
            </h3>
            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
          </div>
        </template>

        <Placeholder class="h-32" />
      </UCard>
    </UModal>
  </div>
</template>

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

<script setup>
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.

<script setup>
const isOpen = ref(false)
</script>

<template>
  <div>
    <UButton label="Open" @click="isOpen = true" />

    <UModal v-model="isOpen" fullscreen>
      <UCard
        :ui="{
          base: 'h-full flex flex-col',
          rounded: '',
          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
          body: {
            base: 'grow'
          }
        }"
      >
        <template #header>
          <div class="flex items-center justify-between">
            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
              Modal
            </h3>
            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
          </div>
        </template>

        <Placeholder class="h-full" />
      </UCard>
    </UModal>
  </div>
</template>

Props

{}

{}

modelValue

boolean

false

transition

boolean

true

appear

boolean

false

overlay

boolean

true

fullscreen

boolean

false

preventClose

boolean

false

Config

{
  "wrapper": "relative z-50",
  "inner": "fixed inset-0 overflow-y-auto",
  "container": "flex min-h-full items-end sm:items-center justify-center text-center",
  "padding": "p-4 sm:p-0",
  "margin": "sm:my-8",
  "base": "relative text-left rtl:text-right overflow-hidden flex flex-col",
  "overlay": {
    "base": "fixed inset-0 transition-opacity",
    "background": "bg-gray-200/75 dark:bg-gray-800/75",
    "transition": {
      "enter": "ease-out duration-300",
      "enterFrom": "opacity-0",
      "enterTo": "opacity-100",
      "leave": "ease-in duration-200",
      "leaveFrom": "opacity-100",
      "leaveTo": "opacity-0"
    }
  },
  "background": "bg-white dark:bg-gray-900",
  "ring": "",
  "rounded": "rounded-lg",
  "shadow": "shadow-xl",
  "width": "w-full sm:max-w-lg",
  "height": "",
  "fullscreen": "w-screen h-screen",
  "transition": {
    "enter": "ease-out duration-300",
    "enterFrom": "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95",
    "enterTo": "opacity-100 translate-y-0 sm:scale-100",
    "leave": "ease-in duration-200",
    "leaveFrom": "opacity-100 translate-y-0 sm:scale-100",
    "leaveTo": "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
  }
}

Breadcrumb

A list of links that indicate the current page's location within a navigational hierarchy.

Slideover

Display a dialog that slides in from the edge of the screen.