Vue.js v3.x 以降でBootstrapを使う

14779 ワード
Vue.js JavaScript Bootstrap JavaScript テキストリンク

はじめに -Bootstrapを使ったら-

このような表を持つSPAを作りたくて
Vue.jsでtableを使ってみた。

person-list.vue
"""
子コンポーネント
"""
<template>
<div>
    <table class="table">
        <tr>
            <th>名前</th>
            <th>年齢</th>
            <th>出身地</th>
        </tr>
        <slot></slot>
    </table>
</div>
</template>
App.vue
"""
親コンポーネント
"""
<template>
<div>
<person-list>
  <tr v-for="person in persons" :key=person.Name>
    <td>{{person.Name}}</td>
    <td>{{person.Age}}</td>
    <td>{{person.From}}</td>
  </tr>
</person-list>
</div>
</template>

<script>
import personList from './components/person-list.vue'
export default {
  components: { 
    personList
    },
  data () {
    return {
      persons:[
        {
      Name: '佐藤蒼',
      Age: 19,
      From: '東京都'
        },
        {
          Name: '鈴木陽葵',
          Age: 22,
          From: '大阪府'
        }
      ]
    }
  }
}
</script>

tableタグそのままでは古い表なので
モダンな表にしようと、Bootstrapを使ってみよう。

Vue.jsでBootstrapを使ってみた

Vue CLIで上記表を出すVueプロジェクトを作成。
プロジェクトでBootstrapを適用させてみる。

今回試した環境は
OS:Windows10 Home
Vue:3.x (すみませんxの中身がわかりませんでした)
Vue CLI:4.5.11

下記の記事を参考に試した。
https://qiita.com/Mitsuzara/items/34d413698d1d88033ec0
https://qiita.com/kurararara/items/620dd4de798a941099f5
やったことは


  1. プロジェクトにvueをインストール

  2. main.jsにimport文を追加


1.は単純に
npm install bootstrap-vue

をプロジェクトで実行するだけ。

2.はmain.jsを開いて

import Vue from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.css' // add
import 'bootstrap-vue/dist/bootstrap-vue.css' // add
Vue.config.productionTip = false

を追加する。

これでBootstrapが適用されるはず。

Warning (Bootstrapが使えない)

npm run serveをやってみると

？！
export 'default' (imported as 'Vue') was not found in 'vue'
というエラーメッセージが出た。
ブラウザでWebアプリを確認すると

表が表示されてない...

原因

Vue.js のバージョンが3なのが原因と思われる。
(引用：https://melheaven.hatenadiary.jp/entry/vue-bug)
Bootstrap参考にしたサイトmain.jsと
自分のmain.jsが随分違うのに気付いた。

参考サイト

import Vue from 'vue'
import App from './App.vue'

/* ここから */
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
/* ここまで */

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

私のmain.js

main.js
import { createApp } from 'vue'
import Vue from 'vue'
import App from './App.vue'
import 'bootstrap/dist/css/bootstrap.css' // add
import 'bootstrap-vue/dist/bootstrap-vue.css' // add
Vue.config.productionTip = false

createApp(App).mount('#app')

参考サイトはVue 2.xだと思われるが
new Vueのところが createApp(App).mount('#app')
という風に、main.jsが随分変わっていた。

Vue v3でのBootstrap

index.htmlにCDNを追加

Vue3の変更点をよくわかっていないため、main.jsの書き換えは諦めた。
ではindex.htmlにBootstrapを使えば出来ないか？
と思い、publicの中にある「index.html」に
CDN経由でBootstrapを入れてみた。

public/index.html
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    """
　　ここにBootstrapのCDN linkを挿入
    ""
  <title>Person List</title>
  </head>
  <body>
    <h1>Person List</h1>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

これでrun serveしてみたら...

なんとBootstrapが適用されていた！
(tableのが微妙に違う気がするが...)

おわりに

index.htmlにCDN貼り付けで出来たとはいえ、応急処置感が半端ない(笑)
いずれ対応することに期待。

ちなみに今回はCDNしか試していません。
BootstrapのCSSファイルを直接ダウンロードして試した方がいらしましたら
是非とも教えてください。