Dialog

The v-dialog component inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks. Use dialogs sparingly because they are interruptive.

Usage

A dialog contains two slots, one for its activator and one for its content (default). Good for Privacy Policies.

API

v-dialog
Name
attach
Default
false
Type
any

Specifies which DOM element that this component should detach to. Use either a CSS selector string or an object reference to the element.

Name
content-class
Default
undefined
Type
any

Applies a custom class to the detached element. This is useful because the content is moved to the end of the app and is not targettable by classes passed directly on the component.

Name
dark
Default
false
Type
boolean

Applies the dark theme variant

Name
disabled
Default
false
Type
boolean

Disables the ability to open the dialog

Name
full-width
Default
false
Type
boolean

Specifies the modal to force 100% width

Name
fullscreen
Default
false
Type
boolean

Changes layout for fullscreen display

Name
hide-overlay
Default
false
Type
boolean

Hides the display of the overlay

Name
lazy
Default
false
Type
boolean

Conditionally renders content on mounted. Will only render content if activated

Name
light
Default
false
Type
boolean

Applies the light theme variant

Name
max-width
Default
none
Type
string | number

The maximum width of the content

Name
no-click-animation New in — v1.1
Default
false
Type
boolean

Disables the bounce effect when clicking outside of a v-dialog's content when using the persistent prop

Name
origin
Default
'center center'
Type
string

Sets the transition origin

Name
persistent
Default
false
Type
boolean

Clicking outside will not dismiss the dialog

Name
return-value
Default
undefined
Type
any

Components.Dialogs.

Name
scrollable
Default
false
Type
boolean

When set to true, expects a card, card-title, card-text and card-actions. Additionally, card-text should have specified height. Will set card-text to overflow-y

Name
transition
Default
dialog-transition
Type
string | boolean

Sets the component transition. Can be one of the built in transitions or your own.

Name
value
Default
undefined
Type
any

Controls visibility

Name
width
Default
auto
Type
string | number

Sets the dialog width

Examples

Without activator

If for some reason you are unable to use the activator slot, be sure to add the .stop modifier to the event that triggers the dialog.

Similar to a Simple Dialog, except that it's not dismissed when touching outside.

Fullscreen

Due to limited space, full-screen dialogs may be more appropriate for mobile devices than dialogs used on devices with larger screens.

Form

Just a simple example of a form in a dialog.

Scrollable

Example of a dialog with scrollable content.

Overflowed

Modals that do not fit within the available window space will scroll the container.

Simple dialogs

Choosing an option immediately closes the menu. Touching outside of the dialog, or pressing Back, cancels the action and closes the dialog.

Loader

The v-dialog component makes it easy to create a customized loading experience for your application.

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore