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 under the hood and is a feature complete port of Emil Kowalski's Vaul library (built for React).

Installation

1pnpm add vaul-vue

1npm install vaul-vue

1yarn add vaul-vue

Usage

1<script setup lang="ts">
2import { DrawerContent, DrawerOverlay, DrawerPortal, DrawerRoot, DrawerTrigger } from 'vaul-vue'
3</script>
4
5<template>
6  <DrawerRoot>
7    <DrawerTrigger> Open </DrawerTrigger>
8    <DrawerPortal>
9      <DrawerOverlay />
10      <DrawerContent>
11        <p>Content</p>
12      </DrawerContent>
13    </DrawerPortal>
14  </DrawerRoot>
15</template>

Credits

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.