BootstrapVueをStoryBookに対応させたけど、サイトとおりにやっても動かなかったので適当に対応させた話し

自分の会社のWebサイトをVue.jsの習得のために対応させています。いろいろ試してみて、コンポーネントのショーケースとしてStoryBookを入れてみました。使い慣れたBootStrapを使うためにBootstapVueをインストールしてみるとStoryBookでBootsrapが反映されなかった。

調べてみると、以下のようなサイトが見つかった。

Cntlog

storybookにbootstrap-vueを適応した | Cntlog

https://blog.cntlog.net/archives/4077

nuxt.jsを利用してる際にbootstrap-vueをインストールしたのですが、最初storybookには適応できていなかったので不思議に思い調べていました。原因は至ってシンプルなものでしたが、何度も同じミスを自分

このサイトに従って、.storybook/config.jsを追加したら、config.js と main.jsは共存できないとかのエラーになってStoryBookのサーバーが起動できなかった。

再度調べてみると、 .storybook/preview.jsに追加すればいいようなことを書いてあったのでやってみたら、今度はサーバーは起動できたけど、実行エラーになって動かない。エラーメッセージを眺めているとVueがないとか言っているので、以下のように書いてあげたら今度は上手く動いた。いい加減だけど、とりあえず動けばOKとしよう。

import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
Vue.use(BootstrapVue)
Vue.use(IconsPlugin)

Vue.jsとかは更新が速いので、サイトの情報が追い付いていかないのかな？　サイトのサンプルをそのままコピペしても動かないときがよくあるから注意しなくては。