#Nuxt #Storybook ## プロジェクト作成 ```console npx nuxi init nuxt3-storybook-use cd nuxt3-storybook-use npm i npm i -D prettier ``` 動作確認。 ```console npm run dev -- -o ``` `localhost:3000`にアクセスして表示されればOK。 ## [[nuxt storybook]]のインストール https://storybook.nuxtjs.org/getting-started/installation ```console npm install --save-dev @nuxtjs/storybook ``` .[[gitignore]]に追加。 ```txt .nuxt-storybook storybook-static ``` ## Storyの追加 https://storybook.nuxtjs.org/getting-started/usage まずはコンポーネントを`components/Hello.vue`として作成。 ```html <template> <div>Hello</div> </template> ``` `components/Hello.stories.js`を作成。 ```js export default { title: "Hello", }; export const NuxtWebsite = () => "<Hello />"; ``` ## [[Storybook]]の起動 ```console npx nuxt storybook ``` エラーが出る。 ``` Invalid command storybook Usage: npx nuxi dev|build|preview|start|analyze|generate|prepare|typecheck|usage|info|init|create|upgrade|test|add|new [args] 23:09:18 Use npx nuxi [command] --help to see help for each [[CLI]] ``` https://github.com/nuxt-community/storybook/issues/330#issuecomment-1115307063 を試してみる。 ```console npx sb init --type vue3 ``` 余計カオスになったので無理だ...。と思ったらこれが原因ぽい。 <div class="link-card"> <div class="link-card-header"> <img src="https://github.githubassets.com/favicons/favicon.svg" class="link-card-site-icon"/> <span class="link-card-site-name">GitHub</span> </div> <div class="link-card-body"> <div class="link-card-content"> <div> <p class="link-card-title">Can't start project with windows backslash paths as configPath · Issue #18226 · storybookjs/storybook</p> </div> <div class="link-card-description"> Describe the bug Backslashes () are used by windows for paths instead of forward slashes (/) used in... </div> </div> <img src="https://opengraph.githubassets.com/fbac109471789a9c713c69ccb830186bb089a433f64a2cd87db0229d7592eea6/storybookjs/storybook/issues/18226" class="link-card-image" /> </div> <a href="https://github.com/storybookjs/storybook/issues/18226"></a> </div> ==詰んだ==