1分でわかるBootstrapとBootstrapVueをVue.jsで使用する方法

BootstrapVueをインストール

vue create my-bootstrapで環境構築後、npm i bootstrap-vueでBootstrapVueをインストールする。

あとはmain.jsにCSSを読み込むための記述を2行追加するだけでBootstrapが使用できるようになる。

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

new Vue({
  render: h => h(App),
}).$mount('#app')

App.vueにBootstrapのclassを付けたHTMLをyarn serveを実行して見ればBootstrapのCSSが適用されているのが確認できる。

<button type="button" class="btn btn-secondary">Button</button>

BootstrapVueを使用する方法

BootstrapVueとは<b-button>のようなBootstrapVueの専用タグを埋め込むだけで、前述のボタンなどを簡単に作成するためのものだ。

使用するにはbootstrap-vueをimportしてVue.use(BootstrapVue)を指定する。

import Vue from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)

例えば下記の2つは同じ結果のコードになる。

<button type="button" class="btn btn-secondary">Button</button>
<hr>
<b-button>Button</b-button>

BootstrapVue b-buttonサンプル

BootstrapVueの独自タグはBootstrapVueのComponentsのページに記載されているため、すべて覚えておくと良いだろう。

https://bootstrap-vue.js.org/docs/components/alert

普通にBootstrapだけを使用するのと比べてコード量を大幅に減らすことができる。