Nuxt3 + ScrollMagic

Nuxt3 是 Vue 的 SSR 框架。對於初次使用Nuxt 框架的人來說,可能會遇到一個讓人困惑的問題:何時是 server-side render,何時是 client-side render。有某些套件需要在client端引入。本文介紹了在Nuxt3中如何client 端引入套件,並以 ScrollMagic 為例進行了詳細教學。

Nuxt3 + ScrollMagic
Photo by Volodymyr Hryshchenko / Unsplash

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

CleanShot-2023-05-04-at-22.51.48

其實解決方法也很簡單,只要在 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 的方法。