Documentação/Primeiros passos
Instalação
Adicione o pacote principal a um projeto Vue ou Nuxt, além dos pacotes opcionais para arrastes programáticos e para as DevTools.
Esta página foi traduzida por IA e pode conter imprecisões. Ler o original em inglês
O núcleo
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 é uma peer dependency. O pacote tem uma única dependência própria, @vueuse/core.
Nuxt
O módulo Nuxt registra DnDProvider e DragPreview como componentes globais e importa
automaticamente os composables e os tipos principais.
npx nuxi module add @vue-dnd-kit/nuxt
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@vue-dnd-kit/nuxt'],
});
Modificadores, helpers de colisão e sensores têm nomes genéricos (
snapToGrid, closestCenter),
por isso não são importados automaticamente, a menos que você peça:
vueDndKit: { autoImports: { modifiers: true, collision: true, sensors: true } }.Pacotes opcionais
| Pacote | O que adiciona |
|---|---|
@vue-dnd-kit/actions | Arrastes programáticos: botões "mover para cima", menus, tours e testes. |
@vue-dnd-kit/devtools | Uma aba do Vue DnD Kit no Vue DevTools e no Nuxt DevTools. |
npm i @vue-dnd-kit/actions
npm i -D @vue-dnd-kit/devtools
Para assistentes de IA
A documentação inclui uma agent skill: assistentes como o Claude Code aprendem o modelo da biblioteca, suas regras e suas armadilhas.
npx skills add ZiZIGY/vue-dnd-kit