Registry / web-framework / vue-draggable-next

vue-draggable-next

library2.3.0jsnpmunverified

vue-draggable-next is a Vue 3 component that facilitates drag-and-drop functionality within web applications, building upon the robust Sortable.js library. It provides a touch-friendly, lightweight solution for reordering lists and elements, supporting both the Composition API and Options API. The current stable version is 2.3.0. The project maintains an active release cadence, with several updates and fixes in recent months (e.g., v2.2.1, v2.2.0, v2.1.0 since late 2020), indicating ongoing development and bug resolution. Key differentiators include its explicit support for Vue 3's Composition API, built-in TypeScript definitions, a small gzipped footprint (~7kb), and full compatibility with all underlying Sortable.js options, making it a flexible choice for various drag-and-drop scenarios like Kanban boards or reorderable lists.

web-framework

npm install vue-draggable-next

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-DRAGGABLE-NEXT

vue-draggable-next

web-frameworkjavascriptv2.3.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VueDraggableNext

✓ import { VueDraggableNext } from 'vue-draggable-next'

✗ import VueDraggableNext from 'vue-draggable-next'

VueDraggableNext is a named export. It is often aliased as `draggable` in the component's `components` option for brevity.

draggable

✓ import { VueDraggableNext as draggable } from 'vue-draggable-next'

Common practice to alias VueDraggableNext to 'draggable' for cleaner template usage.

This example demonstrates a basic draggable list using Vue 3's Composition API and TypeScript, allowing users to reorder items.

<template> <div class="drag-container"> <draggable v-model="list" group="people" @change="onListChange" item-key="id" > <template #item="{ element }"> <div class="drag-item"> {{ element.name }} </div> </template> </draggable> </div> </template> <script setup lang="ts"> import { ref } from 'vue' import { VueDraggableNext } from 'vue-draggable-next' interface Person { id: number name: string } const list = ref<Person[]>([ { id: 1, name: 'John' }, { id: 2, name: 'Jane' }, { id: 3, name: 'Bob' } ]) const onListChange = (event: any) => { console.log('List changed:', event) } </script> <style scoped> .drag-container { min-height: 200px; padding: 20px; border: 1px dashed #ccc; } .drag-item { padding: 10px; margin: 5px 0; background: #f0f0f0; border-radius: 4px; cursor: grab; transition: background 0.2s; } .drag-item:hover { background: #e0e0e0; } </style>

Debug

Known issues

breakingWhen migrating from `vue-draggable` (Vue 2) to `vue-draggable-next` (Vue 3), the Vue 2 lifecycle hooks like `beforeDestroy` have been renamed to `beforeUnmount` in Vue 3. Ensure your custom component logic adapts to these new names.

fix

Update all instances of `beforeDestroy` to `beforeUnmount` in your Vue 3 component lifecycle hooks.

affects: >=1.0.7

gotchaThe `item-key` prop is crucial for Vue's efficient re-rendering and tracking of list items, especially during drag-and-drop operations. Failing to provide a stable, unique `item-key` can lead to unexpected behavior, performance issues, or incorrect list state.

fix

Always define a unique `item-key` prop on the `draggable` component, typically corresponding to a unique ID on each item in your `v-model` list (e.g., `:item-key="'id'"`).

affects: >=1.0.0

gotchaVersions prior to 2.2.1 had issues with missing TypeScript definition files, leading to type errors or incomplete IntelliSense when used in TypeScript projects.

fix

Upgrade to `vue-draggable-next` version 2.2.1 or higher to ensure proper TypeScript definition files are included and recognized.

affects: <2.2.1

gotchaFor `v-model` to work correctly with drag-and-drop, Vue requires the underlying data to be reactive. While `vue-draggable-next` handles internal updates, ensure the list passed to `v-model` (or `list`) is a reactive reference.

fix

In Composition API, use `ref([])` or `reactive([])` for your list data. In Options API, define your list within the `data` property of your component.

affects: >=1.0.0

Errors

Common errors & fixes

Property 'VueDraggableNext' does not exist on type 'typeof import("...")'

Incorrect import statement; attempting a default import when it's a named export.

fix

Change `import VueDraggableNext from 'vue-draggable-next'` to `import { VueDraggableNext } from 'vue-draggable-next'`.

Argument of type '(...)' is not assignable to parameter of type 'never'.

Often seen when TypeScript cannot infer the type of elements in the `v-model` list or within event handlers, particularly if `item-key` is missing or types are not explicitly defined.

fix

Ensure your list is strongly typed (e.g., `list = ref<Person[]>()`) and that `item-key` is correctly set, allowing TypeScript to better track item types.

[Vue warn]: Injection "Symbol(component:setup-context)" not found.

This warning can occur when a component expected to be rendered within a Vue context is not, or when there are mismatched Vue versions in your project.

fix

Verify that `vue-draggable-next` is correctly installed and imported, and that your build setup is using a consistent Vue 3 version. Clear node_modules and reinstall dependencies.

Upgrade

Version history

2.3.0latest on npm

Audit

Dependencies

sortablejsrequiredCore drag-and-drop logic; vue-draggable-next is a wrapper around Sortable.js.

vuerequiredRequired Vue.js framework for component rendering.

Agent activity

13 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/anish2690/vue-draggable-next ↗

packagehttps://www.npmjs.com/package/vue-draggable-next ↗