【Nuxt.js】Nuxt.jsにBootstrapを入れてみる

前回新規なページを作成するところをやりました。
ページの作成は結構簡単でしたね！

ただ、デザイン部分を逐一自分で作成していくのは大変…
なので、今回はデザイン部分のテンプレとして使用できそうな
BootstrapをNuxt.jsに入れてみようということで、やってみようと思います。

１．Bootstrapとは？

wiki:Bootstrap

とりあえずはデザインテンプレートとして使用できるHTMLやCSSが集まってる
っていうイメージですかね~。

本当にイチからカスタマイズしていくのも悪くないですが、
先ず作っていくとか、こういうものを一部改変して作成するっていうのも
ままアリじゃないかな、と。

２．Nuxt.jsにBootstrapVueをインストールする

参考ページ：BootstrapVue
BootstrapVueは幸いドキュメントが充実しているみたいなんで
ここを参考にしつつインストールしてみます。

Nuxt.jsでのインストール方法も書かれてますね！
GettingStarted_Nuxtjs


先ずはnpmのコマンドでプロジェクトにインストールします。

npm install bootstrap-vue

で、そのままだとまだ使えないので、Nuxt.jsの設定ファイルに
bootstrap-vueを使います、という記述をします。
「nuxt.config.js」というファイルですね。

module.exports = {
  ...(中略)

  modules: [ 'bootstrap-vue/nuxt' ]
}

これでプロジェクトが上手く実行できていれば大丈夫です。

npm run dev

３．Bootstrap-vueのコンポーネント記述を行ってみる

最後に、Bootstrapのコンポーネントを使ってみましょうか。

index.vueを開いて編集します。
下のような感じ。

<template>
  <div class="container">
    <h1>Hello-bv
      <b-badge>New!</b-badge>
    </h1>
  </div>
</template>

こんな感じで書いたのを実行してみると下のような表示になります。

下のはテーブルも表示しているんでちょっと余計なのが出てますが、

「New!」の部分に「b-badge」というコンポーネントを使用しているんですね。

Bootstrap-vueには(ドキュメントを見た感じ)

こういったコンポーネントが複数用意されています。

それぞれ機能もシンプルながら結構あり、

これだけで大体やりたいことはできるんじゃないでしょうか？

この辺で本当に実現できない場合に自作する…

とかでもある程度行けるんじゃないでしょうか

というか、ドキュメントに大体の使い方書いてあるのすごいな。親切。

まだ、ドキュメント全部見たわけじゃないですが、
これ使ってWebサービスレイアウトとかはおおよそまとまったものが作れそうですね！

引き続き、勉強していきたいです。