Documentación/Primeros pasos
Instalación
Añade el paquete principal a un proyecto Vue o Nuxt, más los paquetes opcionales para arrastres programáticos y las DevTools.
Esta página la ha traducido una IA y puede contener imprecisiones. Leer el original en inglés
El paquete 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 es una peer dependency. El paquete tiene una sola dependencia propia, @vueuse/core.
Nuxt
El módulo de Nuxt registra DnDProvider y DragPreview como componentes globales e importa
automáticamente los composables y los tipos principales.
npx nuxi module add @vue-dnd-kit/nuxt
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@vue-dnd-kit/nuxt'],
});
Los modificadores, los helpers de colisión y los sensores tienen nombres genéricos (
snapToGrid,
closestCenter), así que no se importan automáticamente a menos que lo pidas:
vueDndKit: { autoImports: { modifiers: true, collision: true, sensors: true } }.Paquetes opcionales
| Paquete | Qué añade |
|---|---|
@vue-dnd-kit/actions | Arrastres programáticos: botones «subir», menús, recorridos guiados y tests. |
@vue-dnd-kit/devtools | Una pestaña de Vue DnD Kit en Vue DevTools y Nuxt DevTools. |
npm i @vue-dnd-kit/actions
npm i -D @vue-dnd-kit/devtools
Para asistentes de IA
La documentación incluye un skill para agentes: asistentes como Claude Code aprenden el modelo de la biblioteca, sus reglas y sus trampas.
npx skills add ZiZIGY/vue-dnd-kit