In my recently started project, I wanted to use a vue.draggable.next. So I created a ".js" file inside the nuxt plugin directory and I add code as below.
import VueDraggableNext from "vue-draggable-next";
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(VueDraggableNext);
});
Then I used it in one of my components as below,
<template>
<div class="h-full w-full border-2 border-dashed rounded-lg p-5 flex">
<div class="flex w-1/6 h-full">
<ComponentPalette />
</div>
<VueDraggableNext
v-model="form.children"
group="people"
@start="isDragOver = true"
@end="isDragOver = false"
item-key="id"
class="flex flex-col w-5/6 h-full border-blue-700 border-2 border-dashed rounded-lg p-5 space-y-5"
>
<template #item="{element}">
<FormBuilder
:component="element"
@update="update"
/>
</template>
</VueDraggableNext>
</div>
</template>
<script setup>
import FormBuilder from "~~/components/dynamic-components/FormBuilder.vue";
import ComponentPalette from "~~/components/form-builder/ComponentPalette.vue";
import { v4 as uuidv4 } from "uuid";
const form = reactive({
formId: "abcd-1234",
formName: "User Registration",
children: [],
});
const isDragOver = ref(false);
</script>
<style scoped></style>
once I run the project I will get following errors:
[Vue warn]: A plugin must either be a function or an obj
ect with an "install" function.
[Vue warn]: Failed to resolve component: VueDraggableNex
t
If this is a native custom element, make sure to exclude
it from component resolution via compilerOptions.isCust
omElement.
How can I use this vue plugin properly in a nuxt3 project?
have some differences between a Vue Plugin and a Nuxt Plugin. What you are trying to do is create a Nuxt Plugin to use a Vue Component. So in order to do this, you need to update your code to:
import { VueDraggableNext } from "vue-draggable-next";
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.component("draggable", VueDraggableNext);
});
The difference is the way you are registering the component in vueApp. Also with this change, you will need to update the component name inside the html template to <draggable>
Here follow some useful links if you want to know more: