---
title: "Quick start"
description: "A sortable list in three files — a provider, a list and its rows."
canonical_url: "https://zizigy.github.io/vue-dnd-kit/docs/getting-started/quick-start"
---

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

Here is the whole thing, running. Drag a row, or Tab to one, press <kbd value="Space">



</kbd>

, move it
with the arrow keys and press <kbd value="Space">



</kbd>

 again.

<example name="quick-start" title="Quick start">



</example>

## Step by step

<steps level="3">

### Wrap the app in a provider

`DnDProvider` owns the drag. Every composable must run in a component **rendered inside** it —
not in the component whose template contains it.

### Make a list

`makeSortableList` takes the list's element and your array. It returns `items`: a draft that
reorders live while you drag. Render the draft, not your array, and key the rows by id.

### Make the rows

Each row calls `makeSortableItem` with its element and the item it renders. Its key comes from
`item.id`.

</steps>

When the drop lands, `tasks` gets the new order — it's a regular `ref`, so the rest of your app
sees the change like any other.

<tip>

Using Pinia, a server or immutable data? Pass a getter instead of a ref, then call
`e.preventDefault()` in `onDrop` and apply `e.result` yourself.

</tip>

## Sitemap

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