個人開発でVue.jsとVuetifyを使っており、Storybookを導入したいと考えました。
その手順を備忘録としてまとめます。
バージョン
- vue 3.4.21
- vuetify 3.5.13
- storybook 8.0.5
記事の信頼性
- ぼくは独学で未経験から従業員300名以上の自社開発企業へ転職しました。
- 実務ではVue.jsとRailsを毎日書いています。
- 初心者や駆け出しエンジニアがつまづくポイントも身をもってよく理解しています。
目次
問題
Vue.jsとVuetifyを使ってTODOアプリを作っていました。
キャッチアップのためStorybookを導入してみようと思いインストールしたんですが、VuetifyのコンポーネントをStorybook上で表示させることができず、ハマってしまいました、、。
解決方法
まずはぼくのケースでVuetifyがどのようにインストールしたかを確認します。
npm i vuetifyでVuetifyをインストール後、vue-app/src/pluginsディレクトリを作成し、その中にvuetify.tsファイルを追加しました。
import 'vuetify/styles';
import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';
export default createVuetify({
components,
directives
});
そしてvue-app/src/main.tsにVuetifyに関する記述を追加すれば完了です。
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import App from './App.vue';
import router from './router';
import vuetify from './plugins/vuetify'; // 追加
const app = createApp(App);
app.use(createPinia());
app.use(router);
app.use(vuetify); // 追加
app.mount('#app');
次にnpx storybook@latest initでStorybookをインストールします。
この状態でnpm run storybookを実行すればStorybook自体は立ち上がるんですが、これだとまだVuetifyのコンポーネントはStorybook上で表示できません。
なので以下の2ファイルをvue-app/.storybookディレクトリの配下に作成してください。
- StoryWrapper.vue
- withVuetifyTheme.decorator.ts
それぞれ中身は↓です。
<template>
<v-app>
<v-main>
<slot name="story" />
</v-main>
</v-app>
</template>
import { h } from 'vue';
import StoryWrapper from './StoryWrapper.vue';
export const withVuetifyTheme = (storyFn, context) => {
const story = storyFn();
return () => {
return h(
StoryWrapper,
{},
{
story: () => h(story, { ...context.args }),
}
);
};
};
最後にvue-app/.storybook/preview.tsに記述を加えます。
import type { Preview } from '@storybook/vue3'
import { setup } from '@storybook/vue3';
import { withVuetifyTheme } from './withVuetifyTheme.decorator';
import vuetify from '@/plugins/vuetify'
// 追加
setup((app) => {
app.use(vuetify)
});
const preview: Preview = {
parameters: {
decorators: { withVuetifyTheme }, // 追加
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i
}
}
}
}
export default preview
これでnpm run storybookを実行すると、VuetifyのコンポーネントがStorybook上でも綺麗に表示されるようになります。
おわりに
Storybookにはさまざまな機能があるので、今後も色々と試していきたいです。
コメント