文档/开始

安装

将核心包添加到 Vue 或 Nuxt 项目中，并按需添加用于程序化拖拽和 DevTools 的可选包。

本页由 AI 翻译，可能存在不准确之处。阅读英文原文

核心包

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 是 peer dependency。这个包自身只有一个依赖：@vueuse/core。

Nuxt

Nuxt 模块会把 DnDProvider 和 DragPreview 注册为全局组件，并自动导入组合式函数和主要类型。

npx nuxi module add @vue-dnd-kit/nuxt

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@vue-dnd-kit/nuxt'],
});

修饰器、碰撞检测辅助函数和传感器的名字比较通用（snapToGrid、closestCenter），因此除非你主动要求，否则不会自动导入它们：vueDndKit: { autoImports: { modifiers: true, collision: true, sensors: true } }。

可选包

包	新增功能
`@vue-dnd-kit/actions`	程序化拖拽：“上移”按钮、菜单、引导和测试。
`@vue-dnd-kit/devtools`	Vue DevTools 和 Nuxt DevTools 中的 Vue DnD Kit 标签页。

npm i @vue-dnd-kit/actions
npm i -D @vue-dnd-kit/devtools

面向 AI 助手

文档附带一个 agent skill：Claude Code 等助手可以借此学习这个库的模型、规则和易错点。

npx skills add ZiZIGY/vue-dnd-kit