如何在 Nuxt 3 项目中使用 vue3 组件（vue.draggable.next）作为插件

Question

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?

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.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:

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