nuxt.js - LocomotiveScroll と Gsap を使用した Nuxt

Question

私はlocomotive-scrollとGsapを Nuxt プロジェクトに実装するのに苦労しています。DOM と SSR と関係があると私は信じています。scrollproxy Gsap から Nuxt、機関車まですべてのドキュメントをチェックしましたが、これ以上の手がかりはありません。

何かお勧めがあれば、助けていただければ幸いです。お時間をいただきありがとうございます。

ここにエラーがあります

TypeError: 未定義のプロパティ 'scroll' を読み取れません
Uncaught TypeError: _triggers[_i].update は関数ではありません
Uncaught TypeError: 未定義のプロパティ 'match' を読み取れません

plugins/locomotive.js で作成

import Vue from "vue";
import locomotiveScroll from "locomotive-scroll";

Object.defineProperty(Vue.prototype, "locomotiveScroll", {
  value: locomotiveScroll
});

nuxt.config.js で設定

css: [
  //smooth scroll
  '@/assets/css/scroll.css',
],
plugins: [
  {
    src: "~/plugins/locomotive.js",
    mode: "client"
  }
],

app.vue に追加

<script>
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
import LocomotiveScroll from "locomotive-scroll"
</script>

app.vue のマウントされたフックで発火

this.locoScroll = new LocomotiveScroll({
  el: document.querySelector('.smooth-scroll'),
  smooth: true,
})

this.locoScroll.on('scroll', ScrollTrigger.update)

ScrollTrigger.scrollerProxy('.smooth-scroll', {
  scrollTop(value) {
    return arguments.length
      ? this.locoScroll.scrollTo(value, 0, 0)
      : this.locoScroll.scroll.instance.scroll.y
  },
  getBoundingClientRect() {
    return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight }
  },
  pinType: document.querySelector('.smooth-scroll').style.transform ? 'transform' : 'fixed',
})

ScrollTrigger.addEventListener('refresh', () => this.locoScroll.update())
ScrollTrigger.refresh()