Dokumentation/Erste Schritte
Installation
Füge das Core-Paket zu einem Vue- oder Nuxt-Projekt hinzu, dazu die optionalen Pakete für programmatisches Ziehen und die DevTools.
Diese Seite wurde von KI übersetzt und kann Ungenauigkeiten enthalten. Englisches Original lesen
Der Kern
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 ist eine Peer-Dependency. Das Paket selbst hat eine einzige Abhängigkeit,
@vueuse/core.
Nuxt
Das Nuxt-Modul registriert DnDProvider und DragPreview als globale Komponenten und importiert
die Composables und die wichtigsten Typen automatisch.
npx nuxi module add @vue-dnd-kit/nuxt
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@vue-dnd-kit/nuxt'],
});
Modifier, Hilfsfunktionen zur Kollisionserkennung und Sensoren haben allgemeine Namen
(
snapToGrid, closestCenter), deshalb werden sie nur automatisch importiert, wenn du es
verlangst: vueDndKit: { autoImports: { modifiers: true, collision: true, sensors: true } }.Optionale Pakete
| Paket | Was es hinzufügt |
|---|---|
@vue-dnd-kit/actions | Programmatische Drags: „Nach oben“-Buttons, Menüs, Touren und Tests. |
@vue-dnd-kit/devtools | Einen Tab für Vue DnD Kit in den Vue DevTools und den Nuxt DevTools. |
npm i @vue-dnd-kit/actions
npm i -D @vue-dnd-kit/devtools
Für KI-Assistenten
Zur Dokumentation gehört ein Agent-Skill: Assistenten wie Claude Code lernen das Modell der Bibliothek kennen, ihre Regeln und ihre Fallstricke.
npx skills add ZiZIGY/vue-dnd-kit