@svar-ui/vue-kanban

SVAR Vue Kanban

Homepage • Getting Started • Demos

SVAR Vue Kanban is a customizable, interactive Kanban board component for VueJS. It supports drag-and-drop between columns, card editing, filtering, and rich customization options.

The kanban comes with full TypeScript support, extensible API, and flexible CSS styling. The PRO Edition offers extra features for enterprise projects (export to pdf, dynamical loading, undo history).

✨ Key Features

• Drag-and-drop cards between columns and rows
• Built-in card editor
• Context menu and toolbar
• Card filtering
• REST data provider for backend integration
• Custom card templates
• Localization
• Light and dark skins
• Full TypeScript support

🚀 PRO Edition

SVAR Vue Kanban is available in open-source and PRO Editions. The PRO Edition offers extra features for enterprise projects:

• Export to PDF/PNG/Excel
• Dynamical data loading
• Undo history

Visit the pricing page for licensing details and feature comparison.

:hammer_and_wrench: How to Use

To install SVAR Vue Kanban:

npm install @svar-ui/vue-kanban

To use the widget, simply import the package and include the component in your Vue file:

<script setup>
import { Kanban } from "@svar-ui/vue-kanban";

const cards = [
    { id: 1, label: "Design", column: "todo" },
    { id: 2, label: "Implement", column: "doing" },
];
const columns = [
    { id: "todo", label: "To Do" },
    { id: "doing", label: "Doing" },
    { id: "done", label: "Done" },
];
</script>

<template>
    <Kanban :cards="cards" :columns="columns" />
</template>

For further instructions, follow the detailed quick start guide.

:star: Show Your Support

If SVAR Vue Kanban helps your project, give us a star! It helps us reach more developers and keeps us motivated to add new features.

:speech_balloon: Need Help?

Post an Issue or use our community forum.