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

1pnpm add aioli radix-vue
2
3npm install aioli radix-vue
4
5yarn add aioli radix-vue

Usage

1<script setup>
2import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent } from 'aioli';
3</script>
4
5<template>
6<DialogRoot>
7  <DialogTrigger>Open</DialogTrigger>
8  <DialogPortal>
9    <DialogContent>
10      Content
11    </DialogContent>
12    <DialogOverlay />
13  </DialogPortal>
14</DialogRoot>
15</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.