### Install Vaul Vue with npm

Source: https://github.com/unovue/vaul-vue/blob/main/README.md

Installs the Vaul Vue package using the npm package manager. This is another standard method for managing project dependencies.

```bash
npm install vaul-vue
```

--------------------------------

### Install Vaul Vue with pnpm

Source: https://github.com/unovue/vaul-vue/blob/main/README.md

Installs the Vaul Vue package using the pnpm package manager. This is a common way to add dependencies to a Vue project.

```bash
pnpm add vaul-vue
```

--------------------------------

### Install vaul-vue Package

Source: https://context7.com/unovue/vaul-vue/llms.txt

Instructions for installing the vaul-vue package using npm, pnpm, or yarn. This is the first step before using the component library.

```bash
npm install vaul-vue
```

```bash
pnpm add vaul-vue
```

```bash
yarn add vaul-vue
```

--------------------------------

### Basic Usage of Vaul Vue Drawer Component

Source: https://github.com/unovue/vaul-vue/blob/main/README.md

Demonstrates the basic setup for using the Vaul Vue drawer component. It shows how to import necessary components and structure the template for a functional drawer.

```vue
<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>
```

--------------------------------

### Install Vaul Vue with yarn

Source: https://github.com/unovue/vaul-vue/blob/main/README.md

Installs the Vaul Vue package using the yarn package manager. This is a popular alternative for managing dependencies in JavaScript projects.

```bash
yarn add vaul-vue
```

--------------------------------

### Vue: Implement Nested Vaul-Vue Drawers

Source: https://context7.com/unovue/vaul-vue/llms.txt

This example demonstrates how to create nested drawers using Vaul-Vue. It shows the structure for placing a `DrawerRootNested` inside the content of a parent `DrawerRoot`. Proper z-index management is handled internally by the library. It imports relevant components from 'vaul-vue'.

```vue
<script setup lang="ts">
import {
  DrawerRoot,
  DrawerRootNested,
  DrawerTrigger,
  DrawerPortal,
  DrawerOverlay,
  DrawerContent
} from 'vaul-vue'
</script>

<template>
  <DrawerRoot>
    <DrawerTrigger>Open Parent Drawer</DrawerTrigger>
    <DrawerPortal>
      <DrawerOverlay class="fixed inset-0 bg-black/40" />
      <DrawerContent class="fixed bottom-0 left-0 right-0 bg-white rounded-t-xl p-6 h-[600px]">
        <h2 class="text-xl font-bold mb-4">Parent Drawer</h2>
        <p class="mb-4">Open a nested drawer from here</p>

        <!-- Nested drawer -->
        <DrawerRootNested>
          <DrawerTrigger>Open Nested Drawer</DrawerTrigger>
          <DrawerPortal>
            <DrawerOverlay class="fixed inset-0 bg-black/40" />
            <DrawerContent class="fixed bottom-0 left-0 right-0 bg-white rounded-t-xl p-6 h-[400px]">
              <h3 class="text-lg font-bold mb-4">Nested Drawer</h3>
              <p>This drawer is nested inside the parent</p>
            </DrawerContent>
          </DrawerPortal>
        </DrawerRootNested>
      </DrawerContent>
    </DrawerPortal>
  </DrawerRoot>
</template>
```

--------------------------------

### Vue: Track Drawer Events with Event Handlers

Source: https://context7.com/unovue/vaul-vue/llms.txt

This example illustrates how to track user interactions with the Vaul-Vue Drawer using various event listeners. It demonstrates how to capture drag percentage, release state, close events, open state changes, and animation end events. It uses `ref` from 'vue' for state management and imports drawer components from 'vaul-vue'.

```vue
<script setup lang="ts">
import { ref } from 'vue'
import {
  DrawerRoot,
  DrawerTrigger,
  DrawerPortal,
  DrawerOverlay,
  DrawerContent
} from 'vaul-vue'

const dragPercentage = ref(0)
const isReleased = ref(false)

function handleDrag(percentage: number) {
  dragPercentage.value = Math.round(percentage * 100)
  console.log('Dragged:', dragPercentage.value + '%')
}

function handleRelease(open: boolean) {
  isReleased.value = !open
  console.log('Released, drawer', open ? 'open' : 'closed')
}

function handleClose() {
  console.log('Drawer closed')
}

function handleOpenChange(open: boolean) {
  console.log('Open state changed to:', open)
}

function handleAnimationEnd(open: boolean) {
  console.log('Animation ended, drawer is', open ? 'open' : 'closed')
}
</script>

<template>
  <div>
    <div class="p-4 mb-4 bg-gray-100 rounded">
      <p>Drag percentage: {{ dragPercentage }}%</p>
      <p>Released: {{ isReleased ? 'Yes' : 'No' }}</p>
    </div>

    <DrawerRoot
      @drag="handleDrag"
      @release="handleRelease"
      @close="handleClose"
      @update:open="handleOpenChange"
      @animation-end="handleAnimationEnd"
    >
      <DrawerTrigger>Open Tracked Drawer</DrawerTrigger>
      <DrawerPortal>
        <DrawerOverlay class="fixed inset-0 bg-black/40" />
        <DrawerContent class="fixed bottom-0 left-0 right-0 bg-white rounded-t-xl p-6 h-[400px]">
          <h2 class="text-xl font-bold mb-4">Drawer with Events</h2>
          <p>Drag to see event data update above</p>
        </DrawerContent>
      </DrawerPortal>
    </DrawerRoot>
  </div>
</template>
```

--------------------------------

### Vue: Customize Drawer Close Threshold

Source: https://context7.com/unovue/vaul-vue/llms.txt

This example shows how to customize the drag distance required to close the Vaul-Vue Drawer. By default, this is 25% of the drawer's height. This example sets it to 50% using the `close-threshold` prop on `DrawerRoot`. It imports necessary components from 'vaul-vue'.

```vue
<script setup lang="ts">
import {
  DrawerRoot,
  DrawerTrigger,
  DrawerPortal,
  DrawerOverlay,
  DrawerContent
} from 'vaul-vue'
</script>

<template>
  <DrawerRoot :close-threshold="0.5">
    <DrawerTrigger>Open Drawer (50% threshold)</DrawerTrigger>
    <DrawerPortal>
      <DrawerOverlay class="fixed inset-0 bg-black/40" />
      <DrawerContent class="fixed bottom-0 left-0 right-0 bg-white rounded-t-xl p-6 h-[400px]">
        <p>You must drag more than 50% of the drawer height to close it</p>
      </DrawerContent>
    </DrawerPortal>
  </DrawerRoot>
</template>
```

--------------------------------

### Vaul-Vue Non-Dismissible Drawer for Required Actions

Source: https://context7.com/unovue/vaul-vue/llms.txt

This Vue.js example shows how to create a non-dismissible drawer using `vaul-vue`. The drawer is controlled by a `v-model:open` binding and cannot be closed by dragging or clicking the overlay. It's designed for scenarios where a user must complete a specific action before the drawer can be closed, using the `dismissible` and `modal` props.

```vue
<script setup lang="ts">
import { ref } from 'vue'
import {
  DrawerRoot,
  DrawerTrigger,
  DrawerPortal,
  DrawerOverlay,
  DrawerContent
} from 'vaul-vue'

const isOpen = ref(false)

function handleComplete() {
  // Must complete required action
  console.log('Action completed')
  isOpen.value = false
}
</script>

<template>
  <DrawerRoot
    v-model:open="isOpen"
    :dismissible="false"
    :modal="true"
  >
    <DrawerTrigger>Open Required Action</DrawerTrigger>
    <DrawerPortal>
      <DrawerOverlay class="fixed inset-0 bg-black/60" />
      <DrawerContent class="fixed bottom-0 left-0 right-0 bg-white rounded-t-xl p-6">
        <h2 class="text-xl font-bold mb-4">Complete This Action</h2>
        <p class="mb-4">You must complete this action to continue.</p>
        <button
          @click="handleComplete"
          class="bg-green-500 text-white px-4 py-2 rounded w-full"
        >
          Complete & Close
        </button>
      </DrawerContent>
    </DrawerPortal>
  </DrawerRoot>
</template>
```

--------------------------------

### Vue: Restrict Drawer Dragging to Handle

Source: https://context7.com/unovue/vaul-vue/llms.txt

This example shows how to configure the Vaul-Vue Drawer to only allow dragging via its handle element. This is useful for controlling scrollable content within the drawer. It imports necessary components from 'vaul-vue' and uses the `handle-only` prop on `DrawerRoot`.

```vue
<script setup lang="ts">
import {
  DrawerRoot,
  DrawerTrigger,
  DrawerPortal,
  DrawerOverlay,
  DrawerContent,
  DrawerHandle
} from 'vaul-vue'
</script>

<template>
  <DrawerRoot :handle-only="true">
    <DrawerTrigger>Open Drawer</DrawerTrigger>
    <DrawerPortal>
      <DrawerOverlay class="fixed inset-0 bg-black/40" />
      <DrawerContent class="fixed bottom-0 left-0 right-0 bg-white rounded-t-xl">
        <DrawerHandle class="mx-auto w-12 h-1.5 bg-gray-300 rounded-full mt-4 mb-2" />
        <div class="p-6 overflow-auto h-[500px]">
          <h2 class="text-xl font-bold mb-4">Scrollable Content</h2>
          <p class="mb-2">Only the handle above can drag the drawer.</p>
          <p class="mb-2">This content area is fully scrollable without triggering drawer drag.</p>
          <div class="space-y-2">
            <p v-for="i in 50" :key="i">Scrollable item {{ i }}</p>
          </div>
        </div>
      </DrawerContent>
    </DrawerPortal>
  </DrawerRoot>
</template>
```

--------------------------------

### Vaul Vue DrawerRoot TypeScript Props Reference

Source: https://context7.com/unovue/vaul-vue/llms.txt

Provides a comprehensive reference for the `DrawerRootProps` interface in Vaul Vue, detailing all available configuration options for controlling drawer state, behavior, visual effects, and drag interactions. This allows for type-safe and advanced customization of the drawer component.

```typescript
import type { DrawerRootProps, DrawerDirection } from 'vaul-vue'

// Complete prop interface
const drawerConfig: DrawerRootProps = {
  // State control
  open: undefined,                    // v-model:open for controlled state
  defaultOpen: false,                 // Initial open state

  // Snap points
  snapPoints: [0.2, 0.5, 0.8],       // Array of percentages or px strings
  activeSnapPoint: 0.5,               // v-model:active-snap-point
  fadeFromIndex: 2,                   // Start overlay fade from this snap index

  // Behavior
  dismissible: true,                  // Allow closing via drag/click outside
  modal: true,                        // Block interaction with outside elements
  closeThreshold: 0.25,               // Drag percentage needed to close (0-1)
  direction: 'bottom',                // 'top' | 'bottom' | 'left' | 'right'

  // Visual effects
  shouldScaleBackground: true,        // Scale background content
  setBackgroundColorOnScale: true,    // Change background color when scaled

  // Drag behavior
  handleOnly: false,                  // Only drag from DrawerHandle component
  scrollLockTimeout: 500,             // Ms before allowing drag after scroll

  // Advanced
  nested: false,                      // Is this a nested drawer
  fixed: false,                       // Don't move drawer up when keyboard opens
  noBodyStyles: false,                // Don't apply body styles
  preventScrollRestoration: false,    // Don't restore scroll on close
}

```

--------------------------------

### Basic Drawer Implementation in Vue

Source: https://context7.com/unovue/vaul-vue/llms.txt

Demonstrates a simple Vaul Vue drawer that opens from the bottom with a trigger button. It utilizes DrawerRoot, DrawerTrigger, DrawerPortal, DrawerOverlay, and DrawerContent components for basic functionality.

```vue
<script setup lang="ts">
import {
  DrawerRoot,
  DrawerTrigger,
  DrawerPortal,
  DrawerOverlay,
  DrawerContent
} from 'vaul-vue'
</script>

<template>
  <DrawerRoot>
    <DrawerTrigger>Open Drawer</DrawerTrigger>
    <DrawerPortal>
      <DrawerOverlay class="fixed inset-0 bg-black/40" />
      <DrawerContent class="fixed bottom-0 left-0 right-0 bg-white rounded-t-xl p-4">
        <p>Drawer content goes here</p>
      </DrawerContent>
    </DrawerPortal>
  </DrawerRoot>
</template>
```

--------------------------------

### Drawer with Pixel-Based Snap Points in Vue

Source: https://context7.com/unovue/vaul-vue/llms.txt

Illustrates using fixed pixel values mixed with viewport percentages for snap points in Vaul Vue drawers. This allows for precise positioning independent of screen size.

```vue
<script setup lang="ts">
import {
  DrawerRoot,
  DrawerTrigger,
  DrawerPortal,
  DrawerOverlay,
  DrawerContent,
  DrawerHandle
} from 'vaul-vue'

// Mix percentages and pixel values
const snapPoints = ['200px', '400px', 0.9]
</script>

<template>
  <DrawerRoot :snap-points="snapPoints">
    <DrawerTrigger>Open with Fixed Heights</DrawerTrigger>
    <DrawerPortal>
      <DrawerOverlay class="fixed inset-0 bg-black/40" />
      <DrawerContent class="fixed bottom-0 left-0 right-0 bg-white rounded-t-xl">
        <DrawerHandle class="mx-auto w-12 h-1.5 bg-gray-300 rounded-full mt-4" />
        <div class="p-6">
          <p>Drawer will snap to 200px, 400px, or 90% of screen height</p>
        </div>
      </DrawerContent>
    </DrawerPortal>
  </DrawerRoot>
</template>
```

--------------------------------

### Vaul-Vue Drawers with Directional Opening

Source: https://context7.com/unovue/vaul-vue/llms.txt

This Vue.js component illustrates how to implement drawers that open from different edges of the screen using `vaul-vue`. It showcases drawers opening from the bottom (default), top, left, and right by setting the `direction` prop on `DrawerRoot`. Each drawer includes a trigger, overlay, and content area, styled appropriately for their direction.

```vue
<script setup lang="ts">
import {
  DrawerRoot,
  DrawerTrigger,
  DrawerPortal,
  DrawerOverlay,
  DrawerContent
} from 'vaul-vue'
import type { DrawerDirection } from 'vaul-vue'
</script>

<template>
  <div class="p-8 space-y-4">
    <!-- Bottom drawer (default) -->
    <DrawerRoot direction="bottom">
      <DrawerTrigger>Open from Bottom</DrawerTrigger>
      <DrawerPortal>
        <DrawerOverlay class="fixed inset-0 bg-black/40" />
        <DrawerContent class="fixed bottom-0 left-0 right-0 bg-white rounded-t-xl p-6 h-[400px]">
          <p>Bottom drawer content</p>
        </DrawerContent>
      </DrawerPortal>
    </DrawerRoot>

    <!-- Top drawer -->
    <DrawerRoot direction="top">
      <DrawerTrigger>Open from Top</DrawerTrigger>
      <DrawerPortal>
        <DrawerOverlay class="fixed inset-0 bg-black/40" />
        <DrawerContent class="fixed top-0 left-0 right-0 bg-white rounded-b-xl p-6 h-[400px]">
          <p>Top drawer content</p>
        </DrawerContent>
      </DrawerPortal>
    </DrawerRoot>

    <!-- Left drawer -->
    <DrawerRoot direction="left">
      <DrawerTrigger>Open from Left</DrawerTrigger>
      <DrawerPortal>
        <DrawerOverlay class="fixed inset-0 bg-black/40" />
        <DrawerContent class="fixed left-0 top-0 bottom-0 bg-white rounded-r-xl p-6 w-[300px]">
          <p>Left drawer content</p>
        </DrawerContent>
      </DrawerPortal>
    </DrawerRoot>

    <!-- Right drawer -->
    <DrawerRoot direction="right">
      <DrawerTrigger>Open from Right</DrawerTrigger>
      <DrawerPortal>
        <DrawerOverlay class="fixed inset-0 bg-black/40" />
        <DrawerContent class="fixed right-0 top-0 bottom-0 bg-white rounded-l-xl p-6 w-[300px]">
          <p>Right drawer content</p>
        </DrawerContent>
      </DrawerPortal>
    </DrawerRoot>
  </div>
</template>
```

--------------------------------

### Drawer with Snap Points in Vue

Source: https://context7.com/unovue/vaul-vue/llms.txt

Implements a multi-position Vaul Vue drawer that snaps to predefined heights (20%, 50%, 100%) using the snapPoints prop and v-model:active-snap-point. Includes a DrawerHandle for interaction.

```vue
<script setup lang="ts">
import { ref } from 'vue'
import {
  DrawerRoot,
  DrawerTrigger,
  DrawerPortal,
  DrawerOverlay,
  DrawerContent,
  DrawerHandle
} from 'vaul-vue'

const snapPoints = [0.2, 0.5, 1]
const activeSnapPoint = ref<number | string>(0.5)

function handleSnapPointChange(point: number | string) {
  console.log('Snapped to:', point)
}
</script>

<template>
  <DrawerRoot
    :snap-points="snapPoints"
    v-model:active-snap-point="activeSnapPoint"
    @update:active-snap-point="handleSnapPointChange"
  >
    <DrawerTrigger>Open Multi-Position Drawer</DrawerTrigger>
    <DrawerPortal>
      <DrawerOverlay class="fixed inset-0 bg-black/40" />
      <DrawerContent class="fixed bottom-0 left-0 right-0 bg-white rounded-t-xl">
        <DrawerHandle class="mx-auto w-12 h-1.5 bg-gray-300 rounded-full mt-4" />
        <div class="p-6 overflow-auto">
          <h2 class="text-xl font-bold mb-4">Scrollable Content</h2>
          <p v-for="i in 50" :key="i" class="mb-2">
            Item {{ i }} - Drag the handle to snap to different heights
          </p>
        </div>
      </DrawerContent>
    </DrawerPortal>
  </DrawerRoot>
</template>
```

--------------------------------

### Vaul-Vue Drawer with Background Scaling and Color

Source: https://context7.com/unovue/vaul-vue/llms.txt

This Vue.js component demonstrates a drawer that scales down and optionally changes the background color of the main content when opened. It utilizes `vaul-vue` components for drawer functionality. The `should-scale-background` prop controls the scaling effect, and `set-background-color-on-scale` enables background color changes.

```vue
<script setup lang="ts">
import {
  DrawerRoot,
  DrawerTrigger,
  DrawerPortal,
  DrawerOverlay,
  DrawerContent
} from 'vaul-vue'
</script>

<template>
  <div>
    <div class="p-8">
      <h1>Main Content</h1>
      <p>This content will scale down when drawer opens</p>
    </div>

    <DrawerRoot
      should-scale-background
      :set-background-color-on-scale="true"
    >
      <DrawerTrigger class="fixed bottom-4 right-4 bg-blue-500 text-white px-4 py-2 rounded">
        Open
      </DrawerTrigger>
      <DrawerPortal>
        <DrawerOverlay class="fixed inset-0 bg-black/40" />
        <DrawerContent class="fixed bottom-0 left-0 right-0 bg-white rounded-t-xl h-[90%] p-6">
          <h2 class="text-2xl font-bold mb-4">Immersive Drawer</h2>
          <p>Background content scales down for focus</p>
        </DrawerContent>
      </DrawerPortal>
    </DrawerRoot>
  </div>
</template>
```

--------------------------------

### Controlled Drawer with State Management in Vue

Source: https://context7.com/unovue/vaul-vue/llms.txt

Shows how to programmatically control the open/close state of a Vaul Vue drawer using v-model and a reactive reference. Includes a form within the drawer and a close button.

```vue
<script setup lang="ts">
import { ref } from 'vue'
import {
  DrawerRoot,
  DrawerTrigger,
  DrawerPortal,
  DrawerOverlay,
  DrawerContent,
  DrawerClose
} from 'vaul-vue'

const isOpen = ref(false)

function handleSubmit() {
  // Process form data
  console.log('Form submitted')
  isOpen.value = false
}
</script>

<template>
  <DrawerRoot v-model:open="isOpen">
    <DrawerTrigger>Open Form</DrawerTrigger>
    <DrawerPortal>
      <DrawerOverlay class="fixed inset-0 bg-black/40" />
      <DrawerContent class="fixed bottom-0 left-0 right-0 bg-white rounded-t-xl p-6">
        <h2 class="text-xl font-bold mb-4">Submit Form</h2>
        <form @submit.prevent="handleSubmit">
          <input type="text" placeholder="Enter data" class="border p-2 w-full mb-4" />
          <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded">
            Submit
          </button>
        </form>
        <DrawerClose class="absolute top-4 right-4">✕</DrawerClose>
      </DrawerContent>
    </DrawerPortal>
  </DrawerRoot>

  <!-- External control -->
  <button @click="isOpen = true" class="mt-4">
    Open from outside
  </button>
</template>
```

--------------------------------

### Vue Drawer with Accessibility Features

Source: https://context7.com/unovue/vaul-vue/llms.txt

Implements an accessible drawer component using Vaul Vue, incorporating ARIA labels and semantic HTML structure for improved user experience and screen reader compatibility. It includes a trigger, overlay, content, title, description, and close button.

```vue
<script setup lang="ts">
import {
  DrawerRoot,
  DrawerTrigger,
  DrawerPortal,
  DrawerOverlay,
  DrawerContent,
  DrawerTitle,
  DrawerDescription,
  DrawerClose
} from 'vaul-vue'
</script>

<template>
  <DrawerRoot>
    <DrawerTrigger aria-label="Open settings drawer">
      Settings
    </DrawerTrigger>
    <DrawerPortal>
      <DrawerOverlay class="fixed inset-0 bg-black/40" />
      <DrawerContent
        class="fixed bottom-0 left-0 right-0 bg-white rounded-t-xl p-6"
        aria-describedby="drawer-description"
      >
        <DrawerTitle class="text-2xl font-bold mb-2">
          Settings
        </DrawerTitle>
        <DrawerDescription id="drawer-description" class="text-gray-600 mb-4">
          Configure your application preferences
        </DrawerDescription>

        <div class="space-y-4">
          <label class="flex items-center">
            <input type="checkbox" class="mr-2" />
            <span>Enable notifications</span>
          </label>
          <label class="flex items-center">
            <input type="checkbox" class="mr-2" />
            <span>Dark mode</span>
          </label>
        </div>

        <DrawerClose class="mt-6 w-full bg-blue-500 text-white px-4 py-2 rounded">
          Close
        </DrawerClose>
      </DrawerContent>
    </DrawerPortal>
  </DrawerRoot>
</template>
```

--------------------------------

### Vue Drawer with No-Drag Zones

Source: https://context7.com/unovue/vaul-vue/llms.txt

Demonstrates how to prevent specific areas within a Vaul Vue drawer from triggering the drag-to-close functionality by using the `data-vaul-no-drag` attribute. This allows for interactive elements within the drawer without unintended drawer movement.

```vue
<script setup lang="ts">
import {
  DrawerRoot,
  DrawerTrigger,
  DrawerPortal,
  DrawerOverlay,
  DrawerContent
} from 'vaul-vue'
</script>

<template>
  <DrawerRoot>
    <DrawerTrigger>Open Drawer</DrawerTrigger>
    <DrawerPortal>
      <DrawerOverlay class="fixed inset-0 bg-black/40" />
      <DrawerContent class="fixed bottom-0 left-0 right-0 bg-white rounded-t-xl p-6">
        <h2 class="text-xl font-bold mb-4">Drawer Content</h2>

        <div class="bg-blue-100 p-4 rounded mb-4">
          <p>This area can trigger drawer drag</p>
        </div>

        <div data-vaul-no-drag class="bg-red-100 p-4 rounded">
          <p>This area will NOT trigger drawer drag</p>
          <button class="bg-white px-4 py-2 rounded mt-2">
            Clickable button (won't drag drawer)
          </button>
        </div>
      </DrawerContent>
    </DrawerPortal>
  </DrawerRoot>
</template>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.