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 ponents 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
        :ponent="element"
        @update="update"
      />
   </template>
      
    </VueDraggableNext>
  </div>
</template>

<script setup>
import FormBuilder from "~~/ponents/dynamic-ponents/FormBuilder.vue";
import ComponentPalette from "~~/ponents/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 ponent: VueDraggableNex
t
If this is a native custom element, make sure to exclude
 it from ponent resolution via pilerOptions.isCust
omElement.

How can I use this vue plugin properly in a nuxt3 project?

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 ponents 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
        :ponent="element"
        @update="update"
      />
   </template>
      
    </VueDraggableNext>
  </div>
</template>

<script setup>
import FormBuilder from "~~/ponents/dynamic-ponents/FormBuilder.vue";
import ComponentPalette from "~~/ponents/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 ponent: VueDraggableNex
t
If this is a native custom element, make sure to exclude
 it from ponent resolution via pilerOptions.isCust
omElement.

How can I use this vue plugin properly in a nuxt3 project?

• javascript
• plugins
• vuejs3
• draggable
• nuxt3.js

• Did you tried it in a brand new Vue3 project? – kissu Commented Jun 29, 2022 at 6:50
• nope, I directly used it in nuxt 3 project. – Sathya Molagoda Commented Jun 30, 2022 at 5:59

1 Answer 1

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.ponent("draggable", VueDraggableNext);
});

The difference is the way you are registering the ponent in vueApp. Also with this change, you will need to update the ponent name inside the html template to <draggable>

Here follow some useful links if you want to know more:

• https://vuejs/guide/ponents/registration.html#global-registration
• https://v3.nuxtjs/guide/directory-structure/plugins