Dialog

A headless modal dialog component using the native HTML dialog element.

Usage

The Dialog component leverages the native showModal() API for proper modal behavior including focus trapping, backdrop rendering, and escape key handling. It provides v-model support for open/closed state management.

Features

Click-Outside Dismissal

By default, clicking the backdrop closes the dialog. Set closeOnClickOutside to false on Dialog.Content to prevent this:

<template>
  <Dialog.Content :close-on-click-outside="false">
    <!-- Dialog won't close on backdrop click -->
  </Dialog.Content>
</template>

Blocking Dialogs

The blocking prop disables scrim-based dismissal entirely — the dialog can only be closed programmatically. Use this for critical confirmations where the user must make an explicit choice:

<template>
  <Dialog.Content blocking>
    <!-- No scrim, no click-outside close — must use Dialog.Close or v-model -->
  </Dialog.Content>
</template>

Anatomy

<script setup lang="ts">
  import { Dialog } from '@vuetify/v0'
</script>

<template>
  <Dialog.Root>
    <Dialog.Activator />

    <Dialog.Content>
      <Dialog.Title />

      <Dialog.Description />

      <Dialog.Close />
    </Dialog.Content>
  </Dialog.Root>
</template>