A Vue.js component for creating drag-and-drop kanban boards with customizable workflows.
vue-kanban is a Vue.js component library for building interactive kanban boards with drag-and-drop functionality. It solves the need for customizable task management interfaces in Vue applications by providing a ready-to-use component with configurable stages, blocks, and workflow rules.
Vue.js developers building project management tools, dashboards, or any application requiring visual task tracking and workflow management.
Developers choose vue-kanban for its simplicity, seamless Vue integration, and flexibility—offering out-of-the-box functionality while supporting advanced customization via slots and state machine configurations.
A vue based drag and drop kanban board
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Built on Dragula for smooth block movement between stages, providing a tested and functional drag-and-drop experience as highlighted in the Key Features.
Offers named slots for blocks and stages, allowing developers to fully customize appearance and extend functionality, demonstrated in the 'Customize the kanban blocks' section.
Integrates with xstate to enforce valid workflow transitions, enabling rule-based movements for complex scenarios, detailed in the 'State machine' part of the README.
Emits update-block events when blocks are moved, facilitating real-time data synchronization in parent Vue components, as shown in the 'Receiving Changes' example.
Lacks built-in themes or comprehensive styling options; developers must write custom CSS or modify the provided SCSS file, which adds initial setup time.
Relies on Dragula for drag-and-drop and xstate for state machines, introducing potential bloat, compatibility issues, or maintenance concerns if these libraries change.
Focuses on core kanban functionality without out-of-the-box support for features like filtering, sorting, or real-time collaboration, which may require additional development.