---
url: "https://vueda.dev/v3/reference/api/vue/Drawer.md"
title: "Drawer"
---

# Drawer

## Overview

Root Drawer component, a mobile-friendly dialog variant that slides in from an edge and supports drag-to-dismiss.

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <span id="prop-open">open</span> | `boolean` |  | `undefined` | Whether the drawer is open. |
| <span id="prop-defaultOpen">defaultOpen</span> | `boolean` |  | `undefined` | The default open state. |
| <span id="prop-modal">modal</span> | `boolean` |  | `undefined` | Whether to use modal behavior. |
| <span id="prop-shouldScaleBackground">shouldScaleBackground</span> | `boolean` |  | `true` | Whether to scale the background when the drawer opens. |
| <span id="prop-setBackgroundColorOnScale">setBackgroundColorOnScale</span> | `boolean` |  | `undefined` | Whether to change the background color when scaled. |
| <span id="prop-direction">direction</span> | `string` |  | `undefined` | Direction the drawer slides in from. |
| <span id="prop-dismissible">dismissible</span> | `boolean` |  | `undefined` | Whether the drawer can be dismissed by dragging, clicking outside, or pressing escape. |
| <span id="prop-handleOnly">handleOnly</span> | `boolean` |  | `undefined` | When true, only allows the drawer to be dragged by the handle component. |
| <span id="prop-nested">nested</span> | `boolean` |  | `undefined` | Whether this is a nested drawer. |
| <span id="prop-fixed">fixed</span> | `boolean` |  | `undefined` | When true, prevents the drawer from moving upward when the keyboard opens. |
| <span id="prop-noBodyStyles">noBodyStyles</span> | `boolean` |  | `undefined` | When true, prevents vaul from applying styles to the body element. |
| <span id="prop-closeThreshold">closeThreshold</span> | `number` |  | `undefined` | Drag percentage threshold (0 to 1) required to close the drawer. |
| <span id="prop-scrollLockTimeout">scrollLockTimeout</span> | `number` |  | `undefined` | Duration in ms after scrolling before drag is re-enabled. |
| <span id="prop-snapPoints">snapPoints</span> | `array` |  | `undefined` | Snap points as fractions (0 to 1) of screen height. |
| <span id="prop-activeSnapPoint">activeSnapPoint</span> | `number\|string` |  | `undefined` | The currently active snap point. |
| <span id="prop-preventScrollRestoration">preventScrollRestoration</span> | `boolean` |  | `undefined` | Whether to prevent scroll restoration on close. |

## Slots

### `default` {#slot-default}

Scoped slot.

## Events

| Name | Description |
| --- | --- |
| `update:open` | Emitted when the open state changes. |
| `update:activeSnapPoint` | Emitted when the active snap point changes. |
| `drag` | Emitted while the drawer is being dragged. |
| `release` | Emitted when the drag is released. |
| `close` | Emitted when the close action is triggered. |
| `animationEnd` | Emitted when the open or close animation ends. |

[Full event reference](/v3/reference/api/vue/Drawer/events.md)

## Source

`client/lib/shell/drawer/Drawer.vue`