Vaul Vue is an unstyled drawer component for Vue that can be used as a Dialog replacement on tablet and mobile devices. It uses Radix Vue'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.
- Radix Vue for the Dialog primitive used under the hood.