Vue Overview

​

Architecture

• Composables: Reactive hooks that manage drag and drop state
• Components: Vue components for context and overlay management
• Type Safety: Full TypeScript support with proper type inference
• Reactivity: Deep integration with Vue’s reactivity system

​

Core Concepts

​

DragDropProvider

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

<template>
  <DragDropProvider>
    <!-- Your draggable and droppable components -->
  </DragDropProvider>
</template>

​

Composables

• useDraggable: Make elements draggable
• useDroppable: Make elements droppable
• useSortable: Combine draggable and droppable for sortable items
• useDragDropMonitor: Listen to drag and drop events
• useDragOperation: Access the current drag operation state
• useDragDropManager: Access the drag drop manager instance

​

Reactivity Integration

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

const id = ref('item-1');
const disabled = ref(false);

const { draggable, isDragging } = useDraggable({
  id,           // ref
  disabled,     // ref
  data: { name: 'Item 1' } // raw value
});
</script>

​

Installation

npm install @dnd-kit/vue @dnd-kit/dom @dnd-kit/abstract

​

Package Exports

​

Core

• DragDropProvider - Context provider component
• DragOverlay - Overlay component for drag preview
• useDraggable - Draggable composable
• useDroppable - Droppable composable
• useDragDropManager - Manager access composable
• useDragDropMonitor - Event monitoring composable
• useDragOperation - Drag operation state composable
• useInstance - Instance creation composable

​

Sortable

• useSortable - Sortable item composable
• isSortable - Type guard for sortable instances
• isSortableOperation - Type guard for sortable operations

​

Utilities

• useDeepSignal - Deep reactivity bridge for signals

​

Sensors

• PointerSensor - Mouse and touch input
• KeyboardSensor - Keyboard navigation

​

Next Steps