문서/시작하기

설치

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 어시스턴트용

문서에는 에이전트 스킬이 포함되어 있습니다. Claude Code 같은 어시스턴트가 라이브러리의 모델과 규칙, 주의할 점을 익힙니다.

npx skills add ZiZIGY/vue-dnd-kit