Документация/Начало работы
Установка
Добавьте основной пакет в проект на Vue или Nuxt, а при необходимости — пакеты для программного перетаскивания и DevTools.
Страница переведена ИИ и может содержать неточности. Читать английский оригинал
Ядро
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-зависимость. Собственная зависимость у пакета одна: @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 DnD Kit в Vue DevTools и Nuxt DevTools. |
npm i @vue-dnd-kit/actions
npm i -D @vue-dnd-kit/devtools
Для ИИ-ассистентов
К документации прилагается навык для агентов: ассистенты вроде Claude Code узнают модель библиотеки, её правила и подводные камни.
npx skills add ZiZIGY/vue-dnd-kit