Nuxt.jsプロジェクトにBootstrap-Vueを追加する手順

はじめに

Nuxt.jsプロジェクトにBootstrap-Vueを追加する手順を解説します。

Nuxt.jsプロジェクトの作成手順は以下の記事を参照してください。

Nuxt.jsプロジェクトの作成から動作確認までの手順 - AUTOVICE

なお、Nuxt.jsプロジェクト作成時にUIフレームワークにBootstrap-Vueを選択している場合は以下の手順は必要ありません。以下の手順はNuxt.jsプロジェクト作成後にBootstrap-Vueを追加する場合の手順になります。

Bootstrap-Vueについて

まず、Bootstrap-Vueについて説明します。

Bootstrap-Vueとは、人気のUIフレームワークであるBootstrapをVue用にカスタマイズしたUIフレームワークです。Bootstrap-Vueの一番の特徴は、BootstrapのスタイルをVueのコンポーネントとして書けるという点です。

例えば、Bootstrapでカードを使うときは以下のように書きます。

<div class="card" style="width: 18rem;">
  <img class="card-img-top" src="..." alt="カードの画像">
  <div class="card-body">
    <h5 class="card-title">カードのタイトル</h5>
    <p class="card-text">以下のテキストを追加のコンテンツへの自然な導入としてサポート。 カードのコンテンツ カードのコンテンツ</p>
    <a href="#" class="btn btn-primary">ボタン</a>
  </div>
</div>

Bootstrap-Vueは以下のように書きます。

<div>
  <b-card
    title="Card Title"
    img-src="https://picsum.photos/600/300/?image=25"
    img-alt="Image"
    img-top
    tag="article"
    style="max-width: 20rem;"
    class="mb-2"
  >
    <b-card-text>
      Some quick example text to build on the card title and make up the bulk of the card's content.
    </b-card-text>

    <b-button href="#" variant="primary">Go somewhere</b-button>
  </b-card>
</div>

b-cardというのがBootstrap-Vueに組み込まれているコンポーネントです。コンポーネントのプロパティにタイトルや画像を設定することでカードが作成できます。設定できるプロパティは上記以外にもたくさんあります

もうひとつの特徴は、Bootstrap-VueはjQueryが必須ではないことです。Nuxt.jsで開発しているんだからjQueryなんか入れたくないですよね。

BootstrapではなくBootstrap-Vueを使うことで記述量が劇的に少なくなるわけではありませんが、せっかくなので(?)、Nuxt.jsプロジェクトにBootstrap-Vueを入れてみましょう。

インストール

プロジェクトのルートで以下のコマンドを実行します。

# Npmを使う場合
npm install bootstrap-vue

# Yarnを使う場合
yarn add bootstrap-vue

インストールが完了したら、nuxt.config.jsに以下を追記します。

export default {
  ...
  modules: [
    // 以下を追記
    'bootstrap-vue/nuxt',
  ],
  ...
}

動作確認

pages/index.jsを以下のように変更します。

<template>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-4 pt-5">
        <b-card
          title="Card Title"
          img-src="https://picsum.photos/600/300/?image=25"
          img-alt="Image"
          img-top
          tag="article"
          class="mb-2"
        >
          <b-card-text>
            Some quick example text to build on the card title and make up the bulk of the card's content.
          </b-card-text>

          <b-button href="#" variant="primary">Go somewhere</b-button>
        </b-card>
      </div>
    </div>
  </div>
</template>

テストサーバーを起動し、ブラウザで確認します。

こんな感じで表示されていればOKです。

スタイルはコンポーネントとしてだけでなく、Bootstrapと同様のクラスも使えます。あえてコンポーネントは使わずBootstrapのクラスだけで書くというのももちろんOKです。

まとめ

Nuxt.jsプロジェクトにBootstrap-Vueを追加する手順を解説しました。

UIフレームワークは手軽にモダンなスタイルが使えるので非常に便利です。Bootstrapに慣れているという人が多いと思うので、ぜひBootstrap-Vueを使ってみてください。