Documentation/Prise en main
Installation
Ajoutez le paquet principal à un projet Vue ou Nuxt, ainsi que les paquets optionnels pour les glissements programmatiques et les DevTools.
Cette page a été traduite par IA et peut contenir des inexactitudes. Lire l'original en anglais
Le paquet principal
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 est une peer dependency. Le paquet n'a qu'une seule dépendance propre, @vueuse/core.
Nuxt
Le module Nuxt enregistre DnDProvider et DragPreview comme composants globaux et
importe automatiquement les composables et les principaux types.
npx nuxi module add @vue-dnd-kit/nuxt
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@vue-dnd-kit/nuxt'],
});
Les modificateurs, les helpers de collision et les capteurs ont des noms génériques
(
snapToGrid, closestCenter) : ils ne sont donc pas importés automatiquement, sauf si vous
le demandez :
vueDndKit: { autoImports: { modifiers: true, collision: true, sensors: true } }.Paquets optionnels
| Paquet | Ce qu'il ajoute |
|---|---|
@vue-dnd-kit/actions | Les glissements programmatiques : boutons « monter », menus, visites guidées et tests. |
@vue-dnd-kit/devtools | Un onglet Vue DnD Kit dans Vue DevTools et Nuxt DevTools. |
npm i @vue-dnd-kit/actions
npm i -D @vue-dnd-kit/devtools
Pour les assistants IA
La documentation fournit un skill pour agents : les assistants comme Claude Code apprennent le modèle de la bibliothèque, ses règles et ses pièges.
npx skills add ZiZIGY/vue-dnd-kit