Vue Dialog Component API

How the dialog comes in. Left out it fades in place, false turns the animation off, and a variant name picks one — the value names the variant, so further ones are added to the stylesheet rather than to this prop.

Apply a backdrop while the dialog is open. 'static' keeps the dialog open on a backdrop click and bounces it instead.

Pick the backdrop's look: the dark scrim or the translucent tint of the page. Left out, the component keeps its own default.

Flip the dialog to the dark color mode, whatever the page around it uses.

Cover the whole viewport — always with true, or only below the given breakpoint.

Closes the dialog when escape key is pressed.

Open the dialog modally, taking over the page. Set it to false for a dialog that leaves the rest of the page interactive.

Create a scrollable dialog that allows scrolling the dialog body.

Control the open state. When set, the dialog renders what show says and dismiss gestures only emit update:show — nothing closes until the parent flips the prop.

Size the component small, large, or extra large.

By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false.

Toggle the visibility of the dialog component.

Use show / v-model:show instead — visible is ignored when show is set.

Callback fired once the component has closed.

Callback fired when the dialog is shown, its backdrop is static and a click outside the dialog or an escape key press is performed with the keyboard option set to false.

Callback fired when the component requests to be shown.

Callback fired when the dialog requests an open-state change — a dismiss gesture (Escape, backdrop click) or any internal toggle. In controlled mode update show yourself, or the dialog stays as it is.