Nuxt3中配置vuedraggable自定义组件失败，请求帮助

我在Nuxt3中配置vuedraggable时遇到困难，已执行以下步骤：

1. 安装依赖：

npm install vuedraggable@next

2. 创建客户端插件文件/plugins/vue-draggable.client.js，内容如下：

import draggable from 'vuedraggable'

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

3. 在页面/组件模板中使用：

<template>
  <draggable v-model="items" handle=".handle">
    <div class="item" v-for="item in items">
      <div class="title">{{item.title}}</div>
      <div class="handle">Sort</div>
    </div>
  </draggable>
</template>

<script setup>
let items = $ref([
  {
    title: 'Item 1'
  },
  {
    title: 'Item 2'
  },
  {
    title: 'Item 3'
  }
]);
</script>

遇到的问题 #

控制台抛出错误：

[Vue warn]: Failed to resolve component: draggable
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.

模板渲染结果：

不清楚遗漏了哪一步？

解决方法 #

1. 调整组件注册与使用的命名规范

Vue3推荐组件使用PascalCase命名，Nuxt的模板编译器对小写组件名可能存在解析异常。修改插件文件的注册代码：

import draggable from 'vuedraggable'

export default defineNuxtPlugin((nuxtApp) => {
  // 注册为PascalCase格式的组件名
  nuxtApp.vueApp.component('Draggable', draggable);
})

同时修改模板中的组件调用：

<Draggable v-model="items" handle=".handle">
  <!-- 内部元素不变 -->
</Draggable>

2. 局部导入组件替代全局注册

如果全局注册仍有问题，直接在使用的组件中局部导入：

<template>
  <Draggable v-model="items" handle=".handle">
    <div class="item" v-for="item in items" :key="item.title">
      <div class="title">{{item.title}}</div>
      <div class="handle">Sort</div>
    </div>
  </Draggable>
</template>

<script setup>
// 直接导入组件
import Draggable from 'vuedraggable'
let items = $ref([
  { title: 'Item 1' },
  { title: 'Item 2' },
  { title: 'Item 3' }
]);
</script>

3. 确保插件被Nuxt正确加载

检查nuxt.config.ts，确认插件被纳入加载列表（默认会自动加载plugins/目录下的文件，若手动配置过plugins数组需显式添加）：

export default defineNuxtConfig({
  plugins: [
    '~/plugins/vue-draggable.client.js'
  ]
})

4. 清除缓存并重新安装依赖

执行以下命令清除Nuxt缓存并重新安装依赖：

npx nuxi clean
npm install

之后重启开发服务器，避免缓存导致的插件未加载问题。

内容的提问来源于stack exchange，提问作者Jordash