/nuxt-ui

Overlays

Patterns for modals, slideovers, drawers, and command palettes.

Confirmation dialog

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

function confirmDelete() {
  // perform delete
  isOpen.value = false
}
</script>

<template>
  <UButton label="Delete" color="error" variant="soft" @click="isOpen = true" />

  <UModal v-model:open="isOpen" title="Delete item" description="This action cannot be undone. Are you sure?" :ui="{ footer: 'justify-end' }">
    <template #footer="{ close }">
      <UButton label="Cancel" color="neutral" variant="outline" @click="close" />
      <UButton label="Delete" color="error" @click="confirmDelete" />
    </template>
  </UModal>
</template>

Programmatic confirmation (useOverlay)

Reusable pattern — no template state needed at the call site.

<script setup lang="ts">
defineProps<{
  title: string
  description?: string
}>()

const emit = defineEmits<{
  close: [confirmed: boolean]
}>()
</script>

<template>
  <UModal :close="{ onClick: () => emit('close', false) }" :title="title" :description="description">
    <template #footer>
      <UButton label="Cancel" color="neutral" variant="outline" @click="emit('close', false)" />
      <UButton label="Confirm" color="error" @click="emit('close', true)" />
    </template>
  </UModal>
</template>

// Usage anywhere
const overlay = useOverlay()
const confirm = overlay.create(ConfirmModal)

async function deleteItem(item) {
  const instance = confirm.open({
    title: 'Delete item',
    description: `Are you sure you want to delete "${item.name}"?`
  })

  if (await instance.result) {
    // user confirmed
  }
}

Form in a slideover

<script setup lang="ts">
import * as z from 'zod'

const isOpen = ref(false)

const schema = z.object({
  name: z.string().min(1),
  email: z.email()
})

type Schema = z.output<typeof schema>
const state = reactive<Partial<Schema>>({})

function onSave() {
  // save user
  isOpen.value = false
}
</script>

<template>
  <UButton label="Add user" @click="isOpen = true" />

  <USlideover v-model:open="isOpen" title="Add user" description="Fill in the details below.">
    <template #body>
      <UForm id="user-form" :schema="schema" :state="state" class="space-y-4" @submit="onSave">
        <UFormField name="name" label="Name">
          <UInput v-model="state.name" />
        </UFormField>
        <UFormField name="email" label="Email">
          <UInput v-model="state.email" type="email" />
        </UFormField>
      </UForm>
    </template>

    <template #footer="{ close }">
      <UButton label="Cancel" color="neutral" variant="outline" @click="close" />
      <UButton type="submit" form="user-form" label="Save" />
    </template>
  </USlideover>
</template>

Command palette

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

defineShortcuts({
  meta_k: () => { isOpen.value = true }
})

const groups = [{
  id: 'actions',
  label: 'Actions',
  items: [
    { label: 'New file', icon: 'i-lucide-file-plus', kbds: ['meta', 'n'], onSelect: () => newFile() },
    { label: 'New folder', icon: 'i-lucide-folder-plus', onSelect: () => newFolder() }
  ]
}, {
  id: 'navigation',
  label: 'Navigation',
  items: [
    { label: 'Dashboard', icon: 'i-lucide-house', to: '/dashboard' },
    { label: 'Settings', icon: 'i-lucide-settings', to: '/settings' }
  ]
}]
</script>

<template>
  <UButton label="Search..." icon="i-lucide-search" color="neutral" variant="outline" @click="isOpen = true" />

  <UCommandPalette v-model:open="isOpen" :groups="groups" placeholder="Type a command or search..." />
</template>

Drawer (bottom sheet)

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

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

  <UDrawer v-model:open="isOpen" title="Options">
    <template #body>
      <div class="space-y-2 p-4">
        <UButton label="Share" icon="i-lucide-share" block variant="ghost" />
        <UButton label="Export" icon="i-lucide-download" block variant="ghost" />
        <USeparator />
        <UButton label="Delete" icon="i-lucide-trash" block variant="ghost" color="error" />
      </div>
    </template>
  </UDrawer>
</template>