Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

結論

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

polarbear08
競技プログラマ エンジニア2年生
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away