【Vue.js】Vue.jsでStorybookを使ってみた

概要

今回はVue.jsでStorybookを使用したサンプルです。

Storybookの説明やAngularでの適用例は以下の記事を参照して下さい。 kakkoyakakko2.hatenablog.com

実行環境

• Node.js - 12.x

使用ライブラリ

• vue - 2.6.x
• @storybook/vue - 5.3.x

サンプルソース

src\components\MyButton.vue

<template>
  <button>{{ label }}</button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    label: {
      type: String,
      default: 'button',
    },
  },
};
</script>

<style scoped>
button {
  background: yellow;
}
</style>

src/components/my-button.stories.js

import { CustomButtonComponent } from './custom-button.component';

export default {
  title: 'CustomButton',
};

export const Basic = () => ({
  component: CustomButtonComponent,
});

.storybook/main.js

• storybookの対象ファイルのファイルパスを指定します。

module.exports = {
  stories: ['../src/**/*.stories.[tj]s'],
};

実行

• start-storybook -p 8080 で実行できます。（-p 8080 はポート番号）
• http://localhost:8080/ にブラウザからアクセスすることで、Storybookの確認が出来ます。

サンプルソース一式

github.com

おわりに

• Angularと同様にVue.jsでも簡単にStorybookの適用が出来ました。
• Vue.jsの方がよりコンポーネント化を意識した設計になりやすいので、Storybookでコンポーネントのデザインを共有できることは便利です。