SoFunction
Updated on 2025-04-05

Storybook 7.0 Beta Vue3 Strike to Solve Records

Story background

based onVue + Vite + TSCombinedpnpmOne ofmonorepoThe project's component library documentation was written. At first, I was more inclined to use the family bucket series directly.VitePress. Unfortunately, other library documents in the company are usedStorybook, and has been upgraded to the latest version.

Well, I basically know what I want to do here.

Since I had never been exposed to this thing before, I went to watch the official website and operated it step by step. The pit is here. Who knows that the version has been launched, but the documentation has not made corresponding adjustments. Then there are a series of subsequent problems.Storybook 7.0 Download

Trick 1:

Don't follow the official website's download instructions step by step, because you will eventually download the 6.5 stable version

# Incorrect installation methodnpx storybook init
npx sb init
# Correct installation methodnpx storybook@next init 
npx sb@next init

Pit 2:

Don't look upviteThe way to create a project is used, using some unknown commands.StorybookThe corresponding scaffolding will be created based on your project technology stack

# Error commandnpx sb init --builder @storybook/builder-vite
npx storybook init --builder vite

Trick 3:

Don't do it in the 7.0 versionmonorepoThe project is created unless it is in the root directory

 ERR_PNPM_ADDING_TO_ROOT  Running this command will add the dependency to the workspace root, which might not be what you want - if you really meant it, make it explicit by running this command again with the -w flag (or --workspace-root). If you don't want to see this warning anymore, you may set the ignore-workspace-root-check setting to true.
An error occurred while installing dependencies.
 ERROR  Command failed with exit code 1: /Users/a1234/Library/pnpm/store/v3/tmp/dlx-36847/node_modules/.bin/storybook init --package-manager=pnpm

so My solution is to create aviteand then de-initialize the project in this projectStorybookThen add the relevant commands, folders anddevDependenciesAll related packages incvRe-download the dependency in the corresponding subproject and use it.

The specific operations are as follows:

  • pnpm create vite myApp --template vue-tscreateviteproject, then install dependencies.
  • pnpx storybook@next init --package-manager=pnpm
  • WillChinese AboutStorybookThe content ofcv,includescriptsTwo instructions indevDependenciesSome packages in the project, two directories in the project.
  • Copy to the correspondingmonorepoIn the subproject, delete the original subprojectnode_modeulesRe-executepnpm installJust do it.

Notice:

  • Don't try--type vue3A similar instruction creates the corresponding project, and it is likely that it will not succeed.
  • StorybookUsed by defaultyarnAs a package management tool, if you want to switch to execute instructions, add at the end--package-manager=pnpm

Summarize

At present, after the above series of explorations, there is no problem with local testing and packaging, so it depends on the subsequent deployment. If you encounter other problems during use, you will continue to update here.

The above is the detailed content of the essay on Storybook 7.0 Beta Vue3. For more information about Storybook 7.0 Beta Vue3, please follow my other related articles!