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

2021年2月16日 19:33

はじめに

本記事では、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>

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

適用されるスタイルは通常のBootstrapと変わりません。Bootstrap-VueはあくまでBootstrapをコンポーネントとして記述するためのフレームワークということですね。

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

まとめ

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

関連記事

【Nuxt.js+Firebase】core-js関連のエラーが大量に出力される事象の原因と対処
# はじめに Nuxt.jsプロジェクトでFirebaseを使っていると、テストサーバー起動時やデプロイ時にcore-js関連のエラーが大量に出力されることがあります。 なぜエラーが出力されるのか、どうすれば解消できるのかをまとめました。 [...]
2020年6月9日 10:30
【Nuxt.js】GitHubからセキュリティアラートが届いたときの対応【package.json】
# はじめに GitHubでソース管理を行っているプロジェクトに`package.json`のセキュリティアラートが届いたときの対応を記載します。 今回はNuxt.jsで作成したプロジェクトでの対応記録のため、タイトルなどに「Nuxt.js [...]
2020年6月8日 18:01
【カテゴリ別】Nuxt.js関連の記事まとめ
# はじめに Nuxt.js関連の記事が増えてきたので、この記事でカテゴリ別にまとめたいと思います。 # 最初の一歩 - [Nuxt\.jsプロジェクトの作成から動作確認までの手順](https://www.autovice.jp/art [...]
2020年3月17日 10:40
Nuxt.jsプロジェクトでFirebase AuthenticationのGoogle認証でログインし、認証情報をLocal Storageに保存する
# はじめに この記事ではFirebase AuthenticationのGoogle認証を利用してログイン機能を作成し、そのログイン情報をブラウザのLocal Storageに保存する方法を解説します。 この記事で作成したNuxt.jsプ [...]
2020年3月17日 10:21
Nuxt.jsプロジェクトでFirebase Storageにアップロードした画像を変更/削除する
# はじめに 数回に分けてNuxt.jsプロジェクトでデータの永続化を行う方法を解説しています。これらの記事は上から順番に読んでいくことを想定しています。 - [Nuxt\.jsプロジェクトでFirestoreを利用したデータの永続化/取り [...]
2020年3月16日 16:52