Nuxt3 + ScrollMagic

jimmy8646 -

隨著 Vue3 的推出到現在，作為 Vue 的 SSR 框架 Nuxt3 最近也慢慢迎來了正式版，在使用 Nuxt 框架時常會遇到一個問題：就是何時是 server side render 何時是 client side render ，這個在 Nuxt2 時就已經有這個問題，雖然當時還好理解，可是到了 Nuxt3 這個界線感覺越來越模糊；會需要區分是因為有些套件是依賴在 DOM 上運作的，如果在 server side render 把套件引入，很可能會導致套件噴錯之類等情況。ScrollMagic 就是很好的例子，他會直接噴錯說，window is not defined

其實解決方法也很簡單，只要在 client side 的時候再去 initial 就可以了。只是在網路上好像還沒有太多人討論解決方案，所以先自己寫一篇起來了。

解決方法

TL;DR

  • 建立一個 client 的 Nuxt plugin
  • 在 Mounted 時引入

在 Nuxt3 的 plugins 會被自動載入，如果你沒有關閉這個設定的話。

You can use .server or .client suffix in the file name to load a plugin only on the server or client side.

由此可知，我們只需要在檔名加上 .client.js 就可以只在 client 時載入了。例如下面範例
plugins/scrollmagic.client.js

import ScrollMagic from "scrollmagic";

export default defineNuxtPlugin((nuxtApp) => {
  return {
    provide: {
      ScrollMagic,
    },
  };
});

如果沒有載入的話，記得要重開 dev server 讓他重新載入。
接著我們就可以在 nuxt 當中使用這個物件了。例如：

export default {
  // ...
  mounted() {
    const { $ScrollMagic: ScrollMagic } = useNuxtApp();
    // do something
  }
}

需要注意的是，我們在 plugin 所寫的 provide 會自動被加上 $ 前綴，代表是 nuxt 提供的全域方法，所以呼叫時必須使用 $ScrollMagic，而我只是因為覺得 $ 很礙眼，所以在重新命名了一下🤡。

以上就是一個在 nuxt3 client 端引入 ScrollMagic 的方法。