[指南] Nuxt3 整合 Bootstrap 5 的方法 – 包含 Popper.js

Nuxt3 搭配 Bootstrap 5 當前並沒有如過 Vue2 時代有 BootstrapVue 完整統整好的套件,於是這邊筆記下如何導入既有的 CSS 專案和搭配 Popper.js 一同完整使用。
nuxt-js-logo


內容

樣式

樣式檔案為 scss 格式,在 assets 的資料夾內新增一個 scss 檔案當作引入入口,同時在 nuxt.config.ts  中將路徑加入。

Popper.js

有一些 BS5 效果如 popper、tooltip 會需要 Popper.js 才能作用。你可以透過新增一個僅在客戶端執行的 Plugin,並在需要的頁面引入即可

取用 nuxtApp.provide() 的資料會出現 type ‘unknown’

由於 TypeScript 沒辦法回傳你 provide 所提供的 key 和 value 資料所導致,你會需要「自行定義型別」,並透過 as 的方法通過 TypeScript 檢驗


程式碼


參考資料

1. vue3 + bootstrap5 創建專案
2. Integrating bootsrap 5 in Nuxt 3 and Vite

按讚加入粉絲團

延伸閱讀