This doesn't seems to work on Nuxt 3. Can we have Nuxt 3 config example?

[likymm]

Sorry, I'm currently new on Vue and Nuxt and I can't make it work on my Nuxt 3 project.

Step by step scenario

<template>
  <draggable v-model="myList">
    <transition-group name="fade">
      <div v-for="element in myList" :key="element">
        {{ element }}
      </div>
    </transition-group>
  </draggable>
</template>

<script setup lang="ts">
const myList = ref([1, 2, 3]);
</script>

Actual Solution

I tried to add it on Nuxt config using this

export default defineNuxtConfig({
  modules: [
    'vuedraggable',
  ],
});

Expected Solution

I don't get any error and should be working fine on basic drag and drop example.

Really love your work. Thanks guys

[BjornTheProgrammer]

Create a file under plugins/ called vuedraggable.client.ts with the following content...

import { VueDraggableNext } from "vue-draggable-next";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.component("draggable", VueDraggableNext);
});

Then it should work properly, at least it does for me.

Nothing is required in the Nuxt 3 config then. Let me know if it works for you!

[likymm]

@BjornTheProgrammer really really thanks for the help dude. Works for me <3

[rambii]

That's the plugin that works for me with the current version.

import vuedraggable from "vuedraggable";

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.component("draggable", vuedraggable);
});