Picking a Drag and Drop Library for Vue 3
A comparison of SortableJS, FormKit DnD, and Atlassian's Pragmatic drag and drop — and why I landed on Pragmatic for a production kanban board.
I recently had to pick a drag and drop library for a Vue 3 project: a kanban board where cards move across columns, with each state change persisted to the backend. Simple enough in theory, but the choice of library turned out to matter more than I expected.
Here's what I found after evaluating the three main options.
The use case
A board with a few named columns, draggable cards that move freely within and across them, and a backend write on every drop. The columns might grow over time. Nothing exotic, but enough to expose the rough edges of each library.
SortableJS / vuedraggable
The default answer in the Vue ecosystem. vuedraggable is a Vue wrapper around SortableJS with a component-based API and v-model integration for cross-list dragging.
Strengths: Simple declarative API. The group prop makes cross-list dragging almost trivial. Built-in animation with a single prop. Large community with lots of real-world examples.
Weaknesses: The Vue 3 version (vue.draggable.next) has had no meaningful updates in over six years. It does not use the native HTML5 drag and drop API, so cross-window dragging is out. Bundle size is larger than the alternatives. Visual feedback control is limited.
The staleness is the main issue. For a project with a long runway, building on a wrapper with no active maintenance is a risk I didn't want to carry.
FormKit drag and drop
A newer library from the FormKit team. Framework-agnostic core with Vue and React wrappers. Instead of manipulating the DOM, it updates a reactive data model — which aligns well with how Vue thinks about state.
Strengths: The useDragAndDrop composable feels native in a Vue 3 codebase. Lightweight core. Actively developed.
Weaknesses: Still pre-1.0 (version 0.3 at the time of writing). Keyboard navigation is incomplete. Mobile behavior has inconsistencies. No meaningful production track record yet.
Promising direction, but too early to bet on in a production context.
Pragmatic drag and drop (Atlassian)
Atlassian's current drag and drop framework — the successor to react-beautiful-dnd, and what powers Trello, Jira, and Confluence today. Headless, framework-agnostic, built on the native HTML5 drag and drop API.
Strengths:
- Tiny core (~4.7KB) with optional add-ons loaded on demand
- Fully framework-agnostic — works with Vue, React, Svelte, Angular, or vanilla JS
- Native HTML5 API means cross-window dragging and external file drops work out of the box
- Deferred loading compatible, so it doesn't affect initial page load
- Battle-tested at Trello and Jira scale
- Headless: no visual opinions, full control over feedback and animation
- Automatic DOM reconciliation when elements are destroyed and recreated by the framework
@atlaskit/pragmatic-drag-and-drop-unit-testing— a dedicated package with helpers to simulate full drag and drop operations in Vitest, without a real browser. This solves a genuinely painful problem: the native HTML5 drag and drop API is notoriously hard to test headlessly. No other library in this comparison offers anything equivalent.
Weaknesses:
- Lower-level API means more setup than
vuedraggable's declarative approach - Documentation is React-centric; Vue examples are community-contributed
- Some optional packages (drop indicators, accessibility controls) are React-specific and need custom reimplementation in Vue — though these are purely visual and the core library is fully usable as-is
Comparison
| Criteria | SortableJS | FormKit DnD | Pragmatic DnD |
|---|---|---|---|
| Vue 3 support | Wrapper | Yes | Yes (native) |
| Bundle (core) | ~12KB | ~5KB | ~4.7KB |
| Native HTML5 API | No | No | Yes |
| Cross-window drag | No | No | Yes |
| File drop support | No | No | Yes |
| Deferred loading | No | No | Yes |
| Production scale | Medium | Early stage | Trello, Jira |
| Maintenance | Low activity | Active (pre-1.0) | Active (Atlassian) |
| Unit testing package | No | No | Yes |
| Setup complexity | Low | Low | Medium |
What I chose, and why
Pragmatic drag and drop. It is the only library that combines a minimal bundle, native HTML5 API capabilities, dedicated unit testing support, and proven reliability at scale — all actively maintained. Its integration with Vue 3 lifecycle hooks is clean, and the DOM reconciliation behavior handles the cases where Vue destroys and recreates elements without any extra wiring.
The setup cost is real compared to vuedraggable. There is no v-model shortcut; you wire the drag handlers manually. But that explicitness is also what gives you full control over visual feedback and state transitions — which matters in a production interface where the default behaviors are never quite right anyway.
Some optional packages (drop indicators, accessibility controls) have React-specific implementations and need to be written in Vue. In practice these are small, self-contained visual components, and having to write them means they match your design system exactly rather than working around someone else's defaults.
References
- Atlassian — Pragmatic drag and drop documentation
- Atlassian Blog — "Designed for delight, built for performance"
- npm — @atlaskit/pragmatic-drag-and-drop
- npm — @atlaskit/pragmatic-drag-and-drop-unit-testing
- GitHub — atlassian/pragmatic-drag-and-drop
- GitHub — frenicohansen/pdnd-vue (Vue 3 community example)
- LogRocket — "Implement the Pragmatic drag and drop library"
- Drag and drop performance comparison