Open9
Nuxt3環境にStorybook@v7.xを導入する
GANGAN達成したいゴール
- Nuxt3環境にStorybookを導入する
- Nuxt3のAuto Importsに対応させる
合わせて行いたいこと
- Histoireとの比較を行う
実験しているリポジトリ
GANGANStorybook公式のNuxtプラグイン
追加してみる
terminal
npx sb init --type vue3 --builder vite
公式docsにか以下で書いてあったけど、どっちも同じものがインストールされそう
terminal
npx storybook@latest init --type vue3 --builder vite
TBD: ファイル構成後から追記する
GANGAN下記を参考にStory作成してみる。
/components/HelloWorld.vue
<script setup lang="ts">
const count = ref(0);
</script>
<template>
<div style="text-align: center; color: #2c3e50">
<button @click="count--">-</button>
<span>{{ count }}</span>
<button @click="count++">+</button>
</div>
</template>
import HelloWorld from "./HelloWorld.vue";
export default {
title: "HelloWorld",
component: HelloWorld,
};
export const Default = {
render: () => ({
components: { HelloWorld },
template: "<HelloWorld />",
}),
};
import { ref } from 'vue'を追加しないと動かない？
ref()のimportを追加してみる
追加したら上手くいった
Storybookの公式GitHub見る感じ、アドオン入れたら上手くいくらしいが。。。今の所上手く行ってない
GANGAN
原因：storybook-addon-nuxt側の問題っぽい
アドオンにIssue立ってた。ただ2ヶ月くらいリポジトリの更新がなさそう。
以下で解決。
node_modules/storybook-addon-nuxt/package.json
{
+ "type": "module"
}
先月のPRもマージされてないっぽい
GANGANjqでとりあえず応急処置
terminal
mv node_modules/storybook-addon-nuxt/package.json node_modules/storybook-addon-nuxt/_package.json \
&& cat node_modules/storybook-addon-nuxt/_package.json | jq '.type = "module"' > node_modules/storybook-addon-nuxt/package.json \
&& rm -f node_modules/storybook-addon-nuxt/_package.json
参考
- 合わせて読む
GANGANStorybookでPiniaを使う
関連記事は全て以下の通りだった。
.storybook/preview.ts
import { app } from '@storybook/vue3';
app.use(createPinia());
しかし、appは存在してないよーって怒られる。今はこっちみたい
.storybook/preview.ts
import { setup, type Preview } from "@storybook/vue3";
import { createPinia } from "pinia";
import { type App } from "vue";
const pinia = createPinia();
setup((app: App) => {
app.use(pinia);
});
const preview: Preview = {
...
};
export default preview;
実際にPinia動かしてみた。ダメだった。↓これっぽいな
GANGANstorybook-addon-nuxtをインストール済みの場合、setup()削除でエラーは消える。
.storybook/preview.ts
- setup((app: App) => {
- app.use(pinia);
- });
setup is not defined
ReferenceError: setup is not defined
at http://localhost:6006/.storybook/preview.ts?t=1692000441619:3:1
ただ、setup()してないので自作したuseXXXStore()は利用できず。