如何在nuxt项目中添加ScrollMagic？

Question

我正在尝试在我的 Nuxt 项目中添加 ScollMagic，我遵循了这篇文章：https ://nuxtjs.org/guide/plugins & 我在 nuxt.config.js 中添加了 ScrollMagic.js 并且我遇到了这个问题：ReferenceError window is没有定义的。

module.exports = {
 plugins: [
    { src: '~plugins/ScrollMagic', mode: 'client' }
  ],
}

Then I've added this snippet in my component:
import ScrollMagic from 'scrollmagic'

我还是有这个问题...

即使像这样覆盖它：

if (process.client) {
  Vue.use(ScrollMagic)
}

Answer 1

我知道这个问题有点老了，但也许有人会发现我的问题很有帮助。

编辑：另外，通过这种方式，您可以将任何插件注册到 nuxt :)。

所以我做了什么：

1. npm i scrollmagic

2. 转到 nuxt.config.js 并将以下内容添加到您的插件部分：

{ src: '~/plugins/ScrollMagic.js', mode: 'client' }

这将确保 scrollmagic 仅包含在客户端中。这可以防止window undefined错误。

3. 转到该plugins文件夹，或将其放在根文件夹中并创建一个名为ScrollMagic.js. 在这里添加以下内容：

import Vue from 'vue';
import * as ScrollMagic from 'scrollmagic';

Object.defineProperty(Vue.prototype, '$scrollmagic', { value: ScrollMagic });

此代码段将使变量 $scrollmagic 在每个组件/页面中可用。你可以打电话this.$scrollmagic使用。例如const controller = new this.$scrollmagic.Controller();

希望这可以帮助任何人。