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 ceb70b4. 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

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

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

nx-cloud bot commented Apr 19, 2024 •

edited

yannbf commented Apr 29, 2024

kasperpeulen commented Apr 29, 2024

tobiasdiez commented Apr 30, 2024 •

edited

chakAs3 commented Apr 30, 2024 •

edited

chakAs3 left a comment •

edited

tobiasdiez commented May 13, 2024

kasperpeulen commented May 13, 2024

kasperpeulen left a comment •

edited

chakAs3 commented May 14, 2024 •

edited

kasperpeulen commented May 15, 2024

tobiasdiez commented May 17, 2024

kasperpeulen commented May 17, 2024

kasperpeulen commented May 21, 2024

CLI: Add support for Nuxt to project init #26884

Are you sure you want to change the base?

CLI: Add support for Nuxt to project init #26884

Conversation

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

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

☁️ Nx Cloud Report

yannbf commented Apr 29, 2024

kasperpeulen commented Apr 29, 2024

tobiasdiez commented Apr 30, 2024 • edited

chakAs3 commented Apr 30, 2024 • edited

chakAs3 left a comment • edited

Choose a reason for hiding this comment

tobiasdiez commented May 13, 2024

kasperpeulen commented May 13, 2024

kasperpeulen left a comment • edited

Choose a reason for hiding this comment

chakAs3 commented May 14, 2024 • edited

kasperpeulen commented May 15, 2024

tobiasdiez commented May 17, 2024

kasperpeulen commented May 17, 2024

kasperpeulen commented May 21, 2024

tobiasdiez commented Apr 19, 2024 •

edited by storybook-bot

nx-cloud bot commented Apr 19, 2024 •

edited

tobiasdiez commented Apr 30, 2024 •

edited

chakAs3 commented Apr 30, 2024 •

edited

chakAs3 left a comment •

edited

kasperpeulen left a comment •

edited

chakAs3 commented May 14, 2024 •

edited