Vue3 x Vuetify3のPJにStorybook7を入れる #Vue.js

はじめに

とあるVue3 x Vuetify3のPJにおいて、コンポーネントの手動管理が手間だったのでStorybook7を導入した。
その際、VuetifyをStorybook上で表示する設定について、情報が少なかったため、導入の過程をここにメモ。

環境情報

$ npm list vue
└─ vue@3.3.4

$ npm list vuetify
└─ vuetify@3.3.5

$ npm list storybook
└─ storybook@7.0.22

手順

環境の作成

Vue3とVuetify3の初期PJを作成。

$ npm create vuetify

Storybook7をインストール。

$ npx storybook@latest init

Storybookの設定

ここからはStorybook上でVuetifyコンポーネントを表示する設定を行う。

まず、Storybook側でVuetifyを読み込む。

preview.ts (抜粋)

setup((app) => {
  // regsiterPluginsはnpm create vuetify`で作成される関数で、
  // webfont、Vuetifyを読み込んでいる。
  registerPlugins(app);
});

次に、decoratorを用意する。

withVuetifyTheme.decorator.ts

import { VApp } from "vuetify/components";
import { Decorator, StoryContext } from "@storybook/vue3";

export const withVuetifyTheme: Decorator = (story, context) => {
  return {
    components: { story, VApp },
    // それぞれのstoryをv-appタグでラップ
    template: `
      <v-app>
          <story/>
      </v-app>
    `,
  };
};

preview.tsでdecoratorを登録。

preview.ts (抜粋)

const preview: Preview = {
  ... // 省略
  decorators: [withVuetifyTheme], // 追加
};

storybookを起動。

$ npm run storybook

下記のように、Vuetifyのコンポーネントが表示されたら成功。

【オプション】 Storybook上でThemeを可変にする。

PJによってはダークモード実装などで、VuetifyのThemeを使用する場合がある。
その際、decoratorのv-appタグにthemeを設定すれば変更できるが、いちいちdecoratorを書き換えるのは面倒、、、

そこでStorybookのToolbars & globalsを使用することで、ThemeをUIから可変にできる。

まずは、Storybookの設定にTheme用のtoolbarとglobalsを追加

preview.ts (抜粋)

const preview: Preview = {
  ... // 省略
  globalTypes: {
    theme: {
      name: "Theme",
      description: "Global theme for components",
      defaultValue: DEFAULT_THEME,
      toolbar: {
        icon: "paintbrush",
        // tool barに表示されるitemの詳細
        items: [
          { value: "light", title: "Light", left: "🌞" },
          { value: "dark", title: "Dark", left: "🌛" },
        ],
        // 選択した値に基づいてtool bar上の表示を変更
        dynamicTitle: true,
      },
    },
  },
};

先程追加したdecoratorで選択したThemeを読ませる。

withVuetifyTheme.decorator.ts

import { VApp } from "vuetify/components";
import { Decorator, StoryContext } from "@storybook/vue3";

export const DEFAULT_THEME = "light";

export const withVuetifyTheme: Decorator = (story, context) => {
  // Themeが未設定の場合、lightにする
  const globalTheme = context.globals.theme || DEFAULT_THEME;
  return {
    components: { story, VApp },
    // VuetifyにThemeを設定する
    template: `
      <v-app theme="${globalTheme}">
        <story/>
      </v-app>
    `,
  };
};

Storybook UI上部からThemeを選択し、ブラウザをリロード。

公式の説明によると、globalsを変更すれば再レンダリングされるとあるが、当方の環境ではブラウザをリロードしないとThemeの変更が反映されなかった。
この事象については、公式にissueが立っており、まだ対応されていない模様。

まとめ

今回はVue3 x Vuetify3のPJにStorybook7を導入した。
初期の設定は多少面倒でも、コンポーネント単位での開発効率は劇的に上がったので、ぜひ導入を検討してほしい。

またサンプルコードはGitHubにpushしてあるので、詳細はこれを参照されたし。

参考

宣伝

この記事は下記のイベントに合わせて執筆されたものです。

いいねをください。