vue3-sortable

Vue 3 sortable lists
10,440 5
vue vue3 list draggable sortable reordable
Install
npm install vue3-sortable
Latest Version:0.14.0
Vue:3
License:MIT
Last Updated:Aug 28, 2026
Links: GitHub  ·  npm
Maintainer: sorincovor

vue3-sortable

Minimal, Vue 3 sortable list component, with no dependencies.

Developed for Pigments app.

Check out vue3-sortable on npmjs.com.

Demo

Check out the live demo and the demo folder.

Usage

Install the dependency:

npm i vue3-sortable

Start by importing the component:

import { AppSortable } from 'vue3-sortable';

Component usage:

<AppSortable
  v-model="verticalList"
  direction="vertical"
  item-key="id"
  handle="handle"
  item-class="item"
>
  <template #item="{ item, index }">
    <div>
      <div class="handle mr-8"></div>
      <div>{{ item.name }}</div>
    </div>
  </template>
</AppSortable>

Props

Prop Type Required Default Description
modelValue Array Yes The list of items that need to be sorted.
direction String No 'vertical' The direction of the sortable ('vertical' or 'horizontal').
itemKey Function | String Yes The unique key used to identify each element from the list. It can be a function which receives the item and index as parameters or a string representing a key on the item object.
disabled Boolean No false Whether to disable the component.
handle String No null CSS class selector used as a drag handle. If the handle is not provided, the item can be moved from anywhere.
itemClass String No null CSS class applied to the items.
transitionGroupName String No null The name of the transition used for the TransitionGroup that is wrapping the list.
animationDuration Number No 200 Reorder animation duration, in milliseconds.
animationEasing String No 'ease' Reorder animation easing.
dragThreshold Number No 3 The minimum number of pixels after it's considered a drag event.
dragDelay Number No 150 The time in milliseconds after the event is registered as a drag.
dragDelayOnTouchOnly Boolean No true Whether the dragDelay prop should apply only on mobile devices.
autoScroll Boolean No true Whether to auto-scroll when dragging an item near the edges.
autoScrollMargin Number No 50 The distance from the container edge that triggers auto-scrolling (in pixels).
autoScrollSpeed Number No 10 The speed at which auto-scrolling occurs.

Slots

#item - Receives the v-for directive item and it's index as props.

Events

@update:model-value

@drag-start

  • index - The initial index of the dragged element.

@drag-end

  • oldIndex - The initial index of the dragged element.
  • newIndex - The final index of the dragged element.
  • value - The reordered list.

@index-change

Triggers when the dragged item index changes.

  • oldIndex - The initial index of the dragged element.
  • newIndex - The final index of the dragged element.

Related Packages

vue-sortable-list

Vue directive for lists allowing draggable sorting in sync.

2,935 2
draggable list sortable vue directive
sl-vue-tree

draggable tree vue component

116,055
draggable sortable vue tree
sl-vue-tree-next

draggable tree vue component

12,243 13
draggable sortable vue vue3 tree
@eraa-in/xtree

Vue3 supported version of sl-vue-tree. A customizable draggable tree component f...

579
draggable sortable vue vue3 tree
@he-tree/vue

Vue tree component. Features: Vue2 & 3, TypeScript, SSR, nested, virtual list, d...

634,779 316
draggable sortable drag and drop api table tree virtual list vue tree component

Version History

Version Released Vue License
0.14.0 ^3.5.0 MIT
0.13.0 ^3.5.0 MIT
0.12.0 ^3.5.0 MIT
0.11.0 ^3.5.0 MIT
0.10.2 ^3.5.0 MIT