@mixin mix_ratio($w, $h, $w_m, $h_m) {
topic12 = [
"面對困難時嘅信仰 - 如何在挑戰中找到力量同希望。",
"工作與職業 - 在職場上實踐基督徒嘅價值觀。",
"家庭與人際關係 - 基督教教導如何處理家庭內嘅互動、沖突同建立健康持久嘅友誼。",
"社群與孤獨感 - 在教會社群中找到歸屬感。",
"經濟與健康管理 - 根據聖經原則管理個人財務和照顧身體。",
"心理健康/情緒管理 - 聖經如何幫助我哋處理情緒如壓力、快樂、悲傷等。",
"時間與挫折管理 - 效法耶穌善用時間及處理失敗。",
"服侍與社區參與 - 真正嘅服務精神同在社區中嘅實踐。",
"青少年與老年信仰 - 幫助青少年建立信仰及在晚年持續成長和服侍。",
"科技與信仰 - 在數碼時代中保持信仰嘅純淨。",
"藝術與創造力 - 用藝術表達信仰同敬拜神。",
"領導與影響力 - 如何做一個基督徒領袖並識別日常生活中嘅神蹟。"
]
Nuxt3 是 Vue 的 SSR 框架。對於初次使用Nuxt 框架的人來說，可能會遇到一個讓人困惑的問題：何時是 server-side render，何時是 client-side render。有某些套件需要在client端引入。本文介紹了在Nuxt3中如何client 端引入套件，並以 ScrollMagic 為例進行了詳細教學。
隨著 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 就可以了。只是在網路上好像還沒有太多人討論解決方案，所以先自己寫一篇起來了。
yarn install scrollmagic
在 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 就不會有在 SSR 載入時找不到 Windows 的問題發生。
所以我們只要新增：plugins/scrollmagic.client.js
import ScrollMagic from "scrollmagic";
import addIndicators from 'scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators'; // debug
export default defineNuxtPlugin((nuxtApp) => {
return {
provide: {
ScrollMagic,
},
};
});
如果沒有載入的話，記得要重開 dev server 讓他重新載入。
接著我們就可以在 nuxt 當中使用這個物件了。例如：
export default {
// ...
mounted() {
const { $ScrollMagic: ScrollMagic } = useNuxtApp();
const controller = new ScrollMagic.Controller({addIndicators: true});
// do something
}
}
需要注意的是，我們在 plugin 所寫的 provide 會自動被加上 $ 前綴，代表是 nuxt 提供的全域方法，所以呼叫時必須使用 $ScrollMagic，而我只是因為覺得 $ 很礙眼，所以在重新命名了一下🤡。
以上就是一個在 nuxt3 client 端引入 ScrollMagic 的方法。