如何将ScrollOut js添加到Nuxtjs

Question

我需要您的帮助才能在Nuxt js项目中添加scrollOut js。我收到窗口未定义的错误。

我遵循了Nuxt的添加插件之类的指南

if (process.client) {
  require('external_library')
}

但是即使在nuxt.config.js文件中添加了插件后，这对我也不起作用

import ScrollOut from "scroll-out";

export default {
  methods: {
    textAnim() {
      TweenMax.set("#logo, .hidetext, #about-text", { visibility: 'visible' })
      const tl = new TimelineMax();
        tl.from("#logo path", 1, { stroke: "white", drawSVG: "0" });
        tl.to("#s_1_", .5, { fill: "white", stroke: "none" }, "-=.3")
        tl.to("#k_1_", .5, { fill: "gray", stroke: "none"}, "-=.3")
        tl.staggerFrom(".hidetext", 1, { y: "130%", ease: Power4.easeOut }, 0.5);
        tl.from("#about-text", 0.5, { alpha: 0, y: 50, ease: Power1.easeOut }, "-=.5");
    }
  },
  mounted() {
    ScrollOut({
      targets: "h3, [data-splitting], ul li",
      threshold: .5
    });
    this.textAnim();
  },
  components: {
    Logo
  }
};

也在我的package.json文件中，我看到了"nuxt": "^2.0.0",版本。我使用create-nuxt-app创建了项目。

非常感谢您的帮助。

谢谢

Answer 1

创建一个文件作为plugins / scroll-out.js并编写：

import ScrollOut from "scroll-out";

在nuxt.config.js中]

{ src: '~/plugins/scroll-out.js', mode: 'client' }
这可以使您的插件仅在客户端加载

这里是文件https://nuxtjs.org/guide/plugins#client-side-only