BootstrapVueを動かす

NuxtでBootstapVueを入れて、動かしてみた。

公式のサイトに情報はあるけど、前置きが長いのね。

冒頭にインストール方法とサンプルコードがあるのが個人的にはうれしいのだけどね。

https://bootstrap-vue.org/docs

ということで、後で再度同じことを行うときに、長い前置きを読まなくてよくするために備忘録を残しておく。

まず、BootstrapVueの設定。（yarnを使っている。BootstrapVueを追加する。）

yarn add bootstrap-vue

そんで、サンプルコード。

index.vueにコーディングする。（こちらのサイトの内容そのまま https://bootstrap-vue.org/docs/components/table）

これで、動きましたよ、と。

<template>
  <div>
    <b-table :items="items" hover="" striped=""></b-table>
  </div>
</template>
 
 
<script>
  export default {
    data() {
      return {
        items: [
          { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
          { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
          { age: 89, first_name: 'Geneva', last_name: 'Wilson' },
          { age: 38, first_name: 'Jami', last_name: 'Carney' }
        ]
      }
    }
  }
</script>