@dnd-kit/vue

The Vue adapter for @dnd-kit — a lightweight, performant, and extensible drag and drop toolkit. Built on top of @dnd-kit/dom.

Installation

npm install @dnd-kit/vue

Quick start

<script setup>
import {ref} from 'vue';
import {DragDropProvider, useDraggable, useDroppable} from '@dnd-kit/vue';

const draggable = useDraggable({id: 'draggable'});
const droppable = useDroppable({id: 'droppable'});
const parent = ref(null);

function onDragEnd(event) {
  if (event.canceled) return;
  parent.value = event.operation.target?.id ?? null;
}
</script>

<template>
  <DragDropProvider @dragEnd="onDragEnd">
    <button v-if="!parent" :ref="draggable.ref">Drag me</button>
    <div :ref="droppable.ref">
      <button v-if="parent" :ref="draggable.ref">Dropped!</button>
    </div>
  </DragDropProvider>
</template>

Composables

| Composable | Import | Description | | -------------- | ----------------------- | ---------------------------------- | | useDraggable | @dnd-kit/vue | Make an element draggable | | useDroppable | @dnd-kit/vue | Create a drop target | | useSortable | @dnd-kit/vue/sortable | Combine drag and drop with sorting |

Components

• <DragDropProvider> — Wraps your drag and drop interface, manages sensors, plugins, and events.
• <DragOverlay> — Renders a custom overlay element during drag operations.

Documentation

Visit dndkit.com for full documentation, guides, and interactive examples.