vue-easy-dnd

Vue Easy DnD — Vue 3 Drag and Drop Library

Vue Easy DnD is a lightweight Vue 3 drag-and-drop component library for mouse and touch interfaces.

Use it to build sortable lists, nested drop zones, dashboards, card transfers, and custom drag-and-drop workflows with TypeScript, SSR, and Nuxt support.

What this package helps with

• Make a source item draggable with Drag
• Make a target accept dropped items with Drop
• Build reorderable lists with DropList (drag to reorder, or move between lists)
• Ignore drops in specific zones using DropMask
• Use useDrag, useDrop, and useDragAware when you need custom logic instead of a full component
• Restrict what can be dropped using type/data rules (accepts-type and accepts-data)
• Support copy/cut-style interactions and list events like reorder and insert
• Customize the drag preview with drag-image

Install

npm install vue-easy-dnd@^3

Vue ^3.2.25 is required. The distributed JavaScript targets ES2022.

Quick example

<script setup>
import { Drag, Drop, useDragAware } from 'vue-easy-dnd'
import 'vue-easy-dnd/style.css'

const { dragInProgress } = useDragAware()

function handleDrop(event) {
  console.log('Dropped item:', event.data)
}
</script>

<template>
  <Drag type="task" :data="{ id: 1 }">
    <div>Drag this item</div>
  </Drag>

  <Drop accepts-type="task" @drop="handleDrop">
    Drop zone
  </Drop>

  <p v-if="dragInProgress">Drag in progress</p>
</template>

For examples like dashboards, nested zones, and full list workflows, use the linked docs and demos.

Docs and examples

View Documentation

• All demos
• Version 3 migration guide
• Dashboard demo on homepage