Vue.jsにBootstrapを適用させる方法

はじめに

BootstrapにはVue専用のものがあり、タグも独自の物が存在するので自分と同じような駆け出しエンジニアの方に共有したいと思ってこの記事を作成致しました。
Bootstrapを適用させる方法は従来通りclass="btn"などと記入する方法と、vue独自の<b-button>などのタグを使用する方法と二種類あるので、どちらも解説していきます。

VueにBootstrapをインストールする

まずBootstrapにはVue専用の物がありますので、そちらをインストールしましょう。
ターミナル or コマンドプロンプトを開いて、

Bootstrapを適用させたいVueプロジェクトに移動

$ cd vue-app

Bootstrapをインストール

$ yarn add bootstrap-vue

これでok。
npmの場合はyarn addではなく

npm install bootstrap-vue

classでBootstrapを使用する場合

Bootstrapをテンプレート内で使用できるようにする

src/main.jsに下記の記述を追加します。

main.js

import Vue from 'vue'
import App from './App.vue'
+ import 'bootstrap/dist/css/bootstrap.css'
+ import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.config.productionTip = false

これで準備はokです。あとは従来通り書いていくだけ。

確認してみる

src/App.vueにボタンを表示させてみましょう。

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
+   <button class="btn btn-primary">bootstrap</button>
  </div>
</template>

表示を確認してみましょう。

問題なくボタンが表示されているのが確認できました。
当たり前ですが、Vueではなく普通にHTML/CSSを書く時はこちらの記述方式でいくことになります。

タグでBootstrapを使用する場合

続いて、Vue独自のBootstrapを使用してみましょう。
ちなみに、各タグのテンプレートは公式のこちらにあります。
https://bootstrap-vue.js.org/

Bootstrapをテンプレート内で使用できるようにする

src/main.jsに下記の記述を追加します。

main.js

import Vue from 'vue'
import App from './App.vue'
+ import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
+ Vue.use(BootstrapVue)
Vue.config.productionTip = false

先ほどと違うのは、

import BootstrapVue from 'bootstrap-vue'

Vue用のBootstrapを読み込む記述と、それを使用できるようにする為の

Vue.use(BootstrapVue)

の記述が追加されています。

確認してみる

src/App.vueにボタンを表示させてみましょう

App.vue

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
    <button class="btn btn-primary">bootstrap</button>
+   <b-button variant="primary">bootstrap</b-button>
  </div>
</template>

違いを比較すると、class="btn"が<b-button></b-button>に置き換えられて、class="btn-promary"はvariant="primary"に置き換えられているという訳ですね。
では表示を確認してみましょう。

同じようにボタンが表示されているのが確認できました。

さいごに

どなたかの参考になれば嬉しいです。
誤字脱字・発信した情報に間違い等ございましたら、ご指摘頂けますと幸いです