Vue 3 Flashcards

✨ Features

• 🎯 Tinder-style interactions - Intuitive swipe gestures with smooth animations
• 🔄 Card flipping - Two-sided cards with beautiful flip animations
• ⚡ Zero dependencies - Lightweight and performant, built purely with Vue 3 and CSS
• 🎨 Smooth animations - Hardware-accelerated CSS transitions for 60fps performance
• 🔧 Highly customizable - Extensive API with props, slots, events, and custom transforms
• 📱 Touch & Mouse support - Works seamlessly on desktop and mobile devices
• ♾️ Loop mode - Loop through cards endlessly for continuous swiping
• 🎯 Stack visualization - Show multiple cards stacked with customizable depth and direction
• ⚙️ Virtual rendering - Efficient rendering for large datasets with render limit
• 🔄 Restore functionality - Undo swipes and bring cards back to the stack

📦 Installation

# npm
npm install vue3-flashcards

# yarn
yarn add vue3-flashcards

# pnpm
pnpm add vue3-flashcards

🚀 Quick Start

Basic Usage

<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' },
])
</script>

<template>
  <FlashCards
    :items="cards"
    #="{ item }"
  >
    <div class="card">
      <h2>{{ item.title }}</h2>
    </div>
  </FlashCards>
</template>

Vue Plugin (Global Configuration)

Install the plugin to register components globally and set default configuration:

// main.ts
import { createApp } from 'vue'
import { FlashCardsPlugin } from 'vue3-flashcards'
import App from './App.vue'

const app = createApp(App)

app.use(FlashCardsPlugin, {
  flashCards: {
    // Global defaults for FlashCards components
    stack: 3,
    stackOffset: 25,
    swipeThreshold: 150,
    loop: true,
  },
  flipCard: {
    // Global defaults for FlipCard components
    flipAxis: 'x',
    waitAnimationEnd: false,
  }
})

app.mount('#app')

Now components are globally available without imports:

<template>
  <!-- No imports needed! -->
  <FlashCards :items="cards">
    <template #default="{ item }">
      <div>{{ item.title }}</div>
    </template>
  </FlashCards>

  <FlipCard>
    <template #front>
      Front
    </template>
    <template #back>
      Back
    </template>
  </FlipCard>
</template>

Nuxt Module

For Nuxt applications, use the dedicated module:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['vue3-flashcards/nuxt'],

  // Global configuration
  flashcards: {
    stack: 3,
    stackOffset: 25,
    swipeThreshold: 150,
    loop: true,
  }
})

Components are auto-imported and globally available:

<template>
  <!-- Auto-imported, no imports needed! -->
  <FlashCards :items="cards">
    <template #default="{ item }">
      <div>{{ item.title }}</div>
    </template>
  </FlashCards>

  <FlipCard>
    <template #front>
      Front
    </template>
    <template #back>
      Back
    </template>
  </FlipCard>
</template>

Features:

• ✅ SSR Compatible - Works perfectly with server-side rendering
• ✅ Auto-import - Components available without imports
• ✅ Global Config - Set defaults for all components
• ✅ TypeScript - Full IntelliSense in nuxt.config.ts

📖 API Reference

For complete documentation, visit documentation

FlashCards Props

Transform Style Function

The transformStyle prop allows you to customize how cards transform during drag interactions. It receives a DragPosition object with x, y, and delta properties.

Default behavior:

function defaultTransform(position) {
  return `transform: rotate(${position.delta * maxRotation}deg)`
}

Custom examples:

// Scale effect
function scaleTransform(position) {
  return `transform: rotate(${position.delta * 15}deg) scale(${1 - Math.abs(position.delta) * 0.1})`
}

// Blur effect
function blurTransform(position) {
  return `transform: rotate(${position.delta * 20}deg); filter: blur(${Math.abs(position.delta) * 3}px)`
}

Key Slots

Events

Exposed

FlipCard Component

The FlipCard component provides card flipping functionality and can be used independently or within FlashCards.

Props

Slots

Events

Exposed Methods

FlipCard Usage Example

<script setup>
import { FlipCard } from 'vue3-flashcards'
</script>

<template>
  <FlipCard>
    <template #front>
      <div class="card-front">
        Front Content
      </div>
    </template>
    <template #back>
      <div class="card-back">
        Back Content
      </div>
    </template>
  </FlipCard>
</template>