A headless modal dialog component using the native HTML dialog element.
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.
Click Me Deactivate account This will permanently deactivate your account.
Are you sure you want to deactivate your account? All of your data will be permanently removed from our servers. This action cannot be undone.
Cancel Deactivate
Show code basic.vue
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 >
View standalone → Props Name Type Default Description namespace string"v0:dialog"Namespace for dependency injection id string— Unique identifier for the dialog (auto-generated if not provided) modelValue booleanfalse—
Slots Name Slot Props Description default DialogRootSlotProps—
Props Name Type Default Description namespace string"v0:dialog"Namespace for dependency injection
Slots Name Slot Props Description default DialogActivatorSlotProps—
Props Name Type Default Description namespace string"v0:dialog"Namespace for dependency injection
Slots Name Slot Props Description default DialogCloseSlotProps—
Props Name Type Default Description namespace string"v0:dialog"Namespace for dependency injection closeOnClickOutside booleantrueClose dialog when clicking outside content
Events Name Payload Description cancel [e: Event]— close [e: Event]—
Slots Name Slot Props Description default DialogContentSlotProps—
Props Name Type Default Description namespace string"v0:dialog"Namespace for dependency injection
Slots Name Slot Props Description default DialogDescriptionSlotProps—
Props Name Type Default Description namespace string"v0:dialog"Namespace for dependency injection
Slots Name Slot Props Description default DialogTitleSlotProps—
