[{"data":1,"prerenderedAt":583},["ShallowReactive",2],{"navigation-source":3,"navigation-en":271,"docs-\u002Fdocs\u002Fgetting-started\u002Finstallation":272,"docs-surround-\u002Fdocs\u002Fgetting-started\u002Finstallation":578},[4],{"title":5,"path":6,"stem":7,"children":8,"page":35},"Docs","\u002Fdocs","docs",[9,36,122,198,251],{"title":10,"icon":11,"path":12,"stem":13,"children":14,"page":35},"Getting started","i-lucide-rocket","\u002Fdocs\u002Fgetting-started","docs\u002F1.getting-started",[15,20,25,30],{"title":16,"path":17,"stem":18,"icon":19},"Introduction","\u002Fdocs\u002Fgetting-started\u002Fintroduction","docs\u002F1.getting-started\u002F1.introduction","i-lucide-book-open",{"title":21,"path":22,"stem":23,"icon":24},"Installation","\u002Fdocs\u002Fgetting-started\u002Finstallation","docs\u002F1.getting-started\u002F2.installation","i-lucide-download",{"title":26,"path":27,"stem":28,"icon":29},"Quick start","\u002Fdocs\u002Fgetting-started\u002Fquick-start","docs\u002F1.getting-started\u002F3.quick-start","i-lucide-zap",{"title":31,"path":32,"stem":33,"icon":34},"Migrating from v2","\u002Fdocs\u002Fgetting-started\u002Fmigrating-from-v2","docs\u002F1.getting-started\u002F4.migrating-from-v2","i-lucide-arrow-right-left",false,{"title":37,"icon":38,"path":39,"stem":40,"children":41,"page":35},"Guides","i-lucide-book-marked","\u002Fdocs\u002Fguides","docs\u002F2.guides",[42,47,52,57,62,67,72,77,82,87,92,97,102,107,112,117],{"title":43,"path":44,"stem":45,"icon":46},"The provider","\u002Fdocs\u002Fguides\u002Fprovider","docs\u002F2.guides\u002F01.provider","i-lucide-layers",{"title":48,"path":49,"stem":50,"icon":51},"Drag and drop","\u002Fdocs\u002Fguides\u002Fdrag-and-drop","docs\u002F2.guides\u002F02.drag-and-drop","i-lucide-move",{"title":53,"path":54,"stem":55,"icon":56},"Sortable lists","\u002Fdocs\u002Fguides\u002Fsortable-lists","docs\u002F2.guides\u002F03.sortable-lists","i-lucide-list-ordered",{"title":58,"path":59,"stem":60,"icon":61},"Lists that share items","\u002Fdocs\u002Fguides\u002Fshared-lists","docs\u002F2.guides\u002F04.shared-lists","i-lucide-kanban",{"title":63,"path":64,"stem":65,"icon":66},"Trees","\u002Fdocs\u002Fguides\u002Ftrees","docs\u002F2.guides\u002F05.trees","i-lucide-folder-tree",{"title":68,"path":69,"stem":70,"icon":71},"Multi-drag and selection","\u002Fdocs\u002Fguides\u002Fmulti-drag","docs\u002F2.guides\u002F06.multi-drag","i-lucide-copy",{"title":73,"path":74,"stem":75,"icon":76},"The overlay","\u002Fdocs\u002Fguides\u002Foverlay","docs\u002F2.guides\u002F07.overlay","i-lucide-mouse-pointer-2",{"title":78,"path":79,"stem":80,"icon":81},"Axes, bounds and grids","\u002Fdocs\u002Fguides\u002Fconstraints","docs\u002F2.guides\u002F08.constraints","i-lucide-axis-3d",{"title":83,"path":84,"stem":85,"icon":86},"Deciding a drop","\u002Fdocs\u002Fguides\u002Fdrop-decisions","docs\u002F2.guides\u002F09.drop-decisions","i-lucide-check-check",{"title":88,"path":89,"stem":90,"icon":91},"Animations","\u002Fdocs\u002Fguides\u002Fanimations","docs\u002F2.guides\u002F10.animations","i-lucide-sparkles",{"title":93,"path":94,"stem":95,"icon":96},"Accessibility","\u002Fdocs\u002Fguides\u002Faccessibility","docs\u002F2.guides\u002F11.accessibility","i-lucide-accessibility",{"title":98,"path":99,"stem":100,"icon":101},"Virtual lists","\u002Fdocs\u002Fguides\u002Fvirtual-lists","docs\u002F2.guides\u002F12.virtual-lists","i-lucide-rows-3",{"title":103,"path":104,"stem":105,"icon":106},"Styling","\u002Fdocs\u002Fguides\u002Fstyling","docs\u002F2.guides\u002F13.styling","i-lucide-palette",{"title":108,"path":109,"stem":110,"icon":111},"Sensors and programmatic drags","\u002Fdocs\u002Fguides\u002Fsensors","docs\u002F2.guides\u002F14.sensors","i-lucide-joystick",{"title":113,"path":114,"stem":115,"icon":116},"DevTools","\u002Fdocs\u002Fguides\u002Fdevtools","docs\u002F2.guides\u002F15.devtools","i-lucide-bug",{"title":118,"path":119,"stem":120,"icon":121},"Files and other apps","\u002Fdocs\u002Fguides\u002Fnative","docs\u002F2.guides\u002F16.native","i-lucide-app-window",{"title":123,"icon":124,"path":125,"stem":126,"children":127,"page":35},"API","i-lucide-braces","\u002Fdocs\u002Fapi","docs\u002F3.api",[128,133,137,142,146,151,156,161,166,171,175,180,184,188,193],{"title":129,"path":130,"stem":131,"icon":132},"DnDProvider","\u002Fdocs\u002Fapi\u002Fdnd-provider","docs\u002F3.api\u002F01.dnd-provider","i-lucide-box",{"title":134,"path":135,"stem":136,"icon":51},"makeDraggable","\u002Fdocs\u002Fapi\u002Fmake-draggable","docs\u002F3.api\u002F02.make-draggable",{"title":138,"path":139,"stem":140,"icon":141},"makeDroppable","\u002Fdocs\u002Fapi\u002Fmake-droppable","docs\u002F3.api\u002F03.make-droppable","i-lucide-inbox",{"title":143,"path":144,"stem":145,"icon":56},"makeSortableList","\u002Fdocs\u002Fapi\u002Fmake-sortable-list","docs\u002F3.api\u002F04.make-sortable-list",{"title":147,"path":148,"stem":149,"icon":150},"makeSortableItem","\u002Fdocs\u002Fapi\u002Fmake-sortable-item","docs\u002F3.api\u002F05.make-sortable-item","i-lucide-grip-vertical",{"title":152,"path":153,"stem":154,"icon":155},"makeSortableTree","\u002Fdocs\u002Fapi\u002Fmake-sortable-tree","docs\u002F3.api\u002F06.make-sortable-tree","i-lucide-list-tree",{"title":157,"path":158,"stem":159,"icon":160},"makeSelectionArea","\u002Fdocs\u002Fapi\u002Fmake-selection-area","docs\u002F3.api\u002F07.make-selection-area","i-lucide-square-dashed-mouse-pointer",{"title":162,"path":163,"stem":164,"icon":165},"makeDragArea","\u002Fdocs\u002Fapi\u002Fmake-drag-area","docs\u002F3.api\u002F08.make-drag-area","i-lucide-frame",{"title":167,"path":168,"stem":169,"icon":170},"useDnD and monitors","\u002Fdocs\u002Fapi\u002Fuse-dnd","docs\u002F3.api\u002F09.use-dnd","i-lucide-radio",{"title":172,"path":173,"stem":174,"icon":29},"Events","\u002Fdocs\u002Fapi\u002Fevents","docs\u002F3.api\u002F10.events",{"title":176,"path":177,"stem":178,"icon":179},"Modifiers and collision","\u002Fdocs\u002Fapi\u002Fmodifiers","docs\u002F3.api\u002F11.modifiers","i-lucide-sliders-horizontal",{"title":181,"path":182,"stem":183,"icon":71},"DragPreview and overlay props","\u002Fdocs\u002Fapi\u002Fdrag-preview","docs\u002F3.api\u002F12.drag-preview",{"title":88,"path":185,"stem":186,"icon":187},"\u002Fdocs\u002Fapi\u002Fanimations","docs\u002F3.api\u002F13.animations","i-lucide-wand-sparkles",{"title":189,"path":190,"stem":191,"icon":192},"Sensors","\u002Fdocs\u002Fapi\u002Fsensors","docs\u002F3.api\u002F14.sensors","i-lucide-gamepad-2",{"title":194,"path":195,"stem":196,"icon":197},"Common types","\u002Fdocs\u002Fapi\u002Ftypes","docs\u002F3.api\u002F15.types","i-lucide-shapes",{"title":199,"path":200,"stem":201,"children":202,"icon":205},"Examples","\u002Fdocs\u002Fexamples","docs\u002F4.examples\u002F00.index",[203,206,211,216,221,226,231,236,241,246],{"title":204,"path":200,"stem":201,"icon":205},"Overview","i-lucide-layout-grid",{"title":207,"path":208,"stem":209,"icon":210},"Project board","\u002Fdocs\u002Fexamples\u002Fboard","docs\u002F4.examples\u002F01.board","i-lucide-square-kanban",{"title":212,"path":213,"stem":214,"icon":215},"Week calendar","\u002Fdocs\u002Fexamples\u002Fcalendar","docs\u002F4.examples\u002F02.calendar","i-lucide-calendar-days",{"title":217,"path":218,"stem":219,"icon":220},"File manager","\u002Fdocs\u002Fexamples\u002Ffile-manager","docs\u002F4.examples\u002F03.file-manager","i-lucide-folder-open",{"title":222,"path":223,"stem":224,"icon":225},"Block editor","\u002Fdocs\u002Fexamples\u002Fblock-editor","docs\u002F4.examples\u002F04.block-editor","i-lucide-blocks",{"title":227,"path":228,"stem":229,"icon":230},"Chess","\u002Fdocs\u002Fexamples\u002Fchess","docs\u002F4.examples\u002F05.chess","i-lucide-chess-knight",{"title":232,"path":233,"stem":234,"icon":235},"Form builder","\u002Fdocs\u002Fexamples\u002Fform-builder","docs\u002F4.examples\u002F06.form-builder","i-lucide-text-cursor-input",{"title":237,"path":238,"stem":239,"icon":240},"Design canvas","\u002Fdocs\u002Fexamples\u002Fdesign-canvas","docs\u002F4.examples\u002F07.design-canvas","i-lucide-pen-tool",{"title":242,"path":243,"stem":244,"icon":245},"Page builder","\u002Fdocs\u002Fexamples\u002Fpage-builder","docs\u002F4.examples\u002F08.page-builder","i-lucide-layout-template",{"title":247,"path":248,"stem":249,"icon":250},"Data table","\u002Fdocs\u002Fexamples\u002Fdata-table","docs\u002F4.examples\u002F09.data-table","i-lucide-table-2",{"title":252,"path":253,"stem":254,"children":255,"icon":257},"Changelog","\u002Fdocs\u002Fchangelog","docs\u002F5.changelog\u002F0.index",[256,258,263,267],{"title":204,"path":253,"stem":254,"icon":257},"i-lucide-history",{"title":259,"path":260,"stem":261,"icon":262},"3.0.0","\u002Fdocs\u002Fchangelog\u002Fv3-0-0","docs\u002F5.changelog\u002F997.v3-0-0","i-lucide-tag",{"title":264,"path":265,"stem":266,"icon":262},"3.0.0-beta.2","\u002Fdocs\u002Fchangelog\u002Fv3-0-0-beta-2","docs\u002F5.changelog\u002F998.v3-0-0-beta-2",{"title":268,"path":269,"stem":270,"icon":262},"3.0.0-beta.1","\u002Fdocs\u002Fchangelog\u002Fv3-0-0-beta-1","docs\u002F5.changelog\u002F999.v3-0-0-beta-1",null,{"page":273,"fallback":35},{"id":274,"title":21,"body":275,"category":10,"description":572,"extension":573,"links":271,"meta":574,"navigation":575,"path":22,"seo":576,"stem":23,"__hash__":577},"docs_en\u002Fdocs\u002F1.getting-started\u002F2.installation.md",{"type":276,"value":277,"toc":566},"minimark",[278,283,355,367,371,381,402,451,468,472,512,538,542,545,562],[279,280,282],"h2",{"id":281},"the-core","The core",[284,285,286,312,327,341],"code-group",{},[287,288,294],"pre",{"className":289,"code":290,"filename":291,"language":292,"meta":293,"style":293},"language-bash shiki shiki-themes dnd-light dnd-light dnd-dark","npm i @vue-dnd-kit\u002Fcore\n","npm","bash","",[295,296,297],"code",{"__ignoreMap":293},[298,299,302,305,309],"span",{"class":300,"line":301},"line",1,[298,303,291],{"class":304},"sbwC8",[298,306,308],{"class":307},"sN8r7"," i",[298,310,311],{"class":307}," @vue-dnd-kit\u002Fcore\n",[287,313,316],{"className":289,"code":314,"filename":315,"language":292,"meta":293,"style":293},"yarn add @vue-dnd-kit\u002Fcore\n","yarn",[295,317,318],{"__ignoreMap":293},[298,319,320,322,325],{"class":300,"line":301},[298,321,315],{"class":304},[298,323,324],{"class":307}," add",[298,326,311],{"class":307},[287,328,331],{"className":289,"code":329,"filename":330,"language":292,"meta":293,"style":293},"pnpm add @vue-dnd-kit\u002Fcore\n","pnpm",[295,332,333],{"__ignoreMap":293},[298,334,335,337,339],{"class":300,"line":301},[298,336,330],{"class":304},[298,338,324],{"class":307},[298,340,311],{"class":307},[287,342,345],{"className":289,"code":343,"filename":344,"language":292,"meta":293,"style":293},"bun add @vue-dnd-kit\u002Fcore\n","bun",[295,346,347],{"__ignoreMap":293},[298,348,349,351,353],{"class":300,"line":301},[298,350,344],{"class":304},[298,352,324],{"class":307},[298,354,311],{"class":307},[356,357,358,359,362,363,366],"p",{},"Vue ",[295,360,361],{},"^3.5"," is a peer dependency. The package has one dependency of its own, ",[295,364,365],{},"@vueuse\u002Fcore",".",[279,368,370],{"id":369},"nuxt","Nuxt",[356,372,373,374,376,377,380],{},"The Nuxt module registers ",[295,375,129],{}," and ",[295,378,379],{},"DragPreview"," as global components and\nauto-imports the composables and the main types.",[287,382,384],{"className":289,"code":383,"language":292,"meta":293,"style":293},"npx nuxi module add @vue-dnd-kit\u002Fnuxt\n",[295,385,386],{"__ignoreMap":293},[298,387,388,391,394,397,399],{"class":300,"line":301},[298,389,390],{"class":304},"npx",[298,392,393],{"class":307}," nuxi",[298,395,396],{"class":307}," module",[298,398,324],{"class":307},[298,400,401],{"class":307}," @vue-dnd-kit\u002Fnuxt\n",[287,403,408],{"className":404,"code":405,"filename":406,"language":407,"meta":293,"style":293},"language-ts shiki shiki-themes dnd-light dnd-light dnd-dark","export default defineNuxtConfig({\n  modules: ['@vue-dnd-kit\u002Fnuxt'],\n});\n","nuxt.config.ts","ts",[295,409,410,426,445],{"__ignoreMap":293},[298,411,412,416,419,422],{"class":300,"line":301},[298,413,415],{"class":414},"s78Kj","export",[298,417,418],{"class":414}," default",[298,420,421],{"class":304}," defineNuxtConfig",[298,423,425],{"class":424},"s6cML","({\n",[298,427,429,433,436,439,442],{"class":300,"line":428},2,[298,430,432],{"class":431},"sVvmN","  modules",[298,434,435],{"class":424},":",[298,437,438],{"class":424}," [",[298,440,441],{"class":307},"'@vue-dnd-kit\u002Fnuxt'",[298,443,444],{"class":424},"],\n",[298,446,448],{"class":300,"line":447},3,[298,449,450],{"class":424},"});\n",[452,453,454],"note",{},[356,455,456,457,460,461,464,465,366],{},"Modifiers, collision helpers and sensors have generic names (",[295,458,459],{},"snapToGrid",", ",[295,462,463],{},"closestCenter","), so\nthey aren't auto-imported unless you ask for them:\n",[295,466,467],{},"vueDndKit: { autoImports: { modifiers: true, collision: true, sensors: true } }",[279,469,471],{"id":470},"optional-packages","Optional packages",[473,474,475,488],"table",{},[476,477,478],"thead",{},[479,480,481,485],"tr",{},[482,483,484],"th",{},"Package",[482,486,487],{},"What it adds",[489,490,491,502],"tbody",{},[479,492,493,499],{},[494,495,496],"td",{},[295,497,498],{},"@vue-dnd-kit\u002Factions",[494,500,501],{},"Programmatic drags: \"move up\" buttons, menus, tours and tests.",[479,503,504,509],{},[494,505,506],{},[295,507,508],{},"@vue-dnd-kit\u002Fdevtools",[494,510,511],{},"A Vue DnD Kit tab in Vue DevTools and Nuxt DevTools.",[287,513,515],{"className":289,"code":514,"language":292,"meta":293,"style":293},"npm i @vue-dnd-kit\u002Factions\nnpm i -D @vue-dnd-kit\u002Fdevtools\n",[295,516,517,526],{"__ignoreMap":293},[298,518,519,521,523],{"class":300,"line":301},[298,520,291],{"class":304},[298,522,308],{"class":307},[298,524,525],{"class":307}," @vue-dnd-kit\u002Factions\n",[298,527,528,530,532,535],{"class":300,"line":428},[298,529,291],{"class":304},[298,531,308],{"class":307},[298,533,534],{"class":307}," -D",[298,536,537],{"class":307}," @vue-dnd-kit\u002Fdevtools\n",[279,539,541],{"id":540},"for-ai-assistants","For AI assistants",[356,543,544],{},"The docs ship an agent skill: assistants such as Claude Code learn the model of the library,\nits rules and its pitfalls.",[287,546,548],{"className":289,"code":547,"language":292,"meta":293,"style":293},"npx skills add ZiZIGY\u002Fvue-dnd-kit\n",[295,549,550],{"__ignoreMap":293},[298,551,552,554,557,559],{"class":300,"line":301},[298,553,390],{"class":304},[298,555,556],{"class":307}," skills",[298,558,324],{"class":307},[298,560,561],{"class":307}," ZiZIGY\u002Fvue-dnd-kit\n",[563,564,565],"style",{},"html pre.shiki code .s78Kj, html code.shiki .s78Kj{--shiki-light:#1F8A5B;--shiki-default:#1F8A5B;--shiki-dark:#42B883}html pre.shiki code .sbwC8, html code.shiki .sbwC8{--shiki-light:#0969DA;--shiki-default:#0969DA;--shiki-dark:#7CC4FF}html pre.shiki code .s6cML, html code.shiki .s6cML{--shiki-light:#5B5B63;--shiki-default:#5B5B63;--shiki-dark:#9F9FA9}html pre.shiki code .sVvmN, html code.shiki .sVvmN{--shiki-light:#7C4DCC;--shiki-default:#7C4DCC;--shiki-dark:#C3A6FF}html pre.shiki code .sN8r7, html code.shiki .sN8r7{--shiki-light:#9A6700;--shiki-default:#9A6700;--shiki-dark:#E9C46A}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":293,"searchDepth":447,"depth":447,"links":567},[568,569,570,571],{"id":281,"depth":428,"text":282},{"id":369,"depth":428,"text":370},{"id":470,"depth":428,"text":471},{"id":540,"depth":428,"text":541},"Add the core package to a Vue or Nuxt project, plus the optional packages for programmatic drags and the DevTools.","md",{},{"icon":24},{"title":21,"description":572},"WFJU56-uGUBeh0YE7luhWlE7__eJpqZzU0PL-HVocIk",[579,581],{"title":16,"path":17,"stem":18,"description":580,"icon":19},"Vue DnD Kit is drag and drop for Vue 3 — sortable lists, kanban boards, trees, multi-drag and drop zones, animated and accessible out of the box.",{"title":26,"path":27,"stem":28,"description":582,"icon":29},"A sortable list in three files — a provider, a list and its rows.",1793707521931]