Sometimes, Dialog does not always satisfy our requirements, let's say you have a massive form, or you need space to display something like terms & conditions, Drawer has almost identical API with Dialog, but it introduces different user experience.


Since v-model is natively supported for all components, visible.sync has been deprecated, use v-model="visibilityBinding" to control the visibility of the current drawer.

Basic Usage

Callout a temporary drawer, from multiple direction

No Title

When you no longer need a title, you can remove title from drawer.

Customization Content

Like Dialog, Drawer can do many diverse interaction as you wanted.

Nested Drawer

You can also have multiple layer of Drawer just like Dialog.


The content inside Drawer should be lazy rendered, which means that the content inside Drawer will not impact the initial render performance, therefore any DOM operation should be performed through ref or after open event emitted.


Drawer provides an API called destroyOnClose, which is a flag variable that indicates should destroy the children content inside Drawer after Drawer was closed. You can use this API when you need your mounted life cycle to be called every time the Drawer opens.

Drawer Attributes

AttributeDescriptionTypeAcceptable ValuesDefault
model-value / v-modelShould Drawer be displayedbooleanfalse
append-to-bodyControls should Drawer be inserted to DocumentBody Element, nested Drawer must assign this param to truebooleanfalse
lock-scrollwhether scroll of body is disabled while Drawer is displayedbooleantrue
before-closeIf set, closing procedure will be haltedfunction(done) (done is function type that accepts a boolean as parameter, calling done with true or without parameter will abort the close procedure)
close-on-click-modalwhether the Drawer can be closed by clicking the maskbooleantrue
close-on-press-escapeIndicates whether Drawer can be closed by pressing ESCbooleantrue
open-delayTime(milliseconds) before opennumber0
close-delayTime(milliseconds) before closenumber0
custom-classExtra class names for Drawerstring
destroy-on-closeIndicates whether children should be destroyed after Drawer closedboolean-false
modalShould show shadowing layerbooleantrue
directionDrawer's opening directionDirectionrtl / ltr / ttb / bttrtl
show-closeShould show close button at the top right of Drawerbooleantrue
sizeDrawer's size, if Drawer is horizontal mode, it effects the width property, otherwise it effects the height property, when size is number type, it describes the size by unit of pixels; when size is string type, it should be used with x% notation, other wise it will be interpreted to pixel unitnumber / string-'30%'
titleDrawer's title, can also be set by named slot, detailed descriptions can be found in the slot formstring
withHeaderFlag that controls the header section's existance, default to true, when withHeader set to false, both title attribute and title slot won't workboolean-true
modal-classExtra class names for shadowing layerstring--
z-indexset z-indexnumber--

Drawer Slots

Drawer's Content
titleDrawer Title Section

Drawer Methods

handleCloseIn order to close Drawer, this method will call before-close.

Drawer Events

Event NameDescriptionParameter
openTriggered before Drawer opening animation begins
openedTriggered after Drawer opening animation ended
closeTriggered before Drawer closing animation begins
closedTriggered after Drawer closing animation ended