@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. ~5.2 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)
• Overlay building blocks — SwipeToClose, SoundProvider, useFullscreen, useBodyLock, useOverlayUrlState
• Full WAI-ARIA carousel accessibility
• Typed with TypeScript, no @types package needed

API

Reel Props

Reel Events

ReelIndicator Props

Composables

toVueRef wraps a core Signal as a Vue ref — reading signal.value straight in a template compiles to a static snapshot that never updates.

Components

Documentation

Guide at reelkit.dev/docs/vue/guide, full API reference at reelkit.dev/docs/vue/api.

Contributing

Issues and pull requests are welcome. The contributing guide covers setting up the workspace, making a change, and what a pull request needs.

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