A new drag-and-drop library called Vue DnD Kit has been introduced for Vue 3 applications. The project aims to provide a modern, high-performance, and accessible solution for building complex drag-and-drop interfaces in Vue.
Vue DnD Kit is inspired by the popular dnd-kit library from the React ecosystem and brings similar concepts and flexibility to Vue developers.
Why Vue DnD Kit Was Created
The Vue ecosystem has long lacked a modern drag-and-drop solution that:
- Is lightweight and fast
- Works well with large datasets
- Is flexible and composable
- Provides full accessibility support
Many existing libraries are either outdated, hard to customize, or inefficient for complex UIs. Vue DnD Kit was created to solve these problems in a clean and future-proof way.
Core Principles
Vue DnD Kit is built around a few key ideas:
- Composable API based on Vue 3 Composition API
- High performance with minimal re-renders
- Accessibility-first design
- Full control over drag-and-drop behavior
Composable-Based API
Instead of relying on heavy components, Vue DnD Kit exposes composables that you can use directly inside your components.
import { useDraggable, useDroppable } from '@vue-dnd-kit/core'
const { elementRef, handleDragStart, isDragging } = useDraggable()
const { elementRef: dropRef, isOvered } = useDroppable({
events: {
onDrop: () => {
console.log('Item dropped')
}
}
})
This approach keeps your components simple and fully reactive.
Keyboard and Accessibility Support
Accessibility is a core feature of Vue DnD Kit, not an afterthought.
The library supports full keyboard interaction:
- W / A / S / D — move items
- Space / Enter — pick up and drop
- Escape — cancel drag operation
- Tab — navigate between focusable elements
This makes drag-and-drop usable for keyboard users and screen readers.
Performance Characteristics
Vue DnD Kit is optimized for demanding interfaces:
- Minimal DOM updates
- Efficient state handling
- Smooth interactions even with large lists
- Reduced risk of memory leaks
These optimizations make it suitable for enterprise-scale applications.
Customization Options
The library provides deep customization:
- Custom drag previews
- Grouped draggable elements
- Custom drop logic
- Support for animations (CSS or JS-based)
- Ability to override sensors and behaviors
You stay in full control of how drag-and-drop behaves.
Basic Drag-and-Drop Example
<template>
<div class="container">
<Draggable v-if="!isDropped">Drag me</Draggable>
<Droppable @drop="handleDrop">
<Draggable v-if="isDropped">
Dropped here
</Draggable>
</Droppable>
</div>
</template>
<script setup>
import { ref } from 'vue'
const isDropped = ref(false)
const handleDrop = () => {
isDropped.value = true
}
</script>
Sortable List Example
Vue DnD Kit also supports sortable lists.
Draggable Item
<script setup lang="ts">
import { useDraggable } from '@vue-dnd-kit/core'
import { computed } from 'vue'
const props = defineProps({
source: Array,
index: Number
})
const { elementRef } = useDraggable({
data: computed(() => ({
source: props.source,
index: props.index
}))
})
</script>
Droppable List
<script setup lang="ts">
import { useDroppable, DnDOperations } from '@vue-dnd-kit/core'
import { ref } from 'vue'
const items = ref([
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' }
])
const { elementRef } = useDroppable({
events: {
onDrop: (store) => {
DnDOperations.applyTransfer(store)
}
}
})
</script>
Installation
npm install @vue-dnd-kit/core @vueuse/core
or
pnpm add @vue-dnd-kit/core @vueuse/core
Plugin Setup
import { createApp } from 'vue'
import App from './App.vue'
import VueDnDKit from '@vue-dnd-kit/core'
const app = createApp(App)
app.use(VueDnDKit)
app.mount('#app')
Final Notes
Vue DnD Kit brings a modern drag-and-drop experience to Vue 3. It focuses on performance, accessibility, and developer control, making it a strong choice for building complex interactive interfaces./
Top comments (0)