はじめに
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に下記の記述を追加します。
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にボタンを表示させてみましょう。
<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に下記の記述を追加します。
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にボタンを表示させてみましょう
<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"
に置き換えられているという訳ですね。
では表示を確認してみましょう。
同じようにボタンが表示されているのが確認できました。
さいごに
どなたかの参考になれば嬉しいです。
誤字脱字・発信した情報に間違い等ございましたら、ご指摘頂けますと幸いです