@reelkit/vue

Vue 3 bindings for @reelkit/core. Drop in a <Reel> component, give it a slide count and an item slot — it handles virtualization, gestures, and keyboard/wheel input. ~4.7 kB gzip.

Live Demo · Open in StackBlitz

Installation

npm install @reelkit/vue

Quick Start

<script setup lang="ts">
import { Reel, ReelIndicator } from '@reelkit/vue';
</script>

<template>
  <Reel :count="100" direction="vertical" enable-wheel>
    <template #item="{ index, size }">
      <div :style="{ width: `${size[0]}px`, height: `${size[1]}px` }">
        Slide {{ index + 1 }}
      </div>
    </template>

    <!-- Auto-connects to parent Reel via context -->
    <ReelIndicator />
  </Reel>
</template>

Features

• <Reel> — virtualized slider, keeps only 3 slides in the DOM
• <ReelIndicator> — dot indicators that auto-connect to the parent <Reel> via provide/inject
• Measures its own size via ResizeObserver — no width/height props needed
• Swipe with momentum and snap, keyboard arrows, mouse wheel
• Loop mode for infinite circular scrolling
• Tree-shakeable transitions (slide, cube, fade, flip, zoom)
• Full WAI-ARIA carousel accessibility
• Typed with TypeScript, no @types package needed

API

Reel Props

| Prop | Type | Default | Description | | --------------------- | ---------------------------- | ------------ | ----------------------------- | | count | number | required | Number of slides | | direction | 'horizontal' \| 'vertical' | 'vertical' | Slide direction | | initialIndex | number | 0 | Starting slide index | | loop | boolean | false | Enable infinite loop | | swipeDistanceFactor | number | 0.12 | Swipe threshold (0-1) | | transitionDuration | number | 300 | Animation duration in ms | | enableNavKeys | boolean | true | Enable keyboard navigation | | enableWheel | boolean | false | Enable mouse wheel navigation | | wheelDebounceMs | number | 200 | Wheel debounce duration | | enableGestures | boolean | true | Enable touch/mouse gestures | | transition | TransitionTransformFn | slide | Transition effect function | | size | [number, number] | auto | Explicit [width, height] |

Reel Events

| Event | Payload | Description | | -------------- | --------------------------- | ------------------- | | afterChange | index, indexInRange | After slide change | | beforeChange | index, nextIndex, inRange | Before slide change | | tap | GestureCommonEvent | Single tap | | doubleTap | GestureCommonEvent | Double tap | | longPress | GestureCommonEvent | Long press detected | | longPressEnd | GestureEvent | Long press released |

ReelIndicator Props

| Prop | Type | Default | Description | | ------------ | ---------------------------- | ------------ | ---------------------------- | | count | number | context | Total number of slides | | active | number | context | Currently active slide index | | direction | 'horizontal' \| 'vertical' | 'vertical' | Dot axis | | radius | number | 3 | Dot radius in pixels | | visible | number | 5 | Number of visible dots | | gap | number | 4 | Space between dots | | onDotClick | (index) => void | - | Callback when dot is clicked |

Composables

| Composable | Description | | ---------------- | -------------------------------------------- | | useBodyLock | Lock body scroll for overlays | | useFullscreen | Fullscreen API with cross-browser support | | useSoundState | Access sound controller from SoundProvider | | useReelContext | Access parent Reel's index, count, and goTo |

Components

| Component | Description | | --------------- | --------------------------------------- | | SwipeToClose | Swipe-to-dismiss wrapper for overlays | | SoundProvider | Provides shared sound mute/unmute state |

Documentation

API reference, demos, and guides at reelkit.dev.

Support

If ReelKit saved you some time, a star on GitHub would mean a lot — it's a small thing, but it really helps the project get noticed.

License

MIT