vue.js

【簡単】Nuxt.jsでBootstrapVueの使い方解説

こんにちは、フルスタックエンジニアのryuです。

今回の記事では、Nuxt.jsを使用してBootstrapVueの使い方を解説します。Bootstrapとは、フロントエンドのコンポーネントライブラリで、フロントエンドの実装を簡単に行うことができます。BootstrapVueを使用して簡単にアプリを作成しましょう。

Nuxt.jsでBootstrapVueの使い方解説

Cssの実装が面倒・・・

BootstrapVueを使ってみましょう!

今回の記事では、Nuxt.jsのBootstrapVueの使い方を解説します。

BootStrapVueを使用すると、以下のようなページが簡単に作成することができます。

ナビバーやJumbotron、カードなどを使用すると簡単にブログのようなサイトを構築することができます。ちなみに上記は30分以内に設定しました。

これはBootstrapVueのコンポーネントを使用しているから、簡単に短時間で構築することができます。

では、このBootstrapVueのインストール方法、簡単な使い方を解説します。

BootstrapVueのインストール方法

BootstrapVueはVueのアプリを作成するときに同時にインストールする方法と、後から追加する方法があります。

まずは、アプリを作成するときに同時にインストールする方法を解説します。

下記のコマンドを入力して、Nuxt.jsのアプリを作成します。

npx create-nuxt-app bootstrap
npx create-nux-app [プロジェクト名]

Nuxt.jsのコマンドについては、下記のURLを参考にしてください。

インストール – NuxtJS

コマンドを入力すると、プロジェクトが作成されます。インストールの際、BootStrapVueをインストールするかどうか聞かれます。

BootstrapVueを選択して、インストールを進めます。これで完了です。簡単ですね。

次にプロジェクトの作成後にBootstrapのインストールする方法を解説します。今回の作業を忘れていたもしくは、あとからBootstrapが必要になった場合に参考にしてください。

BootstrapVueを後からインストールする方法

BootstrapVueを後からインストールする場合は、下記のコマンドを入力してください。

npm install vue bootstrap bootstrap-vue
もしくは
yarn add vue bootstrap bootstrap-vue

インストールしたら、nuxt.config.jsのファイルでモジュールの指定を行います。

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

modulesの中に”bootstrap-vue/nuxt’を入力しましょう。

これで、設定は完了です。

BootstrapVueを使ってみる

インストールが完了したら、BootstrapVueを使ってみましょう。使い方は普通のBootstrapと同じ感じです。

今回は、ナビバーをBootstrapVueで作成してみます。

BootstrapVueでナビバーを作成する

まず、ナビバーのvueコンポーネントを作成します。componentsフォルダに「Navbar.vue」というファイル名でファイルを作成します。

ファイルを作成したら、下記のように入力します。

<template>
    <div>
        <b-navbar toggleable="lg" type="dark" style="background-color: #563d7c;">
            <b-navbar-brand href="/">
                <img src="https://placekitten.com/g/30/30" class="d-inline-block align-top" alt="Kitten">
                Home
            </b-navbar-brand>
            <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
            <b-collapse id="nav-collapse" is-nav>
                <b-navbar-nav>
                    <b-nav-item-dropdown text="カテゴリ" right>
                        <b-dropdown-item href="#">EN</b-dropdown-item>
                        <b-dropdown-item href="#">ES</b-dropdown-item>
                        <b-dropdown-item href="#">RU</b-dropdown-item>
                        <b-dropdown-item href="#">FA</b-dropdown-item>
                    </b-nav-item-dropdown>
                    <b-nav-item href="/form">新規登録</b-nav-item>
                </b-navbar-nav>
                <b-navbar-nav class="ml-auto">
                    <b-nav-form>
                        <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
                        <b-button size="sm" variant="outline-primary" class="my-2 my-sm-0" type="submit">Search</b-button>
                    </b-nav-form>
                </b-navbar-nav>
            </b-collapse>
        </b-navbar>
    </div>
</template>

このコンポーネントをページに表示してみましょう。

pagesフォルダ内の「index.vue」ファイルにコンポーネントを追加します。

<template>
  <div>
  <Navbar />
  </div>
</template>

これで完了です。Navbarは全てのページに表示させたいので、layoutsの中に設定しても良いです。

BootstrapVueのその他の設定

その他の設定については、こちらのBootstrapVueの公式ドキュメントを参考にしてください。

Components | BootstrapVue (bootstrap-vue.org)

このドキュメントのサンプルをコピーして編集すれば大丈夫です。しかし、Bootstrapの使い方を理解している必要があります。

Bootstrapの使い方が良く分からないという方は、こちらの講座がオススメです。

フロントエンドエンジニアになりたい人の Webプログラミング入門


About me
大手メーカのIT部門→上場ベンチャーでフルスタックエンジニアやってます。エンジニア歴は8年目。 サーバ、ネットワーク、セキュリティ、クラウドについて投稿します。 AI、ARも勉強中です! youtubeでも技術ネタを発信していきます。↓のアイコンよりご覧ください!

UdemyでIT講座をチェック!

  • セールだと1500円前後!
  • 無料サンプル講義動画・無料講義動画あり!
  • 気に入らなければ30日間返金保証!