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:
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:
What am I missing?
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.