如何将 ScrollOut js 添加到 Nuxtjs

Question

I need your help to add scrollOut js in Nuxt js project. I am getting window not defined error.

I have followed Nuxt's guidlines of adding a plugin like

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

However this isn't working for me even after adding the plugin in the nuxt.config.js file

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
  }
};

Also in my package.json file I see "nuxt": "^2.0.0", version. I created the project using create-nuxt-app .

Any help is really appreciated.

Thanking you

Answer 1

create a file as plugins/scroll-out.js and write:

import ScrollOut from "scroll-out";

in nuxt.config.js

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

this can make your plugin load client-side only

here is document https://nuxtjs.org/guide/plugins#client-side-only