Vue.js 3 に Bootstrap 5 を組込む手順メモ

まとめ

• yarn add bootstrap@next @popperjs/core
• src/main.js に次を追加する。

  import "bootstrap";
  import "bootstrap/dist/css/bootstrap.min.css";
  

導入できた、までの記録

Vue CLI で Vue.js 3 で JavaScript (TypeScript ではなく) でプロジェクトを作成しました。本ページでは重要ではありませんが、 Vue Router, Vuex も組込みました。

さて、始めましょう。

導入にあたって、次のページを参考にしました。

• yarn – ダウンロード · Bootstrap v5.0
• vuejs3 – Using Bootstrap 5 with Vue 3 – Stack Overflow

まずは、

yarn add bootstrap@next

で追加しましたが、

warning " > bootstrap@5.0.0-beta3" has unmet peer dependency "@popperjs/core@^2.9.1".

と警告が出ましたので、

yarn add @popperjs/core

で追加しました。これでインストール自体は完了しました。

次は使えるようにしていきます。 src/main.js で読み込むことで使えるようになりました。記述は次のようになりました。

diff --git a/src/main.js b/src/main.js
index 89ba0ea..b013be0 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,5 +2,7 @@ import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
+import "bootstrap";
+import "bootstrap/dist/css/bootstrap.min.css";

 createApp(App).use(store).use(router).mount("#app");

また、実際に次のコードで Bootstrap 5 がプロジェクト内で動いていることを確認できました。

diff --git a/src/views/About.vue b/src/views/About.vue
index 3fa2807..16606f1 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -2,4 +2,27 @@
   <div class="about">
     <h1>This is an about page</h1>
   </div>
+
+  <div class="dropdown">
+    <button
+      id="dropdownMenuButton1"
+      class="btn btn-secondary dropdown-toggle"
+      type="button"
+      data-bs-toggle="dropdown"
+      aria-expanded="false"
+    >
+      Check Bootstrap
+    </button>
+    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
+      <li>
+        <a class="dropdown-item" href="#">Action</a>
+      </li>
+      <li>
+        <a class="dropdown-item" href="#">Another action</a>
+      </li>
+      <li>
+        <a class="dropdown-item" href="#">Something else here</a>
+      </li>
+    </ul>
+  </div>
 </template>

おわりに

Bootstrap 5 導入にあたって次のページも参考になりました。

また、次にやってみることとして、導入した Bootstrap 5 をカスタマイズできるようにする、というのが良さそうです。

Bootstrap 5 をコンポーネント部品に切り出すやり方、というのも興味がありますけれども、これは少し難易度が高そうです。