---
title: "3.0.0 · Vue DnD Kit"
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/pt/docs/changelog/v3-0-0"
meta:
  "og: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."
  "og:title": "3.0.0 · Vue DnD Kit"
---

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

Documentação/Changelog

# 3.0.0

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.

[Editar esta página](https://github.com/ZiZIGY/vue-dnd-kit/edit/master/docs/content/en/5.changelog/997.v3-0-0.md)

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

| **Package** | **Version** | **What it is** |
| --- | --- | --- |
| `**@vue-dnd-kit/core**` | 3.0.0 | The library. |
| `**@vue-dnd-kit/nuxt**` | 3.0.0 | The Nuxt module: the composables and types auto-imported. |
| `**@vue-dnd-kit/devtools**` | 3.0.0 | A tab in the Vue DevTools: a live map of every list, a log of each drag. |
| `**@vue-dnd-kit/actions**` | 1.0.0 | Drags scripted from code: tests, tours, buttons that move items. |

## 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.

Live Drag cards and columns; click a card to open it, Ctrl/Cmd-click to select X ---- · Y ----

Carregando a demo…

```
<script setup lang="ts">
import { provide } from 'vue';
import { DnDProvider, type Active, type AnnouncedPosition, type Announcements } from '@vue-dnd-kit/core';
import Board from './Board.vue';
import { BOARD, createBoard, type Card, type Column } from './store';

// Provided above the provider: the overlay it renders reads the board too.
const board = createBoard();
provide(BOARD, board);

// Screen readers hear cards and columns by name, not by id.
const subject = (active: Active) => {
  const item = active.items[0]?.item;
  if (active.type.includes('column')) return `the ${(item as Column).title} column`;
  if (active.ids.length > 1) return `${active.ids.length} cards`;
  return `${(item as Card).id}, ${(item as Card).title}`;
};
/** Where it is: "Todo, position 2 of 6." for a card, "Place 2 of 4." for a column. */
const where = (position: AnnouncedPosition | undefined) => {
  if (!position) return '';
  const column = board.column(position.list);
  if (!column) return `Place ${position.index + 1} of ${position.length}.`;
  return `${column.title}, position ${position.index + 1} of ${position.length}.`;
};

const announcements: Partial<Announcements> = {
  onDragStart: ({ active }, { position }) => {
    const keys = active.sensor === 'keyboard' ? ' Arrow keys move it, Space drops it, Escape cancels.' : '';
    return `Picked up ${subject(active)}. ${where(position)}${keys}`;
  },
  onDragOver: ({ over }, { position }) => {
    if (over?.id === 'trash') return 'Over the trash. Drop to delete.';
    const column = over ? board.column(over.id) : undefined;
    if (column && !over!.accepted) return `${column.title} is full: its limit is ${column.limit} cards.`;
    return position ? where(position) : undefined;
  },
  onDragEnd: ({ active, over }, { position }) =>
    over?.id === 'trash' ? `Deleted ${subject(active)}. Undo is in the notice.` : `Dropped ${subject(active)}. ${where(position)}`,
  onDragCancel: ({ active }, { position }) => `${subject(active)} went back. ${where(position)}`,
  onDragResume: ({ active }) => `Not dropped: still holding ${subject(active)}.`,
};
</script>

<template>
  <!--
    Space picks a card up and drops it: Enter is left to open the card. Touch drags vibrate
    over a column that takes them, and when a drop is refused.
  -->
  <DnDProvider
    :keyboard="{ keys: { start: ['Space'] } }"
    screen-reader-instructions="Space picks up a card or a column, the arrow keys move it, Space drops it, Escape cancels. Enter opens a card, X selects it."
    :announcements="announcements"
    :haptics="{ enter: true, refuse: true }"
  >
    <Board />
  </DnDProvider>
</template>
```

- ****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/vue-dnd-kit/pt/docs/getting-started/introduction), and the [**examples**](https://zizigy.github.io/vue-dnd-kit/pt/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/vue-dnd-kit/pt/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/vue-dnd-kit/pt/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).

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://zizigy.github.io/vue-dnd-kit/pt#website","@type":"WebSite","description":"Drag and drop for Vue 3: sortable lists, kanban boards, trees, multi-drag, animations and accessibility out of the box.","inLanguage":"pt-BR","name":"Vue DnD Kit","url":"https://zizigy.github.io/vue-dnd-kit/pt","translationOfWork":{"@id":"https://zizigy.github.io/vue-dnd-kit#website"}},{"@id":"https://zizigy.github.io/vue-dnd-kit/pt/docs/changelog/v3-0-0#webpage","@type":"WebPage","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.","name":"3.0.0","url":"https://zizigy.github.io/vue-dnd-kit/pt/docs/changelog/v3-0-0","isPartOf":{"@id":"https://zizigy.github.io/vue-dnd-kit/pt#website"},"potentialAction":[{"@type":"ReadAction","target":["https://zizigy.github.io/vue-dnd-kit/pt/docs/changelog/v3-0-0"]}]}]}
```

## Sitemap

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