結論
.storybook/preview.js
に以下を記述します。
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
import '@mdi/font/css/materialdesignicons.css'
import Vue from 'vue'
Vue.use(Buefy)
前提
- Nuxt.js:v2.12.2
- Buefy:v0.8.20
- Storybook:v6.14.5
npx create-nuxt-app
のUIフレームワークの選択でBuefyを選び、Nuxt.jsプロジェクトを作成したものとします。
Storybookの導入
公式ガイドの通りセットアップします。プロジェクトのルートディレクトリで以下を実行します。
npx -p @storybook/cli sb init --type vue
以下のディレクトリ・ファイルが自動的にできます。
./
├── .storybook
│ ├── main.js
├── stories
│ ├── 0-Welcome.stories.js
│ ├── 1-Button.stories.js
│ ├── MyButton.js
│ └── Welcome.js
この時点で、 components
直下に以下のようなコンポーネントを作成します。特に意味のないコンポーネントですが、Buefyの b-input
を使っているところが重要です。
<template>
<b-input v-model="variable" />
</template>
<script>
export default {
name: 'MyComponent',
data() {
return {
variable: 0
}
}
}
</script>
stories/2-MyComponent.stories.js
を新規作成し、以下のように書きます。デフォルトで作成された他の2つの.stories.jsと同様に書いているので、一見正常に実行できそうな気がします。
import MyComponent from '../components/MyComponent'
export default {
title: 'MyStory',
component: {
MyComponent
}
}
export const Mytest = () => ({
components: { MyComponent },
template: '<my-component />'
})
しかし、厳しい現実に襲われます。npm run storybook
を実行し、localhost:6006にアクセスして該当ページを見ても何も表示されません。Chromeの開発者ツールのConsoleに、以下のようなエラーが出ます。
[Vue warn]: Unknown custom element: <b-input> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
<b-input>
がないよと怒られています。いやいやBuefy最初にいれたやんという気がしますが、どうもNuxtでimportされているものがStorybookでもimportされているとは限らないようです。
ちなみに *.stories.js
では import MyComponent from '@/components/Mycomponent'
もエラーになります。@がソースディレクトリを指していることを認識してくれません。StorybookはNuxtから独立したライフサイクルを持っているのでは?という気がしています。
さて、参考記事によると、Storybookの設定ファイルには3つ重要なものがあると書かれています。
- main.js
その名の通りメインの設定ファイルです。Storybookの生成を担当します。 - preview.js
Storybook全体で使いたいパラメータやコンポーネント等を指定します。 - manager.js
Storybook自体のUIをカスタマイズするために使います。あんまり使わないみたいです。
Buefyは全体で使いたいコンポーネントに相当するので、.storybook
ディレクトリに preview.js
を作成します。また、Buefyに加えてBuefyで使用するcssも読み込みます。(素晴らしい参考記事)
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
import '@mdi/font/css/materialdesignicons.css'
import Vue from 'vue'
Vue.use(Buefy)
実行してエラーが出る場合は、mdiのせいと思われるのでmdiをインストールします。
npm i @mdi/font
以上で、Storybook上で b-input
等Buefyのカスタムタグが表示されるようになります。
おわりに
- Nuxtで読み込んでいるものがそのままStorybookで使えるわけではない点
- グローバルに使いたいコンポーネント等の読み込みのために
preview.js
を作らなければならない点
以上2つが僕にとって初見殺しでした。同じようにハマった方の役に立てれば幸いです。
参考
Storybook for Vue(公式)
Declarative Storybook configuration
StorybookでBuefyのMaterial Design Iconsが表示されない