A headless drag-and-drop library for Vue 3 with a composable API, zero dependencies, and powerful array manipulation helpers.
Vue DnD Kit is a headless drag-and-drop library specifically designed for Vue 3 applications. It provides a composable API that attaches drag-and-drop functionality directly to elements via template refs, eliminating the need for wrapper components. The library solves complex array manipulation during drag operations with smart helpers that handle sorting, swapping, copying, and removing items automatically.
Vue 3 developers building interactive applications that require drag-and-drop functionality, particularly those working on sortable lists, Kanban boards, nested interfaces, or complex data manipulation UIs.
Developers choose Vue DnD Kit for its headless approach that doesn't impose markup or styles, its zero-dependency architecture, and its powerful array manipulation helpers that eliminate manual splice logic. The library offers full TypeScript support, tree-shaking, and comprehensive features like multi-drag, keyboard navigation, and async drop out of the box.
🎯 Modern drag & drop solution for Vue 3 applications. Simple API, powerful features, zero dependencies.
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Separates drag-and-drop logic from UI, allowing complete control over markup and styles, as emphasized in the README's philosophy of no imposed markup or hard-coded styles.
Built-in helpers like suggestSort and suggestSwap handle complex array operations automatically, eliminating manual splice logic and reducing boilerplate code.
Includes multi-drag, keyboard navigation, async drop, and auto-scroll out of the box, covering advanced use cases without extra dependencies, as detailed in the features list.
Has zero dependencies aside from Vue 3, with full tree-shaking support for optimized bundle sizes, ensuring minimal impact on performance.
Only supports Vue 3 with no backward compatibility for Vue 2, limiting its use in legacy projects or mixed framework environments.
Requires developers to build all CSS and markup from scratch, increasing initial setup time and effort compared to libraries with pre-styled components.
Assumes familiarity with Vue 3 Composition API and template refs, which can be challenging for teams accustomed to options API or simpler drag-and-drop solutions.