I’m trying to use Vue Draggable Next for a Vue 3 example page.
I’ve followed guide in the repo. After failing to import Vue Draggable Next component, I’ve started using https://unpkg.com/[email protected]/dist/vue-draggable-next.global.js instead of https://cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/4.0.0/vuedraggable.umd.min.js.
My HTML code is shown in this JSFiddle:
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue@3"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.14.0/Sortable.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-draggable-next.global.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in bbcourses" :key="item.id">
<div style="border: 1px #000 solid">{{ item.name }}</div>
</li>
</ul>
<ul>
<li
v-for="item in pcourses"
:key="item.id"
style="border: 1px #000 solid"
>
{{ item.name }}
</li>
</ul>
<draggable
:list="pcourses"
group="people"
@start="log"
@end="log"
itemKey="id"
@change="log"
>
<div
v-for="element in list"
:key="element.name"
style="border: 1px #000 solid"
>
{{ element.name }}{{ element.id }}
</div>
</draggable>
</div>
<script>
const app = Vue.createApp({
data() {
return {
drag: false,
message: "Hello Vue!",
bbcourses: [
{ id: 1, name: "First course" },
{ id: 2, name: "Second course" },
],
pcourses: [
{ id: 1, name: "First course" },
{ id: 2, name: "Second course" },
],
};
},
methods: {
log(event) {
console.log(event);
},
},
});
app.component("draggable", VueDraggableNext);
app.mount("#app");
</script>
</body>
</html>Provide error: "[Vue warn]: Component is missing template or render function." and doesn’t show the draggable list.