{"id":12461,"library":"vue-draggable-next","title":"Vue 3 Draggable Component","description":"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.","status":"active","version":"2.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/anish2690/vue-draggable-next","tags":["javascript","vue","vue3","vue-next","draggable","drag-and-drop","sortable","sortablejs","vue-draggable","typescript"],"install":[{"cmd":"npm install vue-draggable-next","lang":"bash","label":"npm"},{"cmd":"yarn add vue-draggable-next","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-draggable-next","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core drag-and-drop logic; vue-draggable-next is a wrapper around Sortable.js.","package":"sortablejs","optional":false},{"reason":"Required Vue.js framework for component rendering.","package":"vue","optional":false}],"imports":[{"note":"VueDraggableNext is a named export. It is often aliased as `draggable` in the component's `components` option for brevity.","wrong":"import VueDraggableNext from 'vue-draggable-next'","symbol":"VueDraggableNext","correct":"import { VueDraggableNext } from 'vue-draggable-next'"},{"note":"Common practice to alias VueDraggableNext to 'draggable' for cleaner template usage.","symbol":"draggable","correct":"import { VueDraggableNext as draggable } from 'vue-draggable-next'"}],"quickstart":{"code":"<template>\n  <div class=\"drag-container\">\n    <draggable \n      v-model=\"list\" \n      group=\"people\" \n      @change=\"onListChange\"\n      item-key=\"id\"\n    >\n      <template #item=\"{ element }\">\n        <div class=\"drag-item\">\n          {{ element.name }}\n        </div>\n      </template>\n    </draggable>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref } from 'vue'\nimport { VueDraggableNext } from 'vue-draggable-next'\n\ninterface Person {\n  id: number\n  name: string\n}\n\nconst list = ref<Person[]>([\n  { id: 1, name: 'John' },\n  { id: 2, name: 'Jane' },\n  { id: 3, name: 'Bob' }\n])\n\nconst onListChange = (event: any) => {\n  console.log('List changed:', event)\n}\n</script>\n\n<style scoped>\n.drag-container {\n  min-height: 200px;\n  padding: 20px;\n  border: 1px dashed #ccc;\n}\n\n.drag-item {\n  padding: 10px;\n  margin: 5px 0;\n  background: #f0f0f0;\n  border-radius: 4px;\n  cursor: grab;\n  transition: background 0.2s;\n}\n\n.drag-item:hover {\n  background: #e0e0e0;\n}\n</style>","lang":"typescript","description":"This example demonstrates a basic draggable list using Vue 3's Composition API and TypeScript, allowing users to reorder items."},"warnings":[{"fix":"Update all instances of `beforeDestroy` to `beforeUnmount` in your Vue 3 component lifecycle hooks.","message":"When 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.","severity":"breaking","affected_versions":">=1.0.7"},{"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'\"`).","message":"The `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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade to `vue-draggable-next` version 2.2.1 or higher to ensure proper TypeScript definition files are included and recognized.","message":"Versions prior to 2.2.1 had issues with missing TypeScript definition files, leading to type errors or incomplete IntelliSense when used in TypeScript projects.","severity":"gotcha","affected_versions":"<2.2.1"},{"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.","message":"For `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.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change `import VueDraggableNext from 'vue-draggable-next'` to `import { VueDraggableNext } from 'vue-draggable-next'`.","cause":"Incorrect import statement; attempting a default import when it's a named export.","error":"Property 'VueDraggableNext' does not exist on type 'typeof import(\"...\")'"},{"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.","cause":"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.","error":"Argument of type '(...)' is not assignable to parameter of type 'never'."},{"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.","cause":"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.","error":"[Vue warn]: Injection \"Symbol(component:setup-context)\" not found."}],"ecosystem":"npm"}