Warning
This package is no longer maintained. Reka UI now ships a full Drawer component that supersedes Vaul Vue, and the original Vaul library is no longer actively maintained either. We recommend migrating to Reka UI's Drawer for new and existing projects.
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 under the hood and is a feature complete port of Emil Kowalski's Vaul library (built for React).
pnpm add vaul-vuenpm install vaul-vueyarn add vaul-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>All credits go to these open-source works and resources
- Major credits go to Emil Kowalski for the original Vaul library.
- Reka UI for the Dialog primitive used under the hood.