BootstrapVue：Vue CLI 3 で Bootstrap 4 を使う
Vue CLI 3 で作った環境に、Bootstrap 4 を入れて使ってみたい。静的なスタイル適用だけであれば、Bootstrap 4 自体を導入して SCSS を読み込めば良いだろうが、jQuery に依存している動的な一部機能が使えない。
Angular だと ngx-bootstrap などの Bootstrap ラッパーがあるのだが、Vue の場合は BootstrapVue というラッパーツールがあり、コレを使うのが良さそうだ。
今回は Vue CLI (@vue/cli) でプロジェクトの雛形を作り、そこに BootstrapVue をプラグインとして導入してみようと思う。
目次
Vue プロジェクトの雛形を作成する
まずは @vue/cli でプロジェクトの雛形を作ろう。
# Vue CLI のインストール
$ npm install -g @vue/cli
# Vue プロジェクトを作る
$ vue create my-bootstrap-vue
特に凝った構成にはしておらず、TypeScript を有効にしたくらい。
BootstrapVue をインストールする
BootstrapVue の導入方法は色々あるが、Vue CLI で作ったプロジェクトだと、$ vue add というプラグイン追加のコマンドを使うのが楽そうだった。
- 参考：BootstrapVue
# 以下で BootstrapVue を入れる
$ vue add bootstrap-vue
�📦 Installing vue-cli-plugin-bootstrap-vue...
+ vue-cli-plugin-bootstrap-vue@0.4.0
added 1 package from 1 contributor and audited 34402 packages in 7.856s
found 0 vulnerabilities
✔ Successfully installed plugin: vue-cli-plugin-bootstrap-vue
? Use babel/polyfill? Yes # ココだけ「Yes」と答える
�🚀 Invoking generator for vue-cli-plugin-bootstrap-vue...
�📦 Installing additional dependencies...
> bootstrap-vue@2.0.1 postinstall C:\Neos21\Dev\Sandboxes\my-bootstrap-vue\node_modules\bootstrap-vue
> opencollective || exit 0
;XXXXXXXXXXXX333333333XXXXXXXXXXXXX;
:2XXXXXXXXXXSisssssiSXXXXXXXXXXX2:
.;S3XXXXXXXXX, .,,,,..,SXXXXXXXX3S;,
.:SX2222XXXXXX, :XXXXS. r3XXXX2222X2;.
.riiiiii5XXXXX, .;;;;, :2XXXX5iiiiiir.
;iiiiiiSXXXX, ,rrrr;,.;XXXSiiiiii;
;iiiiiiS2XX, ;3333X; .2XSiiiiii;
:siiiiii2X, .::::,..r2iiiiiis:
,siiiiii2isrrrrrsi22iiiiiis,
,riiiiii23333333X2iiiiiir,
.riiiiii5XXXXXX5iiiiiir.
.;iiiiiiSXXXXSiiiiii;.
;iiiiiiSXXSiiiiii;
:siiiiiiiiiiiis:
,siiiiiiiiiis,
,riiiiiiiir,
.riiiiiir.
.;iiii;.
;ii;
;;
Thanks for installing bootstrap-vue
Please consider donating to our open collective
to help us maintain this package.
Number of contributors: 230
Number of backers: 41
Annual budget: US$ 1,066
Current balance: US$ 1,525
Donate: https://opencollective.com/bootstrap-vue/donate
added 10 packages from 16 contributors and audited 34424 packages in 8.938s
found 0 vulnerabilities
⚓ Running completion hooks...
✔ Successfully invoked generator for plugin: vue-cli-plugin-bootstrap-vue
The following files have been updated / added:
src/plugins/bootstrap-vue.js
babel.config.js
package.json
src/main.ts
You should review these changes with git diff and commit them.
こんな感じでインストールできた。
最後に出てきた4ファイルが追加・更新されたモノ。Bootstrap 本体の SCSS や BootstrapVue が追加されている。
Bootstrap が使えるか確認する
適当な .vue ファイルを開き、HTML に以下のように書いてみる。
<b-alert show>Default Alert</b-alert>
そしたら $ npm run serve で開発サーバを起動し、ページを開いてみる。
Bootstrap の Alert コンポーネント (色の付いた枠の要素) が表示されていれば、うまく BootstrapVue が適用できている。
BootstrapVue コンポーネントからのリンクはどう書く？
NavBar コンポーネントなど、Bootstrap コンポーネントからリンクを貼るタイプのモノの実装方法が、リファレンスからだとよく分からなかったので、調べてみた。
例えば <b-nav-item> などは、NavBar の1項目を表すコンポーネントなので、コレ自体にリンクを貼りたい。どうしたらいいかというと、Vue Router の <router-link> 要素と同じく to 属性で書ける。
<!-- NavBar 全体。色付け・下マージンなど -->
<b-navbar toggleable="lg" type="dark" variant="primary" class="mb-3">
<b-navbar-brand href="#">タイトル</b-navbar-brand>
<!-- 幅が狭い時に表示されるハンバーガーメニューアイコン・target 属性で開閉したい要素の id を指定する -->
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<!-- b-collapse に is-nav を付けておくと親要素のブレイクポイントで閉じられるようになる -->
<b-collapse is-nav id="nav-collapse">
<b-navbar-nav>
<b-nav-item to="/" exact-active-class="active">Home</b-nav-item>
<b-nav-item to="/about" exact-active-class="active">About</b-nav-item> <!-- exact と active-class を別々に付与することもできる -->
</b-navbar-nav>
</b-collapse>
</b-navbar>
<b-nav-item to="/"> と実装したとおり。<router-link to="/"> と書いたのと同じだ。
開いているページのリンクを明るくするには active という CSS クラスを指定したいが、exact-active-class 属性を使うと、パスが完全一致した時に付与する CSS クラス名を指定できる。
<b-nav-item to="/about" exact active-class="active">About</b-nav-item>
こんな風に exact 属性と active-class 属性とを併用しても良い。
以上
その他、BootstrapVue のコンポーネントは公式サイトのリファレンスを参照して欲しい。
Angular における ngx-bootstrap と似たようなノリで使えて良い感じ。
Vue の練習は以下のリポジトリでやっているので、よかったらドウゾ。
Zeit Now にデプロイしてみたので、以下のいずれかの URL で動作しているモノを見られる。