# vaul-vue

> Vaul Vue is an unstyled drawer component for Vue that can be used as a Dialog replacement on tablet and mobile devices. It uses [Reka UI's Dialog primitive](https://www.reka-ui.com/docs/components/dialog) under the hood and is a feature complete port of [

Latest version **0.4.1** (published 2025-03-15) · 0 weekly downloads

## Install

```sh
npm install vaul-vue
pnpm add vaul-vue
yarn add vaul-vue
bun add vaul-vue
```

## Health

**Score 45/100 (D)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 0.4.1 |
| Published | 2025-03-15 |
| First published | 2023-07-28 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 74.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 499 |
| Maintainers | elliotalexander, connerblanton_ |
| Keywords | vue, vue3, drawer, dialog, modal, headless |

## Links

- npm: https://www.npmjs.com/package/vaul-vue
- Repository: https://github.com/Elliot-Alexander/vaul-vue
- Homepage: https://github.com/Elliot-Alexander/vaul-vue#readme
- Issues: https://github.com/Elliot-Alexander/vaul-vue/issues
- npm.io page: https://npm.io/package/vaul-vue

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^3.4.5
- [reka-ui](https://npm.io/package/reka-ui.md) ^2.0.0
- [@vueuse/core](https://npm.io/package/@vueuse/core.md) ^10.8.0

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 0.4.1 (latest) — 2025-03-15
- 0.3.0-next.1 (next) — 2025-01-31
- 0.4.0 — 2025-03-09
- 0.3.0 — 2025-02-20
- 0.2.1 — 2025-01-31
- 0.2.0 — 2024-06-17
- 0.1.3 — 2024-06-16
- 0.1.2 — 2024-05-06
- 0.1.1 — 2024-05-06
- 0.1.0 — 2024-03-02
- 0.0.3 — 2024-01-13
- 0.0.1 — 2023-07-28

## README

# Vaul Vue

Vaul Vue is an unstyled drawer component for Vue that can be used as a Dialog replacement on tablet and mobile devices.
It uses [Reka UI's Dialog primitive](https://www.reka-ui.com/docs/components/dialog) under the hood and is a feature complete port of [Emil Kowalski's Vaul library](https://github.com/emilkowalski/vaul) (built for React).

## Installation

```bash
pnpm add vaul-vue
```

```bash
npm install vaul-vue
```

```bash
yarn add vaul-vue
```

## Usage

```vue
<script setup lang="ts">
import { DrawerContent, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTrigger } from 'vaul-vue'
</script>

<template>
  <DrawerRoot>
    <DrawerTrigger> Open </DrawerTrigger>
    <DrawerPortal>
      <DrawerOverlay />
      <DrawerContent>
        <p>Content</p>
      </DrawerContent>
    </DrawerPortal>
  </DrawerRoot>
</template>
```

## Credits

All credits go to these open-source works and resources

- Major credits go to [Emil Kowalski](https://emilkowal.ski/) for the original [Vaul library](https://github.com/emilkowalski/vaul).
- [Reka UI](https://www.reka-ui.com/) for the Dialog primitive used under the hood.

---
_Source: https://npm.io/package/vaul-vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._