ドキュメント/はじめに

インストール

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 の 1 つだけです。

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 アシスタント向け

このドキュメントにはエージェントスキルが付属しています。Claude Code などのアシスタントが、ライブラリのモデル、ルール、落とし穴を学べます。

npx skills add ZiZIGY/vue-dnd-kit