DOCSEARCHbyAlgolia
Submit Docs

Vaul Vue

repository·main·Indexed 19 days ago

https://github.com/unovue/vaul-vue

An unstyled drawer component for Vue, designed as a mobile and tablet-friendly Dialog replacement. A port of the React-based Vaul library utilizing Reka UI's Dialog primitive. Note: This library is no longer maintained; users are encouraged to migrate to Reka UI's Drawer component.

Tokens
2.8K
Snippets
12
Records
16
Agent score
67%

What's inside vaul-vue

  1. Configure IDE and TypeScript support for .vue files

    main

    For optimal development experience with Vue 3 and TypeScript in VSCode, follow these recommendations:

    Recommended Extensions

    • VSCode
    • Volar (Disable Vetur)
    • TypeScript Vue Plugin (Volar)

    Handling .vue Type Information

    Because TypeScript does not natively handle .vue imports, this project uses vue-tsc instead of tsc for type checking. To ensure your editor recognizes .vue types, you must use the TypeScript Vue Plugin (Volar).

    Enabling Volar Take Over Mode (Performance Optimization)

    If the standalone TypeScript plugin is slow, you can enable Take Over Mode for better performance:

    1. Open the VSCode command palette and run Extensions: Show Built-in Extensions.
    2. Find TypeScript and JavaScript Language Features, right-click it, and select Disable (Workspace).
    3. Run Developer: Reload Window from the command palette to reload VSCode.

  7. Use the Vaul Vue Drawer component

    main

    Vaul Vue provides an unstyled drawer component for Vue, designed as a Dialog replacement for tablet and mobile devices. It is built on top of Reka UI's Dialog primitive.

    To implement a basic drawer, use the following components:

    • DrawerRoot: The main container that manages the drawer state.
    • DrawerTrigger: The element that opens the drawer.
    • DrawerPortal: A container that renders the drawer content into a portal (usually at the end of the document body).
    • DrawerOverlay: The background overlay that appears when the drawer is open.
    • DrawerContent: The actual drawer panel containing your content.
    <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>

  8. Configure snap point fading

    main

    When using snapPoints, you can control when the background overlay begins to fade out using the fadeFromIndex prop on DrawerRoot.

    • snapPoints: An array of positions (e.g., [0.2, 0.5, 0.8]).
    • fadeFromIndex: An index of the snapPoint array. The overlay fade will be applied starting from this index.

    Note: If fadeFromIndex is not provided, it defaults to the last snap point.

  9. Configure DrawerRoot props

    main

    The DrawerRoot component accepts several props to control its behavior, appearance, and interaction model. Key configuration options include:

    • Open State: Use open (boolean) for controlled state or defaultOpen (boolean) to skip the initial enter animation.
    • Snap Points: Use snapPoints (array of number | string) to define specific heights/positions. Values can be percentages (0-100) or pixel values.
    • Dismissal & Modality:
      • dismissible: If false, the drawer won't close via dragging, clicking outside, or pressing Esc. Defaults to true.
      • modal: If true, the drawer behaves as a modal (interacts with overlay). Defaults to true.
    • Interaction:
      • handleOnly: If true, the drawer can only be dragged via the <Drawer.Handle /> component. Defaults to false.
      • closeThreshold: A number between 0 and 1 determining how far a user must swipe to close the drawer. Defaults to 0.25.
    • Visuals:
      • direction: The drawer's movement direction ('bottom', 'top', 'left', or 'right'). Defaults to 'bottom'.
      • shouldScaleBackground: Enables background scaling when the drawer opens.
      • setBackgroundColorOnScale: Controls whether the body background color changes when scaling. Defaults to true.
    • Layout & Scrolling:
      • fixed: If true, prevents the drawer from moving upwards when the keyboard is open, adjusting height instead.
      • noBodyStyles: If true, prevents Vaul from applying styles to the body element.
      • preventScrollRestoration: Prevents automatic scroll restoration behavior.
    // Example configuration
<DrawerRoot 
  :open="isOpen" 
  @update:open="isOpen = $event"
  :snap-points="[200, 500, '80%']"
  direction="bottom"
  :dismissible="true"
  :modal="true"
>
  <!-- Drawer content -->
</DrawerRoot>

  10. Use the core Vaul Vue components

    main

    Vaul Vue provides a set of components for building drawer interfaces. The primary components are:

    • DrawerRoot: The main provider component that manages the drawer state.
    • DrawerRootNested: A variant of the root component designed for nested drawer implementations.
    • DrawerOverlay: The backdrop component that appears behind the drawer content.
    • DrawerContent: The container that holds the drawer's actual content.
    • DrawerHandle: A visual handle (often used for drag indicators) within the drawer content.
    <script setup>
import {
  DrawerRoot,
  DrawerTrigger,
  DrawerContent,
  DrawerOverlay,
  DrawerHandle
} from 'vaul-vue'
</script>

<template>
  <DrawerRoot>
    <DrawerTrigger>Open Drawer</DrawerTrigger>
    <DrawerOverlay />
    <DrawerContent>
      <DrawerHandle />
      <!-- Drawer content goes here -->
    </DrawerContent>
  </DrawerRoot>
</template>

  12. Use reka-ui components as Vaul Vue aliases

    main

    Vaul Vue re-exports several components from reka-ui under names that align with the drawer terminology. This allows you to use standard dialog/drawer patterns seamlessly:

    • DrawerClose (aliased from DialogClose): Used to close the drawer.
    • DrawerDescription (aliased from DialogDescription): For accessibility descriptions.
    • DrawerPortal (aliased from DialogPortal): To render the drawer in a portal.
    • DrawerTitle (aliased from DialogTitle): For the drawer's title.
    • DrawerTrigger (aliased from DialogTrigger): To trigger the drawer opening.
    <script setup>
import {
  DrawerTrigger,
  DrawerContent,
  DrawerClose,
  DrawerTitle,
  DrawerDescription
} from 'vaul-vue'
</script>

<template>
  <DrawerTrigger>Open</DrawerTrigger>
  <DrawerContent>
    <DrawerTitle>Drawer Title</DrawerTitle>
    <DrawerDescription>Description text</DrawerDescription>
    <DrawerClose>Close</DrawerClose>
  </DrawerContent>
</template>