[ Vue3 ] 新規作成した Vue 3 CLI プロジェクトで Bootstrap 5 を利用する方法

Web 開発において、 Bootstrap を用いることで見栄えが良く使い勝手の良い UI を、効率よく実装することができるようになります。Vue 2 においては bootstrap-vue を用いることができましたが、 Vue 3 では2021年8月時点で bootstrap-vue を用いると、 Uncaught TypeError: Cannot read property ‘prototype’ of undefined” というエラーが発生し、 UI を表示することができません。色々と情報を探したところ、 Bootstrap 5 を用いることで Vue 3 で Bootstrap を利用することができました。今回は Vue CLI で 新規作成した Vue 3 プロジェクトで Bootstrap 5 を利用する方法をご紹介します。

Vue CLI プロジェクト は、 vue create [ プロジェクト名 ] コマンドを用いて作成したものを想定しています。プロジェクト 作成時にプリセットを選択する場面に遭遇しますが、以下の様に、Vue 3 Preview を選択したものを使っていきます

? Please pick a preset: 
  Default ([Vue 2] babel, eslint) 
❯ Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
  Manually select features

Bootstrap 5 の利用

こちらの記事を参考にしたところ Vue 3 で Bootstrap を利用するには Bootstrap 5 を用いることが簡潔であることがわかりました。 Bootstrap 5 では jQuery を必要としていないため、 以前は jQuery もあわせて導入する必要がありましたがこの手間がなくなることになりますので、よりシンプルに Bootstrap を使うことができます。

Bootstrap 5 のインストール

Bootstrap 5 は以下のコマンドを用いて インストール します。

% npm install --save bootstrap

インストール 後、package.json に以下のように dependencies に bootstrap が追加されます。

 "dependencies": {
   "bootstrap": "^5.1.0",
   "core-js": "^3.6.5",
   "vue": "^3.0.0"
 },

Bootstrap Button の実装

Bootstrap 適用前の コード

main.js

こちらは、 Vue CLI プロジェクト を作成した状態のままです。

import { createApp } from 'vue'
import App from './App.vue'
 
createApp(App).mount('#app')

App.vue

Vue CLI プロジェクト 作成時からは、今回表示テスト用に作成する、 BootstrapTest.vue を インポート するように変更しています。

<template>
 <div>
   <BootstrapTest />
 </div>
</template>
<script>
import BootstrapTest from './components/BootstrapTest.vue'
 
export default {
 name: 'App',
 components: {
   BootstrapTest
 }
}
</script>
<style>
#app {
 font-family: Avenir, Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

BootstrapTest.vue

以下の内容で、 src – components 配下に保存します。 Bootstrap の ボタン として使用するため、type, class を Bootstrap のもので指定しています。

<template>
 <div>
   Bootstrap Test
   <br>
   <button type="button" class="btn btn-success">Success</button>
   <button type="button" class="btn btn-danger">Danger</button>
   <button type="button" class="btn btn-warning">Warning</button>
 </div>
</template>

これらの ファイル を用意した後、 npm run serve で起動してみます。すると、以下の画像のような UI が表示されます。これが Bootstrap 5 適用前の状態になります。

Bootstrap 5 適用後のコード

この UI に Bootstrap を適用するには、 main.js に以下を追記します。

main.js

import { createApp } from 'vue'
import App from './App.vue'
 
import "bootstrap/dist/css/bootstrap.min.css"
 
createApp(App).mount('#app')

上記修正をした後に、改めて npm run serve すると、以下の画像のような UI が表示されます。これが Bootstrap 5 適用後の状態となります。


Table の実装確認

Table に関しても、 Bootstrap 5 公式ドキュメントのサンプルコードを使って以下のように表示確認することができました。

Hoverable 動作も問題なさそうです。


まとめ

今回は、 Vue CLI を使って Vue 3 プロジェクト を新規作成した場合に Bootstrap を利用する方法を紹介しました。既存の Vue 2 プロジェクト を Vue 3 に移行する場合などは今回のように シンプル にはいかないかもしれませんが、新規で Vue 3 プロジェクトを作成する場合などは、参考にしてみてください。

  • Vue CLI で Vue 3 プロジェクト を作成
  • Vue 3 で Bootstrap を利用する場合は bootstrap-vue ではなく Bootstrap 5 を利用する
  • main.js で bootstrap.min.css をインポートする

関連記事