Nuxt 3集成Particles.js遇插件导出错误，求正确配置方案

一、修复插件格式错误 #

你遇到的错误核心是Nuxt3的插件必须使用defineNuxtPlugin导出，而你原来的写法是Vue2的旧格式，完全不符合Nuxt3规范。另外，particles.js是原生JS库，不是Vue插件，不能用Vue.use()。

修改/plugins/particles.js内容如下：

export default defineNuxtPlugin(() => {
  // 仅在客户端加载particles.js
  if (process.client) {
    import('particles.js').then(module => {
      // 将粒子库挂载到window，方便组件调用
      window.particlesJS = module.default;
    });
  }
});

nuxt.config.ts的配置可保留，确保开启ssr: false（粒子动画仅能在客户端运行）：

export default defineNuxtConfig({
  plugins: [
    { src: '~/plugins/particles.js', ssr: false }
  ]
});

二、在组件/页面中实现粒子动画 #

在需要添加粒子效果的页面或组件中，按以下步骤操作：

1. 添加DOM容器：

<template>
  <div>
    <!-- 粒子动画容器 -->
    <div id="particles-js" class="w-full h-screen fixed top-0 left-0 z-0"></div>
    <!-- 页面内容放在粒子容器上方，设置更高层级 -->
    <div class="relative z-10">你的页面内容</div>
  </div>
</template>

2. 初始化并管理粒子实例：

<script setup>
import { onMounted, onUnmounted } from 'vue';

let particlesInstance = null;

onMounted(() => {
  // 确保在客户端且粒子库已加载
  if (process.client && window.particlesJS) {
    particlesInstance = window.particlesJS('particles-js', {
      // 粒子配置参数，可根据需求调整
      particles: {
        number: { value: 80 },
        size: { value: 3 },
        color: { value: '#ffffff' }
      },
      interactivity: {
        events: {
          onhover: { enable: true, mode: 'repulse' }
        }
      }
    });
  }
});

onUnmounted(() => {
  // 页面销毁时清理实例，避免内存泄漏
  if (particlesInstance) {
    particlesInstance.destroy();
  }
});
</script>

<style scoped>
#particles-js {
  background-color: #1a1a2e; /* 自定义背景色 */
}
</style>

三、补充说明 #

• 若觉得原生写法繁琐，也可选择适配Vue3的粒子库（如vue3-particles），但按上述方法可直接基于你已安装的particles.js实现需求。
• 所有粒子相关逻辑必须限制在客户端执行，process.client和ssr: false的配置都是为了避免服务端渲染时因无DOM环境报错。

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