Introduction

Vue DnD Kit is drag and drop for Vue 3. Sortable lists, kanban boards, trees, multi-drag, copying and drop zones — animated, keyboard-ready and announced to screen readers out of the box, in your own markup.

<script setup lang="ts">
import { DnDProvider } from '@vue-dnd-kit/core';
import Trip from './Trip.vue';
</script>

<template>
  <DnDProvider>
    <Trip />
  </DnDProvider>
</template>

None of it is code of the demo's own: the lists reorder live, the columns trade stops (one group), a selection travels together (selected), Alt turns a move into a copy (clone), and the keyboard does all of it by slots. The demo renders the stops and passes a few options.

What it is

A set of composables and one provider component. You render your own elements and hand their template refs to the composables; the library takes care of the rest: pointer, touch and keyboard input, finding the target, reordering, animating, auto-scrolling and telling screen readers what happened.

<script setup lang="ts">
const listRef = useTemplateRef<HTMLElement>('list');
// `items` is the draft: it reorders while you drag. On drop, `day.stops` gets the new order.
const { items } = makeSortableList(listRef, { items: toRef(props.day, 'stops'), group: 'trip' });
</script>

<template>
  <ul ref="list">
    <StopCard v-for="stop in items" :key="stop.id" :stop="stop" />
  </ul>
</template>

It renders nothing of its own except a floating overlay — by default, a clone of the element being dragged. Your markup and your styles stay yours: the library adds ARIA attributes, and a few data-dnd-* attributes to style the states of a drag.

What you get

• Sortable lists and grids that reorder live while you drag, vertical, horizontal or in a grid.
• Lists that share items: kanban boards, palettes that hand out copies, swaps, rules for what goes where.
• Trees with nesting by a sideways drag or by hovering a row, depth limits and rules.
• Multi-drag with your own selection (Ctrl/Cmd-click, a rubber band): the block travels together.
• Drop zones with accept rules, and drops you confirm, refuse or apply yourself.
• Animations by default: items slide to their new places, the drop lands on its slot, a cancel flies back.
• Accessibility: keyboard drags by slots, live announcements, ARIA attributes.
• Virtual lists with TanStack Virtual or VueUse: thousands of rows.
• Sensors and actions: your own input devices, and drags scripted from code.
• DevTools: a tab with a live map of every list, a joystick and a log of each drag.

How it is different

• Your data stays yours until the drop. You render a draft of your array. While you drag, only the draft moves; on drop the library writes the new order into your ref, or hands you e.result to apply yourself (stores, servers, undo).
• No wrapper components. Rows are your elements, with a ref and one call, so the components of a UI kit (Nuxt UI, Vuetify, your own) drag as they are.
• Animated by default, never in your way. Reorders, landings and cancels animate out of the box; turn them off, tune them, or hand them to GSAP or motion.
• The keyboard is not an afterthought. Every drag can be done with Space and the arrows, moves are announced, and focus comes back where it was.
• One provider for the whole app. Areas give parts of the page their own rules (an axis, bounds, a grid, a longer press), so nested features don't need nested providers.
• Input is pluggable. Pointer and keyboard are sensors; write your own for a gamepad or a voice command, or move items from code with @vue-dnd-kit/actions.

How it fits together

Requirements

• Vue 3.5 or newer.
• Modern browsers: Chrome and Edge 104+, Safari 15.4+, Firefox 104+.
• Works with SSR and Nuxt: the overlay and the live region mount on the client.

Next: install it, then build a first list in the Quick start.