Nuxt.jsの基礎勉強-Nuxt.jsでBootStrapを使ってみる-

はじめに

今回はNuxt.jsの基礎勉強としてBootStrapをNuxt.jsに組み込んでみた話についてまとめる。

初期設定

create-nuxt-appコマンドでアプリを作成した時の質問にてBootStrapの使用について聞かれるのでBootStrapを選んで進める。

$ npx create-nuxt-app アプリ名
~省略~
UI framework: 
Bootstrap

公式ドキュメント

BootStrapを使ってみる

Navbar | Components | BootstrapVueに沿ってnavbarを作ってみた。

components/navbar.vue

<template>
  <div>
    <b-navbar toggleable="lg" type="dark" variant="primary">
      <b-navbar-brand href="/output">
        KKZoo
      </b-navbar-brand>

      <b-navbar-toggle target="nav-collapse" />

      <b-collapse id="nav-collapse" is-nav> 
        <!--右揃えのナビゲーションアイテム--> 
        <b-navbar-nav class="ml-auto"> 
          <b-nav-item href="/output">
            TOP
          </b-nav-item> 
          <b-nav-item href="＃">
            Page1
          </b-nav-item> 
          <b-nav-item href="＃">
            Page2
          </b-nav-item>
        </b-navbar-nav> 
      </b-collapse> 
    </b-navbar>
  </div>
</template>

pages/output.vue

<template>
  <section>
    <navbar />
  </section>
</template>

<script>
import navbar from '~/components/navbar.vue'

export default {
    components: {
        navbar
    }      
}
</script>>

終わりに

今回はBootStrapをNuxt.jsにて使ってみたが、普通にHTMLに組み込む時と違ってclass名が少し変わっていることに注意が必要だなと感じた。