I'm having a hard time getting vuedraggable (.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.vueAppponent('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 ponent: draggable
If this is a native custom element, make sure to exclude it from ponent resolution via pilerOptions.isCustomElement.

When the template renders it looks like this:

I'm not sure what step i'm missing?

I'm having a hard time getting vuedraggable (https://github./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.ponent('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 ponent: draggable
If this is a native custom element, make sure to exclude it from ponent resolution via pilerOptions.isCustomElement.

When the template renders it looks like this:

I'm not sure what step i'm missing?

• javascript
• nuxt3.js
• vuedraggable

Share Improve this question Follow edited Nov 2, 2023 at 15:47 hotcakedev 2,51522 gold badges3131 silver badges5858 bronze badges asked Sep 5, 2022 at 21:15 JordashJordash 3,10388 gold badges4646 silver badges8080 bronze badges 3

• There is a specific version to install for Vue3 as written in the documentation. Are you sure you're using that one? Should be next or alike. – kissu Commented Sep 6, 2022 at 6:17
• @kissu Yeah in the first step I'm installing npm install vuedraggable@next which is the version for Vue3 – Jordash Commented Sep 6, 2022 at 11:47
• You can use useSortable for dragging ponents – Shulz Commented Dec 19, 2024 at 17:30

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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.