Vaul Vue

[!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).

Installation

pnpm add vaul-vue

npm install vaul-vue

yarn add vaul-vue

Usage

<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 for the original Vaul library.
• Reka UI for the Dialog primitive used under the hood.