---
title: "3.0.0"
description: "v3 is stable. Drag and drop for Vue 3 — sortable lists and trees, multi-drag, files from other apps, the keyboard and screen readers — in one package."
canonical_url: "https://zizigy.github.io/vue-dnd-kit/docs/changelog/v3-0-0"
---

> Index of every page on this site: [llms.txt](https://zizigy.github.io/vue-dnd-kit/llms.txt)

```bash
npm i @vue-dnd-kit/core
```

<table>
<thead>
  <tr>
    <th>
      Package
    </th>
    
    <th>
      Version
    </th>
    
    <th>
      What it is
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        @vue-dnd-kit/core
      </code>
    </td>
    
    <td>
      3.0.0
    </td>
    
    <td>
      The library.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        @vue-dnd-kit/nuxt
      </code>
    </td>
    
    <td>
      3.0.0
    </td>
    
    <td>
      The Nuxt module: the composables and types auto-imported.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        @vue-dnd-kit/devtools
      </code>
    </td>
    
    <td>
      3.0.0
    </td>
    
    <td>
      A tab in the Vue DevTools: a live map of every list, a log of each drag.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        @vue-dnd-kit/actions
      </code>
    </td>
    
    <td>
      1.0.0
    </td>
    
    <td>
      Drags scripted from code: tests, tours, buttons that move items.
    </td>
  </tr>
</tbody>
</table>

## v3

v3 is a rewrite. One package does drag and drop, sortable lists and trees, in your own markup:
you render your elements and hand their refs to the composables, and the library takes care
of the input, the targets, the reordering, the animations, auto-scroll and the screen readers.

<example height="40rem" hint="Drag cards and columns; click a card to open it, Ctrl/Cmd-click to select" name="board">



</example>

- **Sortable lists, grids and trees** that reorder live: you render a draft of your array, and
the drop writes the new order into your ref, or hands you `e.result`.
- **Lists that share items**: groups, copies, swaps, rules for what goes where; filtered and
virtual lists of thousands of rows.
- **Multi-drag** with your own selection and a rubber band.
- **Drop targets** that accept by rules, shape the overlay over them, and decide a drop,
even asynchronously (`onBeforeDrop`).
- **Files and other apps**: the browser's own drag and drop runs through the same lists and
targets, and items can be dragged out of the page.
- **Animations by default**: items slide, the drop lands on its slot, a cancel flies back;
your own with GSAP or motion.
- **The keyboard and screen readers**: drags by slots, announcements, ARIA attributes.
- **Areas, sensors, modifiers**: an axis, bounds or a grid for a part of the page, input of
your own.

See the [introduction](https://zizigy.github.io/docs/getting-started/introduction), and the
[examples](https://zizigy.github.io/docs/examples): whole apps, each in a full-screen demo you can open in StackBlitz.

## Coming from v2

The API changed: see [migrating from v2](https://zizigy.github.io/docs/getting-started/migrating-from-v2), with a
table from each v2 name to its v3 one and the pitfalls. An app with `^2` in its `package.json`
stays on v2 until the range says `^3`. The v2 docs stay in the version menu at the top of the
page.

## Coming from the betas

From 3.0.0-beta.2 nothing changes. From 3.0.0-beta.1, see
[what beta.2 changed](https://zizigy.github.io/docs/changelog/v3-0-0-beta-2#upgrade).

## All changes

The library is 3.0.0-beta.2's. The commits:
[core-v3.0.0-beta.2...core-v3.0.0](https://github.com/ZiZIGY/vue-dnd-kit/compare/core-v3.0.0-beta.2...core-v3.0.0).

## Sitemap

See the full [sitemap](https://zizigy.github.io/vue-dnd-kit/sitemap.md) for all pages.