Adding example CSF/MDX files and config would greatly help

[Sidnioulz]

Hey Chakir, hope you're doing well!

I'd like to suggest adding the following to the repo to get people started:

• if no .storybook/main.* found, a sample main.ts could be created, because it's hard to guess the framework path; example
• a MDX example could be created; example
• a CSF example could be created; example

I'd also suggest pre-installing addon-docs with a version matching the storybook package (as long as this repo needs to stick to 9.0.5). Anyone naively installing it will end up with 9.1.x, causing runtime errors before they could get a fresh install running.

Note that Storybook did not pick up @ or ~ import paths, so there may be something to do to make it aware of the TS config.

[tobiasdiez]

We have various examples at https://github.com/nuxt-modules/storybook/tree/main/examples. That should cover your second and third point, or not?

Concerning the automatic creation of the main file: is your suggestion to do this during the start of the nuxt dev process? I would suggest you just go with the storybook init install path, which will setup the main and preview file for you.

[Sidnioulz]

We have various examples at https://github.com/nuxt-modules/storybook/tree/main/examples. That should cover your second and third point, or not?

It does cover these points, but in my opinion, not as effectively.

When users run your command and can immediately get started with examples in their IDE:

• They don't need to notice the examples folder and explore it
• They don't need to copy and paste code from main and story files

Being able to immediately get started shifts the focus from "setting up Storybook" to "understand if Storybook provides value".

---

Concerning the automatic creation of the main file: is your suggestion to do this during the start of the nuxt dev process? I would suggest you just go with the storybook init install path, which will setup the main and preview file for you.

In this workflow, are you expecting that developers first have a Nuxt repo set up, then have Storybook installed, then run your own install command?

I believe that users who do this would give up on Storybook before installing the module, as it would appear to just not work.

The Storybook DX for officially supported frameworks is:

• we set up a few code examples in a separate folder that's easy to delete alongside Storybook
• we immediately run Storybook and you see the examples

This happens if the repo is well setup (you have a CRA / Vue / Svelte app running) or completely blank. The outcome is:

• Users know that Storybook works for their framework and see the immediate value proposition
• They have working examples they can copy to start documenting/testing their own components

As your command already installs and configures Storybook, I think it would make a lot of sense to get close to this DX. This could be as simple as setting up a folder with basic Vue components and stories, that you copy from a template.

Regarding main.ts, if I'm not mistaken, the framework field must be edited no matter what. So I think it also would make sense to write a basic main.ts if missing, or to edit main / tell users to edit main with the correct framework name.

This would then let you run Storybook directly and provide the same experience as we have for official frameworks. As we see a fair share of users who struggle to get Nuxt to run, the process is not intuitive for everyone. This could also improve the quality of the bug reports you get, as fewer users would experience, and this report, config issues.

[Sidnioulz]

If you have concerns around the feasibility of providing or maintaining a template and a main migration script, we could take a moment to walk through how it's done in Storybook. It's not usable from the outside right now, but if there are tools we already wrote that would help you on the framework side, we could chat about how to open them up. Feel free to come discuss that on our Discord :)

[tobiasdiez]

Now I understand, you want the examples being created for the user, not as an abstract docs.

The Storybook DX for officially supported frameworks is:

* we set up a few code examples in a separate folder that's easy to delete alongside Storybook

Mhh, that should already work if you use npx storybook@9.0.17 init in an existing nuxt project. In fact, https://github.com/nuxt-modules/storybook/tree/main/examples/starter was created like this and you do have an automatic genereted nuxt welcome story and a proper main.ts. Is this no longer working?

[Sidnioulz]

It should work if users both install Storybook and then your project. Your install instructions do not clarify that this should happen, so it's not so likely users go through that. (and it would immediately trigger the 9.0.5 - 9.1 version compat issues so it would likely result in a bricked install, wouldn't it?)

If you want users to first install Storybook, how about changing https://github.com/nuxt-modules/storybook?tab=readme-ov-file#installing to add something like:

Start by installing Storybook with `pnpm create storybook@latest`. Make sure to Select Vue as a framework.

Then, install the Nuxt framework on top of Storybook with `npx nuxi@latest module add storybook`.

Next, modify your nuxt.config (...) and your main.ts to replace `framework` with: '...'.

[tobiasdiez]

If one first creates the nuxt project (which also should be the most common setting) and then uses storybook init, it will correctly discover that it's a nuxt project and configures everything accordingly.

--

That being said, the readme is indeed outdated and should just link to https://storybook.nuxtjs.org/getting-started/setup (PR welcome!)

[Sidnioulz]

Gotcha. I don't know when I'd have time to pick that up as I'm about to go on annual leave, but for anyone willing to give this a go, please kindly note that storybook init is deprecated in favour of create and may be removed in the future. A doc update with create would likely expire less fast.