如何在Nuxt3中正确使用Scrollmagic.js？已导入但无法正常使用

核心问题原因 #

ScrollMagic依赖浏览器环境的window对象，而Nuxt的服务端渲染（SSR）阶段不存在window，直接全局导入会触发报错；另外ScrollMagic并非标准Vue插件，不能用vueApp.use()挂载。

修正插件配置 #

修改plugins/ScrollMagic.client.js，将ScrollMagic作为全局提供项暴露给组件，而非用use挂载：

import { defineNuxtPlugin } from '#app'
// 仅在客户端环境导入ScrollMagic
import * as ScrollMagic from 'scrollmagic'

export default defineNuxtPlugin((nuxtApp) => {
  // 提供全局可访问的ScrollMagic实例
  nuxtApp.provide('ScrollMagic', ScrollMagic)
})

组件中正确使用方法 #

在Vue组件里，必须在**客户端钩子（如onMounted）**中初始化ScrollMagic，确保此时window已存在：

<template>
  <div class="scroll-container">
    <div class="target-element">滚动到这里触发动画</div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
// 从Nuxt插件中获取ScrollMagic
const { $ScrollMagic } = useNuxtApp()

onMounted(() => {
  // 初始化ScrollMagic控制器
  const controller = new $ScrollMagic.Controller()

  // 创建场景
  new $ScrollMagic.Scene({
    triggerElement: '.target-element',
    triggerHook: 0.8
  })
  .setClassToggle('.target-element', 'active') // 触发时添加类
  .addTo(controller)
})
</script>

<style scoped>
.target-element {
  height: 100vh;
  transition: all 0.3s;
}
.target-element.active {
  background-color: #f0f0f0;
}
</style>

额外注意事项 #

• 若需使用ScrollMagic的插件（如GSAP动画插件），同样要确保在客户端环境导入和初始化。
• 避免在组件的setup顶层或服务端钩子（如onServerPrefetch）中使用ScrollMagic，必须限制在客户端生命周期内。

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