Dialog Responsive
Dialog on desktop, Drawer (vaul-vue) on mobile. Use this for almost every modal in the app. Reach for plain Dialog only for short confirmations that still look fine on a phone.
When to use DialogResponsive vs Dialog
Default to DialogResponsive for any modal that has a form or scrollable content. Plain Dialog is fine for short confirmations (delete, log out) and small popovers that read well on mobile without becoming a drawer.
Default
Use the trigger slot for the opener, the default slot for the content. Open state is controlled with v-model:open.
With form
Form pattern inside DialogResponsive: padding handled with a wrapper div, action buttons at the end.
Prevent close
preventClose blocks overlay clicks and Escape. The close-prevented event lets you show a confirmation prompt.
API Reference
Props, events, and slots for each sub-component.
DialogResponsive
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | — | Open state. Supports v-model:open. |
| isResponsive | boolean | true | Set false to force the Drawer variant at every breakpoint. |
| dialogMaxWidth | string | "400px" | Max width of the desktop dialog. |
| dialogMaxHeight | string | "calc(100% - 4rem)" | Max height of the desktop dialog. |
| preventClose | boolean | false | Block overlay click and Escape. Emits close-prevented. |
| drawerCloseButton | boolean | false | Show a close button on the mobile drawer (default is swipe only). |
| hideOverlay | boolean | false | Hide the dark backdrop. |
| flushContent | boolean | false | Render the content without the ScrollArea wrapper. |
| overflowContent | boolean | true | Enable overflow-y-auto on the mobile drawer body. |
Events
| Event | Description |
|---|---|
| update:open | Fires when the open state changes. |
| close-prevented | Fires when the user tries to close with preventClose enabled. |
Slots
| Slot | Description |
|---|---|
| trigger | The opener button. Receives open from the scope. |
| default | Main content. Receives data from the scope. |
| sticky-header | Header that sticks to the top while scrolling. |
| sticky-footer | Footer that sticks to the bottom while scrolling. |