備忘録

備忘録

Vue.js + webpack で Bootstrap を使う

Ⅰ. はじめに

Vue.js + webpack の基本的なインストール方法はこちらを参照して下さい。
http://kagasu.hatenablog.com/entry/2017/07/24/082405

上記で作った環境にBootstrap v4をインストールする方法です。

※2018/12/04追記
現在のbootstrap-vue最新版である 2.0.0-rc.11 には日本語入力に関するバグが存在します。
バグは既に修正されてdevブランチにマージされていますがnpmにはリリースされていません。
https://github.com/bootstrap-vue/bootstrap-vue/issues/2131

Ⅱ. やり方

1. bootstrap-vue をインストール
$ npm i -D bootstrap-vue
2. 以下の4行を my-project/src/main.js に書き込む
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)

f:id:kagasu:20170724083121p:plain

3. bootstrapの動作確認をする為に 以下のnavbarを my-project/src/App.vue 等にコピペして実装する
<template>
<div>
  <b-navbar toggleable="md" type="dark" variant="info">
  <b-navbar-toggle target="nav_collapse"></b-navbar-toggle>
  <b-navbar-brand href="#">NavBar</b-navbar-brand>
  <b-collapse is-nav id="nav_collapse">
    <b-navbar-nav>
      <b-nav-item href="#">Link</b-nav-item>
      <b-nav-item href="#" disabled>Disabled</b-nav-item>
    </b-navbar-nav>

    <!-- Right aligned nav items -->
    <b-navbar-nav class="ml-auto">
      <b-nav-form>
        <b-form-input size="sm" class="mr-sm-2" type="text" placeholder="Search"/>
        <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
      </b-nav-form>

      <b-nav-item-dropdown text="Lang" right>
        <b-dropdown-item href="#">EN</b-dropdown-item>
        <b-dropdown-item href="#">ES</b-dropdown-item>
        <b-dropdown-item href="#">RU</b-dropdown-item>
        <b-dropdown-item href="#">FA</b-dropdown-item>
      </b-nav-item-dropdown>

      <b-nav-item-dropdown right>
        <!-- Using button-content slot -->
        <template slot="button-content">
          <em>User</em>
        </template>
        <b-dropdown-item href="#">Profile</b-dropdown-item>
        <b-dropdown-item href="#">Signout</b-dropdown-item>
      </b-nav-item-dropdown>
    </b-navbar-nav>
  </b-collapse>
  </b-navbar>

  <div id="app">
    <router-view/>
  </div>
</div>
</template>
4. 実行結果

f:id:kagasu:20181215055028p:plain