CLI: Add support for Nuxt to project init #26884

tobiasdiez · 2024-04-19T10:13:30Z

What I did

Add support for nuxt projects when initializing a new project. This uses the nuxt module https://github.com/nuxt-modules/storybook and the underlying framework implementation https://github.com/storybook-vue/storybook-nuxt.

This module, as most nuxt modules, follows a "batteries included" approach and provides all necessary dependencies. In particular, storybook and the storybook-nuxt framework. Thus, a few changes needed to be done in the baseGenerator code to disable a few features for the nuxt integrtion.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
integration tests
end-to-end tests

Manual testing

Create a new project using npx nuxi@latest init followed by code\lib\cli\bin\index.js init.

Documentation

Add or update documentation reflecting your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

Checklist for Maintainers

When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli/src/sandbox-templates.ts
Make sure this PR contains one of the labels below:
Available labels
- bug: Internal changes that fixes incorrect behavior.
- maintenance: User-facing maintenance tasks.
- dependencies: Upgrading (sometimes downgrading) dependencies.
- build: Internal-facing build tooling & test updates. Will not show up in release changelog.
- cleanup: Minor cleanup style change. Will not show up in release changelog.
- documentation: Documentation only changes. Will not show up in release changelog.
- feature request: Introducing a new feature.
- BREAKING CHANGE: Changes that break compatibility in some way with current major version.
- other: Changes that don't fit in the above categories.

🦋 Canary release

This pull request has been released as version 0.0.0-pr-26884-sha-1ec720b9. Try it out in a new sandbox by running npx storybook@0.0.0-pr-26884-sha-1ec720b9 sandbox or in an existing project with npx storybook@0.0.0-pr-26884-sha-1ec720b9 upgrade.

More information


Published version	`0.0.0-pr-26884-sha-1ec720b9`
Triggered by	@kasperpeulen
Repository	tobiasdiez/storybook
Branch	`nuxt-generator`
Commit	`1ec720b9`
Datetime	Fri May 17 08:58:09 UTC 2024 (`1715936289`)
Workflow run	9125643910

To request a new release of this pull request, mention the @storybookjs/core team.

core team members can create a new canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=26884

nx-cloud · 2024-04-19T10:17:19Z

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 302f3c6. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

✅ Successfully ran 1 target

nx run-many -t build -c production --parallel=3

Sent with 💌 from NxCloud.

yannbf · 2024-04-29T13:18:28Z

Hey @tobiasdiez thanks for your contribution! Seems like a duplicate of #23663. I'll let you, @kasperpeulen and @chakAs3 discuss about it. Thanks!

kasperpeulen · 2024-04-29T15:20:13Z

Could you review this one @chakAs3 ?

tobiasdiez · 2024-04-30T04:31:39Z

Hey @tobiasdiez thanks for your contribution! Seems like a duplicate of #23663. I'll let you, @kasperpeulen and @chakAs3 discuss about it. Thanks!

Ohh, I was not aware of #23663. This would have made my life easier 🙈. It looks like my PR covers the same functionality and I had all the changes of #23663 except for the removal of nuxt from the unsupported template check. The latter I just pushed.

Btw, https://github.com/nuxt-modules/storybook/tree/main/examples/starter was generated using the code of this PR.

chakAs3 · 2024-04-30T15:50:05Z

Hey @tobiasdiez thanks for your contribution! Seems like a duplicate of #23663. I'll let you, @kasperpeulen and @chakAs3 discuss about it. Thanks!

Ohh, I was not aware of #23663. This would have made my life easier 🙈. It looks like my PR covers the same functionality and I had all the changes of #23663 except for the removal of nuxt from the unsupported template check. The latter I just pushed.

Btw, https://github.com/nuxt-modules/storybook/tree/main/examples/starter was generated using the code of this PR.

I've put in some work on it, but since there wasn't anyone available from the team to review it at the time, I decided to create a separate CLI called 'storybook-nuxt' to expedite the process and deliver something to Nuxt developers who have been waiting for it. ✌️

chakAs3

@shilman @yannbf , could it be a good moment to transition the namespace to @storybook/nuxt, making it an official implementation? A significant amount of effort has been invested since @tobiasdiez joined me in maintaining the module and preset.

I still advocate for keeping the framework preset @storybook/nuxt separate from the monorepo. This way, we can concentrate on Nuxt-specific features without being overly dependent on Storybook. The same approach could be applied to Next.js as well; extracting them from the monorepo might facilitate faster iterations and more focused developmen

tobiasdiez · 2024-05-13T07:13:52Z

@yannbf @kasperpeulen could you please review this PR? Thanks!

Then we can retire our own custom cli implementation https://github.com/storybook-vue/storybook-nuxt/tree/main/packages/storybook-nuxt-cli.

kasperpeulen · 2024-05-13T09:08:05Z

@tobiasdiez Sorry, just came back from holiday, will look at it today!

code/lib/cli/src/generators/NUXT/index.ts

code/lib/cli/src/generators/baseGenerator.ts

kasperpeulen

Added some type fixes, I have a couple of questions, and kicked off a canary so that I can do some e2e testing.

We plan to merge this into the 8.2 alpha branch after the 8.1 release Wednesday! And patch it back to 8.1 when we have some more feedback.

chakAs3 · 2024-05-14T11:39:32Z

Btw, https://github.com/nuxt-modules/storybook/tree/main/examples/starter was generated using the code of this PR.

i noticed that the .storybook generated files are .js instead of .ts, However the project is a typescript project ? there is issue with project type detection when it is Nuxt project i guess

kasperpeulen · 2024-05-15T12:32:21Z

@chakAs3 I think our logic is mainly checking if typescript is a (dev) dependency of the project.

tobiasdiez · 2024-05-17T08:12:02Z

@chakAs3 I think our logic is mainly checking if typescript is a (dev) dependency of the project.

Right, I've now added a bit of logic to check for the existence for tsconfig.json. This works well for nuxt. I don't know if there are any side-effects for other types of projects, but I guess you only have a tsconfig file if you really use ts.

kasperpeulen · 2024-05-17T08:59:24Z

@tobiasdiez Looks good to me. Will do some QA and then merge it.

kasperpeulen · 2024-05-21T10:03:35Z

@tobiasdiez I have the following error (used the pnpm option of nuxi):

npx storybook@0.0.0-pr-26884-sha-1ec720b9 init
╭────────────────────────────────────────────────────────────────────────────╮
│                                                                            │
│   Adding Storybook version 0.0.0-pr-26884-sha-1ec720b9 to your project..   │
│   This is a pre-release version.                                           │
│                                                                            │
╰────────────────────────────────────────────────────────────────────────────╯
 • Detecting project type. ✓
Installing dependencies...

Lockfile is up to date, resolution step is skipped
Already up to date

> nuxt-app@ postinstall /Users/kasperpeulen/code/storybook/nuxt-app
> nuxt prepare

✔ Types generated in .nuxt                                                                                                                                                                          12:01:25 PM
Done in 2.2s
 • Adding Storybook support to your "Nuxt" app
  ✔ Getting the correct version of 6 packages
  ✔ Installing Storybook dependencies
. ✓
Installing dependencies...

Lockfile is up to date, resolution step is skipped
Already up to date

> nuxt-app@ postinstall /Users/kasperpeulen/code/storybook/nuxt-app
> nuxt prepare


 ERROR  Cannot read properties of undefined (reading '__STORYBOOK__')                                                                                                                                12:01:39 PM

  at setup (node_modules/.pnpm/@nuxtjs+storybook@8.0.0_nuxt@3.11.2_prettier@3.2.5_react-dom@18.3.1_react@18.3.1_vite@5.2.11_vue@3.4.27/node_modules/@nuxtjs/storybook/dist/module.mjs:122:25)
  at normalizedModule (node_modules/.pnpm/@nuxt+kit@3.11.2/node_modules/@nuxt/kit/dist/index.mjs:2112:37)
  at async installModule (node_modules/.pnpm/@nuxt+kit@3.11.2/node_modules/@nuxt/kit/dist/index.mjs:2415:95)
  at async initNuxt (node_modules/.pnpm/nuxt@3.11.2_@opentelemetry+api@1.8.0_@unocss+reset@0.60.3_floating-vue@5.2.2_unocss@0.60.3_vite@5.2.11/node_modules/nuxt/dist/index.mjs:4233:7)
  at async loadNuxt (node_modules/.pnpm/nuxt@3.11.2_@opentelemetry+api@1.8.0_@unocss+reset@0.60.3_floating-vue@5.2.2_unocss@0.60.3_vite@5.2.11/node_modules/nuxt/dist/index.mjs:4331:5)
  at async loadNuxt (node_modules/.pnpm/@nuxt+kit@3.11.2/node_modules/@nuxt/kit/dist/index.mjs:2570:19)
  at async Object.run (node_modules/.pnpm/nuxi@3.11.1/node_modules/nuxi/dist/chunks/prepare.mjs:53:18)
  at async runCommand$1 (node_modules/.pnpm/nuxi@3.11.1/node_modules/nuxi/dist/shared/nuxi.9edf0930.mjs:1648:16)
  at async runCommand$1 (node_modules/.pnpm/nuxi@3.11.1/node_modules/nuxi/dist/shared/nuxi.9edf0930.mjs:1639:11)
  at async runMain$1 (node_modules/.pnpm/nuxi@3.11.1/node_modules/nuxi/dist/shared/nuxi.9edf0930.mjs:1777:7)



 ERROR  Cannot read properties of undefined (reading '__STORYBOOK__')                                                                                                                                12:01:39 PM

 ELIFECYCLE  Command failed with exit code 1.
An error occurred while installing dependencies.

attention => Storybook now collects completely anonymous telemetry regarding usage.
This information is used to shape Storybook's roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://storybook.js.org/telemetry

kasperpeulen · 2024-05-24T09:45:34Z

@tobiasdiez @chakAs3 Or do I do something wrong?

I just did:

npx nuxi@latest init
npx storybook@0.0.0-pr-26884-sha-1ec720b9 init

chakAs3 · 2024-05-29T07:19:44Z

npx nuxi@latest init
npx storybook@0.0.0-pr-26884-sha-1ec720b9 init

This should work as expected, but I haven't tested this PR myself. I don't see any issues. @tobiasdiez, did you have a chance to check it?

tobiasdiez · 2024-05-29T09:08:28Z

This looks like the bug nuxt-modules/storybook#538 that was already fixed in the main branch but isn't yet released (@chakAs3 feel free to prepare a new release whenever you have the time for it; I don't have any other urgent fixes planned in the near future)

AdamovichArtur · 2024-06-06T09:03:02Z

Any updates?

kasperpeulen · 2024-06-06T09:30:33Z

Will merge as soon as a new version of @nuxtjs/storybook is released with the fix.

chakAs3 · 2024-06-07T12:09:52Z

Will merge as soon as a new version of @nuxtjs/storybook is released with the fix.

Sorry for the delay it is released : https://github.com/nuxt-modules/storybook/releases/tag/v8.1.1

tobiasdiez · 2024-06-17T01:59:45Z

@kasperpeulen did you already found the time to try it out with the newest version?

# Conflicts: # code/lib/cli/src/detect.ts

kasperpeulen · 2024-06-20T09:10:28Z

@tobiasdiez Just fixed the merge conflicts, let's see if we can get CI green again.

kasperpeulen

Thanks @tobiasdiez and @chakAs3 !

ndelangen · 2024-06-25T07:50:50Z

code/lib/cli/src/generators/baseGenerator.ts

+    installStorybookPackage ? 'storybook' : undefined,
    getExternalFramework(rendererId) ? undefined : `@storybook/${rendererId}`,
-    ...frameworkPackages,
+    ...(installFrameworkPackages ? frameworkPackages : []),


@kasperpeulen I will need to roll-back this optional installation of the storybook package to ensure this #28310 works.

I'm going to just proceed, but I'd like to evaluate with you on what to do about this.

@tobiasdiez said that it works a bit different in the nuxt world

The setup with nuxt is a bit different. In the nuxt world, you normally install a so-called module. The task of the module is to interface with whatever external library is used under the hood, as well as shipping the library (i.e. it is declared as a dependency).

For example, the tailwind module for nuxt (https://github.com/nuxt-modules/tailwindcss) declares tailwindcss as a dependency (https://github.com/nuxt-modules/tailwindcss/blob/main/package.json#L56). Similarly, in the storybook module we already pull-in storybook as the dependency: https://github.com/nuxt-modules/storybook/blob/30cb7036f1bfc5bc50b11b6b7c3857bcf23886b6/package.json#L81 Thus users don't need to add the storybook packages themselves in their package.json.

Not sure how that would affect that in 8.2 storybook is required as a peer dep though. I guess we should test it to find out.

This shouldn't be a problem for us. The nuxt module can pull-in whatever top-level storybook dependency is appropriate. In fact, we do this already for the storybook package: https://github.com/nuxt-modules/storybook/blob/d1bd15a990851bbcee53822b09acd046a657fd22/packages/nuxt-module/package.json#L50

@ndelangen what issues do you expect?

yannbf assigned kasperpeulen Apr 29, 2024

yannbf added feature request cli nuxt ci:normal labels Apr 29, 2024

yannbf changed the title ~~CLI: Add support for nuxt to project init~~ CLI: Add support for Nuxt to project init Apr 29, 2024

kasperpeulen requested review from chakAs3 and larsrickert April 29, 2024 15:20

chakAs3 reviewed Apr 30, 2024

View reviewed changes

kasperpeulen reviewed May 13, 2024

View reviewed changes

code/lib/cli/src/generators/NUXT/index.ts Show resolved Hide resolved

kasperpeulen reviewed May 13, 2024

View reviewed changes

code/lib/cli/src/generators/baseGenerator.ts Show resolved Hide resolved

kasperpeulen reviewed May 13, 2024

View reviewed changes

tobiasdiez and others added 5 commits May 17, 2024 16:24

CLI: Add support for nuxt to project init

813deba

remove outdated test

ca1be65

Fix type issues

69ab8a5

feat: use tsconfig.json for ts detection

957266c

remove nuxt from unsupported template

1ec720b

tobiasdiez force-pushed the nuxt-generator branch from c9f63a4 to 1ec720b Compare May 17, 2024 08:26

kasperpeulen added the ci:daily Run the CI jobs that normally run in the daily job. label May 17, 2024

Merge branch 'next' into nuxt-generator

7d41152

Merge branch 'next' into nuxt-generator

ceb70b4

Merge branch 'next' into nuxt-generator

6a46daa

Merge branch 'next' into nuxt-generator

50a6409

Merge remote-tracking branch 'origin/next' into fork/nuxt-generator

302f3c6

# Conflicts: # code/lib/cli/src/detect.ts

kasperpeulen removed the ci:daily Run the CI jobs that normally run in the daily job. label Jun 20, 2024

kasperpeulen approved these changes Jun 24, 2024

View reviewed changes

kasperpeulen merged commit d0c3201 into storybookjs:next Jun 24, 2024
53 of 57 checks passed

github-actions bot mentioned this pull request Jun 24, 2024

Release: Prerelease beta 8.2.0-beta.0 #28319

Merged

58 tasks

ndelangen reviewed Jun 25, 2024

View reviewed changes

tobiasdiez deleted the nuxt-generator branch June 25, 2024 21:46

This was referenced Jun 26, 2024

docs: update installation instructions to use new Storybook CLI nuxt-modules/storybook#659

Draft

feat: load main and preview storybook config from nuxt config nuxt-modules/storybook#660

Draft

valentinpalkovic added needs qa Indicates that this needs manual QA during the upcoming minor/major release and removed needs qa Indicates that this needs manual QA during the upcoming minor/major release labels Jul 4, 2024

ndelangen mentioned this pull request Jul 8, 2024

CLI: Prebundle get-npm-tarball-url and @ndelangen/get-tarball #28481

Merged

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

CLI: Add support for Nuxt to project init #26884

CLI: Add support for Nuxt to project init #26884

tobiasdiez commented Apr 19, 2024 •

edited by storybook-bot

Loading

nx-cloud bot commented Apr 19, 2024 •

edited

Loading

yannbf commented Apr 29, 2024

kasperpeulen commented Apr 29, 2024

tobiasdiez commented Apr 30, 2024 •

edited

Loading

chakAs3 commented Apr 30, 2024 •

edited

Loading

chakAs3 left a comment •

edited

Loading

tobiasdiez commented May 13, 2024

kasperpeulen commented May 13, 2024

kasperpeulen left a comment •

edited

Loading

chakAs3 commented May 14, 2024 •

edited

Loading

kasperpeulen commented May 15, 2024

tobiasdiez commented May 17, 2024

kasperpeulen commented May 17, 2024

kasperpeulen commented May 21, 2024

kasperpeulen commented May 24, 2024

chakAs3 commented May 29, 2024

tobiasdiez commented May 29, 2024

AdamovichArtur commented Jun 6, 2024

kasperpeulen commented Jun 6, 2024

chakAs3 commented Jun 7, 2024 •

edited

Loading

tobiasdiez commented Jun 17, 2024

kasperpeulen commented Jun 20, 2024

kasperpeulen left a comment

ndelangen Jun 25, 2024

kasperpeulen Jun 25, 2024

tobiasdiez Jun 25, 2024

CLI: Add support for Nuxt to project init #26884

CLI: Add support for Nuxt to project init #26884

Conversation

tobiasdiez commented Apr 19, 2024 • edited by storybook-bot Loading

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

nx-cloud bot commented Apr 19, 2024 • edited Loading

☁️ Nx Cloud Report

yannbf commented Apr 29, 2024

kasperpeulen commented Apr 29, 2024

tobiasdiez commented Apr 30, 2024 • edited Loading

chakAs3 commented Apr 30, 2024 • edited Loading

chakAs3 left a comment • edited Loading

Choose a reason for hiding this comment

tobiasdiez commented May 13, 2024

kasperpeulen commented May 13, 2024

kasperpeulen left a comment • edited Loading

Choose a reason for hiding this comment

chakAs3 commented May 14, 2024 • edited Loading

kasperpeulen commented May 15, 2024

tobiasdiez commented May 17, 2024

kasperpeulen commented May 17, 2024

kasperpeulen commented May 21, 2024

kasperpeulen commented May 24, 2024

chakAs3 commented May 29, 2024

tobiasdiez commented May 29, 2024

AdamovichArtur commented Jun 6, 2024

kasperpeulen commented Jun 6, 2024

chakAs3 commented Jun 7, 2024 • edited Loading

tobiasdiez commented Jun 17, 2024

kasperpeulen commented Jun 20, 2024

kasperpeulen left a comment

Choose a reason for hiding this comment

ndelangen Jun 25, 2024

Choose a reason for hiding this comment

kasperpeulen Jun 25, 2024

Choose a reason for hiding this comment

tobiasdiez Jun 25, 2024

Choose a reason for hiding this comment

tobiasdiez commented Apr 19, 2024 •

edited by storybook-bot

Loading

nx-cloud bot commented Apr 19, 2024 •

edited

Loading

tobiasdiez commented Apr 30, 2024 •

edited

Loading

chakAs3 commented Apr 30, 2024 •

edited

Loading

chakAs3 left a comment •

edited

Loading

kasperpeulen left a comment •

edited

Loading

chakAs3 commented May 14, 2024 •

edited

Loading

chakAs3 commented Jun 7, 2024 •

edited

Loading