vue-dnd-sortable

A minimal drag-and-drop sortable list component library for Vue 3.
⚠️ Warning: This package is experimental and poorly tested. Use at your own risk.

🚨 Disclaimer

This library is:

• 🧪 Experimental
• ❌ Missing many essential features
• ⚠️ Poorly tested
• 📦 May be archived or abandoned at any time

It’s intended for personal use or experimentation — not production-ready.
Use cautiously.

Features

• Lightweight and flexible
• Built with Vue 3 Composition API
• Supports drag handles and custom spacing
• Simple API using <SortableContext>, <SortableItem>, and <SortableHandle>

Installation

bun add vue-dnd-sortable

or

npm install vue-dnd-sortable

Usage Example

<script setup lang="ts">
import { ref } from 'vue'
import {
  arrayMove, 
  horizontalListSortingStrategy,
  SortableContext,
  SortableItem,
  SortableHandle
} from 'vue-dnd-sortable'

const items = ref([1, 2, 3, 4, 5, 6])
</script>

<template>
  <SortableContext 
        lock-axis="x"
        :items
        :strategy="horizontalListSortingStrategy"
        @end="items = arrayMove(items, $event)">
    <div
      style="display: flex; gap: 16px; width: 400px; margin: 0 auto;"
    >
      <SortableItem
        v-for="(item, index) in items"
        :id="item"
        :key="item"
      >
        <SortableHandle>
          handle
        </SortableHandle>
        {{ item }}
      </SortableItem>
    </div>
  </SortableContext>
</template>

<script setup lang="ts">
import { useTemplateRef } from 'vue'
import { useSortable } from 'vue-dnd-sortable'

const { id } = defineProps<{
  id: number
}>()

const element = useTemplateRef('el')

useSortable({ id, element })
</script>

<template>
  <div ref="el">
    <slot />
  </div>
</template>

<script setup lang="ts">
import { useSetHandleRef } from 'vue-dnd-sortable'

const setHandleRef = useSetHandleRef()
</script>

<template>
  <button :ref="setHandleRef">
    handle
  </button>
</template>

License

MIT