前言
近期正在練習把 Vue2 的舊專案翻成 Nuxt3,因為過去這個專案是使用 Bootstrap4,想說就順道升上 Bootstrap5。不過 Nuxt3 跟 Bootstrap5 並沒有一個整合好的套件(例如:BootstrapVue),所以在引用上就會多一些設置。
(一開始在考慮 Nuxt3 的套件整合上,本來是有考慮翻到 Tailwind,不過考慮到重切時間跟專注度,決定還是先專心熟悉 Nuxt3)
設置部分
CDN 配置
這邊先提一個最簡易的配置,如果只是做個 Demo,沒有要使用到客製化,那麽就可以在 nuxt.config.ts 直接引入 CDN 使用。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
| import { defineNuxtConfig } from "nuxt"; export default defineNuxtConfig({ app: { head: { link: [ { rel: "stylesheet", href: "https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css", integrity: "sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU", crossorigin: "anonymous", }, ], script: [ { src: "https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js", integrity: "sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ", crossorigin: "anonymous", }, ], }, }, });
|
安裝
先在專案的終端機中,輸入以下 npm install bootstrap @popperjs/core
。Popper.js 是跟一些 Bootstrap5 效果如 popper、tooltip 有關。
css 設置
我們可以在 nuxt.config.ts 的設置中,直接引入 bootstrap.scss,當然這樣就無法去客製;
這邊是在 assets 創建一個 main.scss,然後 @import "./variables";
這個部分是從 node_module bootstrap 複製過來的,這樣就可以去客製一些 bootstrap 變數(例如:顏色、距離等等)。然後也能帶上自己要寫的 scss。
1 2 3 4 5 6 7 8
| import { defineNuxtConfig } from "nuxt"; export default defineNuxtConfig({ css: [ "@/assets/styles/main.scss", ], });
|
1 2 3 4 5 6 7 8 9
| @import "bootstrap/scss/functions"; @import "./variables"; @import "bootstrap/scss/bootstrap";
@import "./common"; @import "./page/prod"; @import "./page/home";
|
JS 的設置
在 Nuxt 專案的根目錄中,創建 plugins 的資料夾,並且新建一支 JS 檔案,這邊範例是用 useBootstrap.client.js 作為命名。
接下來把 node_module 中的 bootstrap.bundle.js 給引用進來,接著 nuxtApp.provide("bootstrap", bootstrap)
將 bootstrap.bundle.js 的功能引用到 Nuxt 中。
1 2 3 4 5 6
| import bootstrap from "bootstrap/dist/js/bootstrap.bundle";
export default defineNuxtPlugin((nuxtApp) => { nuxtApp.provide("bootstrap", bootstrap); });
|
接著我們可以透過 const { $bootstrap } = useNuxtApp()
來使用 bootstrap js,記得要加上 $ 符號。
以下範例示意,當去打 api 拿回資料後,才去觸發 Modal:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| <script setup> const { $bootstrap } = useNuxtApp();
$fetch(api, { method: "GET", headers: headers, }).then((res) => { const { data } = res; productModalHandle.show(); });
onMounted(() => { productModalHandle = new $bootstrap.Modal(productModal.value, {}); delProductModalHandle = new $bootstrap.Modal(delProductModal.value, {}); }); </script>
|
結尾
以上是參考這篇 stackoverflow,並做個延伸。
如果有遇到 sass 的 abs 警告,則可以試著把 sass 的版本降低。