vue3-flashcards

Vue 3 Flashcards

A Tinder-like flashcards component for Vue 3 with smooth animations and intuitive gestures

📚 Documentation • 🎮 Examples • 🚀 Getting Started • ▶️ Interactive Demo

✨ Features

• 🎯 Tinder-style swiping — intuitive drag gestures with smooth animations
• 🔄 Card flipping — two-sided cards with a flip animation
• ⚡ Zero dependencies — built purely with Vue 3 and CSS
• 📱 Touch & mouse — works on desktop and mobile
• 🎨 Bring your own styles — the library ships no CSS for card content; you style it however you like
• 🔧 Customizable — props, slots, events, custom transforms and animations
• ♾️ Loop mode, 🃏 stacked cards, ↩️ restore (undo), and ⚙️ virtual rendering for large decks

📦 Installation

npm install vue3-flashcards
# or: yarn add vue3-flashcards · pnpm add vue3-flashcards

🚀 Quick Start

A minimal swipeable deck. The library handles the gestures and animations — you provide the card content and its styling (plain CSS here):

<script setup>
import { ref } from 'vue'
import { FlashCards } from 'vue3-flashcards'

const cards = ref([
  { id: 1, title: 'First Card' },
  { id: 2, title: 'Second Card' },
  { id: 3, title: 'Third Card' },
])

function onSwipeRight(item) {
  console.log('liked', item)
}
function onSwipeLeft(item) {
  console.log('passed', item)
}
</script>

<template>
  <FlashCards
    :items="cards"
    @swipe-right="onSwipeRight"
    @swipe-left="onSwipeLeft"
  >
    <template #default="{ item }">
      <div class="card">
        <h2>{{ item.title }}</h2>
      </div>
    </template>
  </FlashCards>
</template>

<style scoped>
.card {
  width: 300px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
</style>

That's the whole basic usage. Everything below is optional.

[!NOTE] Styling is up to you. The library provides the swipe / flip / stack mechanics but no visual styles for your card content. The examples use plain CSS; you can use any approach (CSS Modules, UnoCSS, Tailwind, a UI kit, etc.).

📖 Learn more

The full documentation has guides, runnable examples, and the complete API:

• Getting Started — install and build your first deck
• Essentials — swipe directions, card content, events, actions, flip cards
• Advanced — stacks, loop mode, drag limits, custom transforms & transitions, virtual rendering
• Examples — Tinder-style, flip cards, custom actions, and more
• API Reference — every prop, slot, event, and method
• Migrating to v2 — upgrading from v1 / v0.x

Using Nuxt or want global defaults? See Installation for the Vue plugin and Nuxt module.

License

MIT © vad1ym