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

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

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

Cntlog

storybookにbootstrap-vueを適応した

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とかは更新が速いので、サイトの情報が追い付いていかないのかな？　サイトのサンプルをそのままコピペしても動かないときがよくあるから注意しなくては。