如何将 ScrollOut js 添加到 Nuxtjs答案

【问题标题】：How to add ScrollOut js to Nuxtjs如何将 ScrollOut js 添加到 Nuxtjs
【发布时间】：2020-04-22 17:39:01
【问题描述】：

我需要您的帮助才能在 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 创建了这个项目。

非常感谢任何帮助。

谢谢你

【问题讨论】：

标签： javascript vuejs2 nuxt.js

【解决方案1】：

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

import ScrollOut from "scroll-out";

在 nuxt.config.js 中

modules: [
  ...
  { src: '~/plugins/scroll-out.js', mode: 'client' }
  ...
]

这可以让你的插件只加载客户端

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

【讨论】：