feat: start storybook in same process as dev server

[tobiasdiez]

Instead of invoking the storybook cli, we now start the storybook dev server in the same process as the nuxt dev server.
This has the advantage that we don't need to spawn a second nuxt instance, improving preformance and reducing complexifty.

Fixes storybook-vue/storybook-nuxt#59 and fixes #610 and fixes #635 and fixes #475.

[netlify]

👷 Deploy request for nuxt-storybook pending review.

Visit the deploys page to approve it

Name	Link
🔨 Latest commit	20f56ad

[blowsie]

This looks awesome! and essential for me to continue using the plugin 😄

[mehcode]

Super excited to see this work. Is there something blocking this that needs help resolving? Looking to find somewhere to contribute if I can.

[tobiasdiez]

@mehcode Thanks for the offer. In it's current state of this PR, if you run pnpm dev and look at the browser dev console, you see errors that iframe.html?.... is not found. It seems to be that the wrong dev server is called (the nuxt server, not the storybook one). If you have a bit of spare time, you could try to figure out why the wrong address is used for this call.

[mehcode]

I'll take a look.

[mehcode]

@tobiasdiez When I run this branch (after rebasing to main) it appears to work. I do get a couple of errors logged in the console, but things seem to be working.

Uncaught (in promise) FetchError: [GET] "/_nuxt/builds/meta/dev.json": 404 Not Found
    at async $fetch22 (ofetch.js?v=a16ba4e7:275:15)

chunk-R4CAHNZ3.js?v=a16ba4e7:521 Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>.

[mehcode]

The validateDOMNesting issue seems to be pre-existing and only for the configure mdx page.

The other error goes away if you uncomment the preview proxies.

[tobiasdiez]

Thanks a lot for having a look. It is indeed working now (very rarely I still got an "iframe" not found error in the console but everything seemed to work fine...so who cares ;-) )

[blowsie]

Today I updated storybook and nuxt storybook, could this change be related?

nitro] √ You can preview this build using node .output/server/index.mjs
╭─────────────────────────────────────────────────────╮
│ │
│ Storybook 8.1.9 for @storybook-vue/nuxt started │
│ 1.81 s for manager and 23 s for preview │
│ │
│ Local: http://localhost:3010/ │
│ On your network: http://10.33.1.242:3010/ │
│ │
╰─────────────────────────────────────────────────────╯
X [ERROR] The entry point "vue" cannot be marked as external

D:\Projects\Scratch\NuxtOenUi\node_modules.pnpm@[email protected][email protected][email protected]\node_modules@storybook\cli\bin\index.js:23
throw error;
^

Error: Build failed with 1 error:
error: The entry point "vue" cannot be marked as external
at failureErrorWithLog (D:\Projects\Scratch\NuxtOenUi\node_modules.pnpm\[email protected]\node_modules\esbuild\lib\main.js:1472:15)
at D:\Projects\Scratch\NuxtOenUi\node_modules.pnpm\[email protected]\node_modules\esbuild\lib\main.js:945:25
at D:\Projects\Scratch\NuxtOenUi\node_modules.pnpm\[email protected]\node_modules\esbuild\lib\main.js:1353:9
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
errors: [Getter/Setter],
warnings: [Getter/Setter]
}

Node.js v21.7.1

[blowsie]

Can be tracked here
#656