aioli

This is a drawer/bottom-sheet library based on radix-vue. It is heavily inspired by Vaul and pretty much a Vue port of it.

Installation

pnpm add aioli

npm install aioli

yarn add aioli

Usage

<script setup>
import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent } from 'aioli';
</script>

<template>
<DialogRoot>
  <DialogTrigger>Open</DialogTrigger>
  <DialogPortal>
    <DialogContent>
      Content
    </DialogContent>
    <DialogOverlay />
  </DialogPortal>
</DialogRoot>
</template>

Credits

• Vaul for the awesome drawer idea/implementation ❤️
• radix-vue for the Radix UI port
• VueUse

Why the name?

Originally I wanted to name it something along the lines of vaul-vue but while porting Vaul I realized that I wanted to make some changes to the Implementation and API. Naming it vaul-vue seemed a bit misleading then.

So I decided to name it something else. I couldn't think of anything for a while. Ultimately some friends suggested Aioli and I just went with it.