はじめに

本記事では、Nuxt.jsプロジェクトにBootstrap-Vueを追加する手順について説明しています。

Nuxt.jsプロジェクトの作成がまだの方は、以下の記事を参照してNuxt.jsプロジェクトを作成しておいてください。

なお、Nuxt.jsプロジェクト作成時にUIフレームワークにBootstrap-Vueを選択している場合は以下の手順は必要ありません。以下の手順はNuxt.jsプロジェクト作成後に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が必須ではないことです。

Bootstrap-Vueの追加

Bootstrap-Vueのインストール

以下のコマンドを実行して、Bootstrap-Vueをインストールします。

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

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

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

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

Nuxt.jsプロジェクトでBootstrap-Vueが使えるようになりました。

Bootstrap-Vueの使い方

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>