LoginSignup
3

More than 3 years have passed since last update.

Nuxt.js + Buefy に Storybookを導入する

Last updated at Posted at 2020-06-25

結論

.storybook/preview.js に以下を記述します。

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 を使っているところが重要です。

MyComponent.vue
<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と同様に書いているので、一見正常に実行できそうな気がします。

2-MyComponent.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も読み込みます。(素晴らしい参考記事)

previes.js
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が表示されない

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3