#Nuxt #Storybook
## プロジェクト作成
```console
npx nuxi init nuxt3-storybook-use
cd nuxt3-storybook-use
npm i
npm i -D prettier
# storybookの初期化
npx sb init --type vue3
```
起動してみるもエラー。
```console
$ npm run storybook
ERR! Error: No configuration files have been found in your configDir (C:\Users\tadashi-aikawa\git\github.com\tadashi-aikawa\nuxt3-storybook-use\.storybook).
ERR! Storybook needs either a "main" or "config" file.
ERR! at validateConfigurationFiles (C:\Users\tadashi-aikawa\git\github.com\tadashi-aikawa\nuxt3-storybook-use\node_modules\@storybook\core-common\dist\cjs\utils\validate-configuration-files.js:50:11)
```
configファイルがないと怒られる... ちゃんとあるんだけどな...。
```console
$ ls .\.storybook\
main.js preview.js
```
## [[@storybook builder-vite]]をインストール
```console
npm i -D @storybook/builder-vite
```
`.storybook/main.js`に追加。
```diff
module.exports = {
"stories": [
"../stories/**/*.stories.mdx",
"../stories/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials"
],
- "framework": "@storybook/vue3"
+ "framework": "@storybook/vue3",
+ "core": {
+ "builder": "@storybook/builder-vite",
+ },
}
```
さっきと同じエラーが出る。。。と思ったらバグみたい。
<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>
==詰んだ==