Drawer

A drawer component that slides in from the side of the screen. It's built on top of the Vaul library and provides a customizable container for content.

Important Note

The drawer component requires a root element with the vaul-drawer-wrapper attribute to function properly. Make sure your app's root component has this attribute:

<template>
  <div vaul-drawer-wrapper>
    <!-- Your app content -->
  </div>
</template>

Props

Name	Default	Type
`open`	`false`	`boolean` Controls the visibility of the drawer
`title`	—	`string` Title for accessibility
`containerClass`	—	`string` `object` `array` CSS class applied to the container of the drawer content
`containerSize`	`m`	`s` `m` `l` `xl` `full` `number` Size of the container or max-width in pixels
`handle`	`true`	`boolean` Whether to display the handle symbol at the top of the drawer
`nested`	`false`	`boolean` Uses Vaul's nested drawer root. Required when rendering a drawer inside another drawer
`activeSnapPoint`	—	`number` `string` `null` Active snap point in controlled mode (`v-model:activeSnapPoint`)
`rootProps`	—	`DrawerRootProps` Props to pass to the underlying Vaul root component. Type definitions
`portalProps`	—	`DrawerPortalProps` Props to pass to the underlying Vaul portal component. Type definitions
`overlay`	`true`	`boolean` Whether to render the drawer backdrop

Events

Name	Payload	Description
`close`	-	Emitted when the drawer is closed
`update:activeSnapPoint`	`number` `string` `null`	Emitted when the active snap point changes

Slots

Name	Accepts	Description
`header`	`any`	Optional header content rendered above drawer content
`default`	`any`	The content of the drawer