@reelkit/vue

@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