如何在Nuxt3中集成dotlottie web player？插件方案报错求助

问题根源 #

你之前的错误在于试图用nuxtApp.vueApp.use(DotLottiePlayer)注册dotlottie，但它是Web Component（自定义元素），并非Vue插件，不需要通过Vue的use方法注册；同时Vue3默认会将未知标签视为Vue组件，需要配置让它识别<dotlottie-player>为自定义元素。

正确集成步骤 #

1. 安装依赖

确保已经安装dotlottie播放器包：

npm install @dotlottie/player-component
# 或者
yarn add @dotlottie/player-component

2. 创建客户端插件（修正版）

在plugins/目录下创建dotlottie-player.client.js，只需要导入组件即可（Web Component会自动在浏览器中注册）：

import '@dotlottie/player-component'

注意文件名的.client.js后缀，Nuxt3会自动仅在客户端加载该插件，避免服务端渲染时出错。

3. 配置Nuxt3识别自定义元素

在nuxt.config.ts中添加配置，告诉Vue3<dotlottie-player>是自定义元素：

export default defineNuxtConfig({
  vue: {
    compilerOptions: {
      isCustomElement: (tag) => tag === 'dotlottie-player'
    }
  }
})

4. 在页面中正确使用

调整页面中的组件引用，注意静态资源路径：

• 如果你的.lottie文件放在public/目录下（比如public/graphics/programmer.lottie），直接用绝对路径：

<template>
  <section>
    <div>
      <dotlottie-player
        src="/graphics/programmer.lottie"
        autoplay
        loop
        style="width: 300px; height: 300px;"
      />
    </div>
  </section>
</template>

• 如果放在assets/目录下，建议迁移到public目录以简化静态资源访问逻辑。

验证 #

重启Nuxt3开发服务器，页面应该能正常渲染并播放Lottie动画。

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