[ 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

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

? 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

% npm install --save bootstrap

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

"dependencies": {

"bootstrap": "^5.1.0",

"core-js": "^3.6.5",

"vue": "^3.0.0"

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

 "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')

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

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

App.vue

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

<div>

</div>

</template>

<template>
 <div>
   <BootstrapTest />
 </div>
</template>

import BootstrapTest from './components/BootstrapTest.vue'

export default {

name: 'App',

components: {

BootstrapTest

}

}

</script>

<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>

<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 のもので指定しています。

<div>

Bootstrap Test

<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>

<template> <div> Bootstrap Test <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>

<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')

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

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 プロジェクトを作成する場合などは、参考にしてみてください。