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

Posted onAuthorANDY LIEN

章節連結

Nuxt3 搭配 Bootstrap 5 當前並沒有如過 Vue2 時代有 BootstrapVue 完整統整好的套件，於是這邊筆記下如何導入既有的 CSS 專案和搭配 Popper.js 一同完整使用。
[指南] Nuxt3 整合 Bootstrap 5 的方法 – 包含 Popper.js

內容

樣式

樣式檔案為 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

按讚加入粉絲團

延伸閱讀