Nuxt 3 support

[matheins]

Is your feature request related to a problem? Please describe.

Storybook Module isn't running when installing it as described in the docs.

Running npx nuxt storybook leads to:

Invalid command storybook
Usage: npx nuxi dev|build|generate|prepare|usage|info|init|create [args]

Describe the solution you'd like

Module should run as we know it from Nuxt 2

[PeteJStewart]

Is there any news or thoughts on this? I'd really love to use Storybook with Nuxt 3!

[kissu]

Did you tried it with the Nuxt3 setup or the Bridge one?

Do you mind submitting your findings here? https://isnuxt3ready.owln.ai/
This way, the community will have a faster and simpler way of spotting the actual status of some packages.

[matheins]

Did you tried it with the Nuxt3 setup or the Bridge one?

Do you mind submitting your findings here? https://isnuxt3ready.owln.ai/

This way, the community will have a faster and simpler way of spotting the actual status of some packages.

Tried it with Nuxt3 Setup

[Mikephii]

If anyone is running into this issue you can just use the vue3 storybook initializer. run npx sb init and then manually select vue3 as project type.

I got the storybook up and running with the default stories in my nuxt3 project created using the nuxt3 setup linked above.

unsure if theres any issues with doing this but atleast its running for me

[Rigo-m]

If anyone is running into this issue you can just use the vue3 storybook initializer. run npx sb init and then manually select vue3 as project type.

I got the storybook up and running with the default stories in my nuxt3 project created using the nuxt3 setup linked above.

unsure if theres any issues with doing this but atleast its running for me

Main issues is that it doesn't load up nuxt modules. So, e.g. you install formkit module, you don't have formkit components auto-loaded.
Also, vite config is different, therefore you need to manually pair up storybook-builder-vite configuration with nuxt vite config.

[Rigo-m]

@farnabaz @pi0 mind if I put my head into the migration to nuxt kit + vite support?

[tobiasdiez]

@Rigo-m did you already found the time to work on this?

[Rigo-m]

@Rigo-m did you already found the time to work on this?

I've started to look into it. I'll wrap my head around it this weekend

[Foddy]

Has anyone managed to set it up manually with Nuxt 3?

[Foddy]

Has anyone managed to set it up manually with Nuxt 3?

https://www.youtube.com/watch?v=IihqmCcqMaHo&ab_channel=productdevbook

@Foddy

This link is not working (private video?) 😖

[productdevbook]

Has anyone managed to set it up manually with Nuxt 3?

@Foddy https://www.youtube.com/watch?v=IihqmCcqMHo

[Rigo-m]

Has anyone managed to set it up manually with Nuxt 3?

@Foddy https://www.youtube.com/watch?v=IihqmCcqMHo

I've managed to set it up with the help of this video, although it feels really clunky. Because setting it up like this means that every plugin/module you add to nuxt has to be replicated in storybook configuration.

[louismorgner]

Excited to see a solution that properly works with the nuxt3 rc 🥳

[tobiasdiez]

@Rigo-m did you already found the time to work on this?

I've started to look into it. I'll wrap my head around it this weekend

As storybook is the last feature missing for my migration to nuxt3, I would be interested in working on this as well. If you are interested, we can collaborate on this.

[tobiasdiez]

The instructions outlined at #385 worked for me. Feedback welcome!

[edge-rps]

specify that the app is using Vue3 then it will work with Nuxt3, tested on codesandbox and can confirm it works. ✔
npx sb init --type vue3

[cdowning]

Any update on this? I would really love to use Storybook in Nuxt 3.

[Rigo-m]

Hi y'all. Hope you are having a great summer. I'll have time to work on this next week since I'll be on vacation from my main job.
While discussing with @danielroe this issue on histoire I've been told that there are some movements towards being able to mount components that makes use of the nuxt context (namely [this pr](nuxt/framework#5723, but maybe other PRs in the near future). I think we can start approaching the migration to nuxt3 once this is completed.

@tobiasdiez If it's okay for you, I'll hit you up on monday to coordinate on this subject

[kadumedim]

For anyone finding this thread, as of now :

• You can run a standalone Vite to run @storybook/vue3 (nuxtjs/storybook module doesn't work on nuxt3)
  But it wont work with nuxt 3 modules/components (NuxtLink for example)...

• There is some 'workaround' (pretty sketch tbh and looks like most of the times it doesn't work as it should) stated here

Waiting for updates on this module!

[riz007]

Any idea when a stable Nuxt 3 + Storybook version will be released? Waiting for this

[dargmuesli]

I'd recommend to check on the issues @Rigo-m kindly linked. Those are being waited for before work on this storybook module for Nuxt 3 compatibility continues.

[weo3dev]

@Rigo-m - I think I can speak for all of us by saying 'thank you' for your hard work, time and energy towards this specific ask from the community. Just to clarify: is it both the historie issue and the nuxt/framework ticket that are blockers for moving forward? Are these the kind of things where more helping hands would be appreciated or is it more a matter of time and energy? If there are some of us (I'm raising my hand here) who could offer valid help, I'd love to do so.

[tobiasdiez]

@Rigo-m, @kadumedim @weo3dev and anyone else willing to work on this.

Following the approach outlined at #385, I've a working prototype with nuxt3 support at https://github.com/JabRef/JabRefOnline. It is generally working and has CI in place verifying the storybook (using Chromatic). I agree that currently it as quite hacky, but I feel this mostly comes from me lacking the necessary knowledge to convert it to a functional nuxt module. So if you want to help, I would propose we use this prototype as a working platform and migrate the "hacks" to a proper module there. Some beginnings can be found at https://github.com/JabRef/JabRefOnline/blob/main/modules/storybook.ts. Once this is completed, we can then easily push these changes to the PR #385. What do you think?

[Didza]

The frustration of having more things breaking with the Vue 3 ecosystem is a mess. At this moment storybook is just not working with Nuxt Auto imports.

[50l3r]

I try to follow this steps: #385

But i recieve this error at starting nuxt:

[Vue Router warn]: uncaught error during route navigation:
TypeError: Cannot set properties of undefined (setting 'STORYBOOK_REACT_CLASSES')
    at Object.<anonymous> (X:\git\xxx\xxx-frontend\node_modules\@storybook\vue3\dist\cjs\client\preview\globals.js:8:38)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (X:\git\xxx\x-xxfrontend\node_modules\@storybook\vue3\dist\cjs\client\preview\index.js:18:1)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)

Does anyone have an idea that it may be happening?

I think the error occurs in the configure method at pages/_storybook/external-iframe.vue

storybook: 6.5.13
nuxt: 3.0.0-rc.13
@nuxtjs/storybook: 4.3.2

I use vite instead webpack

[NicklasDegnebolig]

Quite curious what´s the status of this one. has anyone gotten a working setup going?

[skattabrain]

Quite curious what´s the status of this one. has anyone gotten a working setup going?

Kind of a bummer, I love Storybook for creating components outside of the app, for me it's a superior way to work.

I'm not sure I agree with auto imports being a good idea to begin with, but it's a horrible trade-off in regards to SB. I wonder if future me is going to come back to projects wasting time wondering where things are coming from. Global mixins were gross.

I like explicit imports for their clarity. I'm always thinking about revisiting a project in 2 years when a client asks for improvements.

[tobiasdiez]

The current state is still #330 (comment), at least from my perspective. Summary: there is a hacky solution that uses the nuxt pipeline to render the stories. It works but requires a lot of manual setup. Help is needed to integrate the hacks into a workable module that people can just install.

[fkromer]

The current state is still #330 (comment), at least from my perspective. Summary: there is a hacky solution that uses the nuxt pipeline to render the stories. It works but requires a lot of manual setup. Help is needed to integrate the hacks into a workable module that people can just install.

@tobiasdiez Are those manual steps documented somewhere? Probably adding those steps to the docs would be some intermediate solution.

[tobiasdiez]

Yes, it is more or less outlined at #385. I'm also currently experimenting with Storybook v7 and rendering the stories using the new experimental component islands (JabRef/JabRefOnline#1726 and JabRef/JabRefOnline#1728). This simplifies the setup quite a bit, so hopefully it's a step towards a proper reusable nuxt module.

[bmulholland]

FYI, @danielroe is working on an approach over at https://github.com/danielroe/nuxt-vitest, and that may be another approach to the ones discussed above.

[OlaAlsaker]

FYI, @danielroe is working on an approach over at https://github.com/danielroe/nuxt-vitest, and that may be another approach to the ones discussed above.

@bmulholland , could you be more specific? What approach is he working on, and which files would be interesting to look at?

[bmulholland]

Sorry, I don't know. He just mentioned it to me in this context. I spoke with him via the Nuxt Discord. Maybe you could DM him there to ask?

[fkromer]

Probably the video How to setup Storybook + Nuxt 3 + Tailwind CSS + Vite ? could be helpful for you guys as well.

[fkromer]

And in case you want to use pnpm, Turborepo, Vite, Vue3, Nuxt3 and Storybook the vue-turbo-starter repo could be interesting. Actually there are some other template repos as well vite-vue-ts-storybook, etc.

[OlaAlsaker]

Probably the video How to setup Storybook + Nuxt 3 + Tailwind CSS + Vite ? could be helpful for you guys as well.

Nice find! Had a quick look, really interesting 😄

[intelli-devs]

Probably the video How to setup Storybook + Nuxt 3 + Tailwind CSS + Vite ? could be helpful for you guys as well.

maybe i did something wrong but this doesn't work for me

[alvinzjoe]

Probably the video How to setup Storybook + Nuxt 3 + Tailwind CSS + Vite ? could be helpful for you guys as well.

maybe i did something wrong but this doesn't work for me

Yep, same here, the auto import doesn't work

[algora-pbc]

💎 $500 bounty created by @drewbaker
👉 To claim this bounty, submit your pull request on Algora
📝 Before proceeding, please make sure you can receive payouts in your country
💵 Payment arrives in your account 2-5 days after the bounty is rewarded
💯 You keep 100% of the bounty award
🙏 Thank you for contributing to nuxt-community/storybook!

[kadumedim]

For anyone still waiting for the official nuxt module, check this instead: https://storybook.js.org/addons/storybook-addon-nuxt

An official module would be better? Yeah, somehow. But hey lets work with what we have.

[bmulholland]

I think that module is Vite only? Ideally I'd like something that supports Webpack so I don't have to add Webpack -> Vite to the already-long list of transitions and upgrades we have to make along with the Nuxt 3 upgrade.

[productdevbook]

Check zero config nuxt 3 support storybook https://github.com/storybook-vue/nuxt

[fkromer]

@productdevbook Would be cool to have Storybook support for Vue integration for Astro as well 🤩 Do you have this on your roadmap as well?

[g1ronn1mo]

I cant get the minimal repo running. I get:

ARN Failed to load preset: "@storybook-vue\\nuxt\\preset" ERR! C:\Users\benes\Scripts\nuxt3-starter\storybook-nuxt-demo\node_modules\.pnpm\@[email protected]_3o5s32hy4mernafgbee4wjphju\node_modules\@storybook-vue\nuxt\dist\preset.mjs:1 ERR! import { join } from 'path'; ERR! ^^^^^^ ERR!

Seems to be some module import issues. Also adding "type": "module" to the package.json did not work.

[iSatVeerSingh]

is this issue still unresolved? please tell me.

[danielroe]

This core storybook Nuxt 3 preset now exists: https://github.com/storybook-vue/nuxt.

[rishi-raj-jain]

@danielroe

Does this needs to be worked on then anymore? I see a $500 bounty on this. Seems like this is resolved?

[danielroe]

I believe this is resolved, yes. It needs to be confirmed by @drewbaker.

[drewbaker]

@rishi-raj-jain I think this is resolved in that there is a another module to use instead of this one. I'm not sure what to do with the bounty on this then? I'll remove it. If anyone actually did work on this new module because of the bounty please email me [email protected] and I'll pay you.

@danielroe I recommend this issue be closed.

[tobiasdiez]

@drewbaker If you haven't done this already, may I suggest you reach out to @chakAs3 who has worked on this new storybook addon, and continues now also to work on the nuxt module here. I think he would be happy to receive a little thank you for his work.