I'm having a hard time getting vuedraggable (https://github.com/SortableJS/vue.draggable.next) to work in Nuxt 3. Here is the steps I followed so far.
npm install vuedraggable@next
Then created this file in /plugins/vue-draggable.client.js
import draggable from 'vuedraggable'
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component('draggable', draggable);
})
Then in the template I did this
<template>
<draggable v-model="items" handle=".handle">
<div class="item" v-for="item in items">
<div class="title">{{item.title}}</div>
<div class="handle">Sort</div>
</div>
</draggable>
</template>
<script setup>
let items = $ref([
{
title: 'Item 1'
},
{
title: 'Item 2'
},
{
title: 'Item 3'
}
]);
</script>
In the console I'm getting this error:
[Vue warn]: Failed to resolve component: draggable
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
When the template renders it looks like this:
I'm not sure what step i'm missing?
So turns out I was reading the documentation way wrong, there is a new syntax for the Vue3 version of VueDraggable:
<draggable v-model="items" handle=".handle">
<template #item="{element: item}">
<div class="item">
<div class="title">{{item.title}}</div>
<div class="handle">Sort</div>
</div>
</template>
</draggable>
That's the correct syntax.
One issue I ran into was the template can only have one root element, now it's working great.