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

Question

在我最近开始的项目中，我想使用 vue.draggable.next.next 。因此，我在NUXT插件目录中创建了一个“ .js”文件，并添加代码如下。

import VueDraggableNext from "vue-draggable-next";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueDraggableNext);
});

然后，我在下面的一个组件中使用它，

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

一旦运行该项目，我将遇到以下错误：

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

如何在NUXT3项目中正确使用此VUE插件？

Answer 1

VUE插件和NUXT插件之间有一些差异。您要尝试的是创建一个使用VUE组件的NUXT插件。因此，为了做到这一点，您需要将代码更新为：

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

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

区别在于您在VUEAPP中注册组件的方式。另外，随着此更改，您需要将HTML模板中的组件名称更新为＆lt; lt; gt;，

如果您想了解更多信息，请在此处遵循一些有用的链接：

• https://vuejs.org/guide/guide/guide/components/registration.html#global-robal-grobal-grobal-grobal-registration
• https://v3.nuxtjs.org/guide/directory-scrugenture/plugins“ rel =“ noreferrer”> https://v3.nuxtjs.org/guide/directory-scrughure/plugins