Storybook v6.2でVue3コンポーネントの開発環境を作る

Storybook v6.2でVue3のサポートがされる為された為、早速この開発環境を作ってみます。

追記:2021/03/31

当初はRC版をインストールする方法を書いていたのですが、記事を書き終えて数時間後にv6.2が正式にリリースされた様なので正式なv6.2のインストール方法に書き換えました。(タイトルも変更しました。)

前提

Storybook v6.2は記事執筆時点(2021/03/30)でRC版(v13)です。

開発環境

• npm:6.14.8
• node:12.20.0
• yarn:1.22.10
• Vue-cli:4.5.11

参考

Storybook for Vue 3
Vue: Add Vue3 support #10654

@storybook/vue3のインストール

@storybook/vueではなく、@storybook/vue3をインストールします。

yarn add --dev @storybook/vue3

アドオンのインストール

addon-notesのみ、リリースバージョンが5.3.21になっています。
v6系はalpha版になっているのでバージョンを指定します。

yarn add --dev @storybook/addon-knobs @storybook/addon-notes@6.0.0-alpha.6 @storybook/addon-a11y @storybook/addon-essentials @storybook/source-loader

vue-loader@nextのインストール

v16以上をインストールする必要があります。
リリース済みの最新版はv15の為、@nextを指定します。

yarn add vue-loader@next

　各種ローダーのインストール

$ yarn add --dev ts-loader style-loader sass-resources-loader

　scriptsの設定

package.jsonのscriptsに、下記の設定を追記します。

"storybook": "start-storybook -p 9100",

.storybookディレクトリ内のファイルの設定

main.js(ts)とwebpack.config.jsの使い方はv6.0の時から大きな変更は無さそうです。

追記:2021/04/01

この設定無しで動かしてみたところ、正常に動いていた為この設定は必要では無さそうです。

githubのReadMeを見る限り、preview.js(ts)では下記の様に各コンポーネントやプラグインを別途設定する必要があるそうです。

import { app } from '@storybook/vue3';
import HelloWorld from "../src/components/HelloWorld.vue";

// app.use(My Plugin)
app.component('my-component', HelloWorld)
// app.mixin({ /* My mixin */ })

試しにstoryファイルを1つ作成して動かす

HelloWorld.vueコンポーネントの為の下記の様なstoryファイルを作成して動かすと、添付の様にVue3のコンポーネントをStorybook上で検証する事が出来ます。

/* eslint-disable @typescript-eslint/no-var-requires */
import { text } from "@storybook/addon-knobs";
import HelloWorld from "../components/HelloWorld.vue";
const textData = require('./notes/sample.md')
const markdown = textData.default

// コンポーネントのメタデータを記述
export default {
  title: "Test/HelloTest",
  parameters: {
    layout: "centered",
    docs: {
      extractComponentDescription: (component: any, { notes }: any) => {
        if (notes) {
          return notes.markdown;
        }
        return null;
      }
    },
    notes: { markdown }
  }
};

export const HelloTest = () => ({
  components: { HelloWorld },
  template: `
    <div>
      <HelloWorld :msg="msg" />
    </div>
  `,
  props: {
    msg: {
      type: String,
      default: text("msg", "default text")
    }
  },
  data() {
    return {};
  },
  methods: {}
});

$ yarn storybook

以上です。
これからどんどんStorybookでVue3のコンポーネントの開発・検証を進める事が出来そうです！