Docs/Getting started
Installation
Add the core package to a Vue or Nuxt project, plus the optional packages for programmatic drags and the DevTools.
The core
npm i @vue-dnd-kit/core
yarn add @vue-dnd-kit/core
pnpm add @vue-dnd-kit/core
bun add @vue-dnd-kit/core
Vue ^3.5 is a peer dependency. The package has one dependency of its own, @vueuse/core.
Nuxt
The Nuxt module registers DnDProvider and DragPreview as global components and
auto-imports the composables and the main types.
npx nuxi module add @vue-dnd-kit/nuxt
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@vue-dnd-kit/nuxt'],
});
Modifiers, collision helpers and sensors have generic names (
snapToGrid, closestCenter), so
they aren't auto-imported unless you ask for them:
vueDndKit: { autoImports: { modifiers: true, collision: true, sensors: true } }.Optional packages
| Package | What it adds |
|---|---|
@vue-dnd-kit/actions | Programmatic drags: "move up" buttons, menus, tours and tests. |
@vue-dnd-kit/devtools | A Vue DnD Kit tab in Vue DevTools and Nuxt DevTools. |
npm i @vue-dnd-kit/actions
npm i -D @vue-dnd-kit/devtools
For AI assistants
The docs ship an agent skill: assistants such as Claude Code learn the model of the library, its rules and its pitfalls.
npx skills add ZiZIGY/vue-dnd-kit