Getting Started

Upgrading from v0.x?

See the Migration Guide for upgrading from previous versions.

Quick start guide to building your first swipeable card interface.

Installation

npm install vue3-flashcards

See all installation options →

Quick Start

Here's a minimal example:

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

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

function handleSwipeLeft(item) {
  console.log('Swiped left:', item)
}

function handleSwipeRight(item) {
  console.log('Swiped right:', item)
}
</script>

<template>
  <FlashCards
    :items="cards"
    @swipe-left="handleSwipeLeft"
    @swipe-right="handleSwipeRight"
  >
    <template #default="{ item }">
      <div class="card">
        <h3>{{ item.text }}</h3>
      </div>
    </template>
  </FlashCards>
</template>

Next Steps

• Installation - npm, yarn, pnpm, Vue plugin, Nuxt module
• Basic Concepts - Items array, card lifecycle, events
• Essentials - Core features: swipe directions, events, actions
• Examples - Interactive demos