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

Question

在我最近开始的项目中，我想使用vue.draggable.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 插件之间存在一些差异。您想要做的是创建一个 Nuxt 插件来使用 Vue 组件。因此，为了做到这一点，您需要将代码更新为：

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

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

区别在于您在 vueApp 中注册组件的方式。此外，通过此更改，您将需要将 html 模板内的组件名称更新为<draggable>

如果您想了解更多信息，请点击一些有用的链接：

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