javascriptvue.jsvuejs3vuedraggable

How to get vuedraggable to work in Vue 3?


I've been trying to get vuedraggable to work. I've copied the code pretty much exactly from here: https://github.com/SortableJS/vue.draggable.next

Here's my test component:

<script setup>
import { ref } from "vue"
import draggable from "vuedraggable"
const drag = ref(false)
const data = ref([
    {
        id: 1,
        name: "John"
    },
    {
        id: 2,
        name: "Joao"
    },
    {
        id: 3,
        name: "Jean"
    }
])
</script>

<template>
    <draggable 
        v-model="data" 
        group="people" 
        @start="drag=true" 
        @end="drag=false" 
        item-key="id">
        <template #item="{element}">
            <div>{{element.name}}</div>
        </template>
    </draggable>
</template>

This crashes the app with the following warnings and error: Warnings and error

If I change the code to add a header slot like this:

...
<template>
    <draggable 
        v-model="data" 
        group="people" 
        @start="drag=true" 
        @end="drag=false" 
        item-key="id">
        <template #header>
            <div>Header</div>
        </template>
        <template #item="{element}">
            <div>{{element.name}}</div>
        </template>
    </draggable>
</template>
...

Then I get a slightly different error: Warnings and error

What am I missing?


Solution

  • After playing around with this for a while, I tried copying the actual src folder (not dist) from the GitHub repo and just importing the draggable component from vuedraggable.js, and it works as expected. There must be something weird going on with the compiled files.