This guide will walk you through setting up Storybook for Vue and Nuxt projects in your Nx workspace.
Generate Storybook Configuration for a Vue or Nuxt project
Section titled “Generate Storybook Configuration for a Vue or Nuxt project”You can generate Storybook configuration for an individual Vue or Nuxt project by using the @nx/vue:storybook-configuration
generator, like this:
nx g @nx/vue:storybook-configuration project-name
nx g @nx/nuxt:storybook-configuration my-nuxt-app
Auto-generate Stories
Section titled “Auto-generate Stories”The @nx/vue:storybook-configuration
generator has the option to automatically generate *.stories.ts
files for each component declared in the library.
<some-folder>/├── MyComponent.vue└── MyComponent.stories.ts
If you add more components to your project, and want to generate stories for all your (new) components at any point, you can use the @nx/vue:stories
generator:
nx g @nx/vue:stories --project=<project-name>
nx g @nx/nuxt:stories --project=<project-name>
Example library
Section titled “Example library”Let's take for a example a library in your workspace, under libs/feature/ui
, called feature-ui
. This library contains a component, called my-button
.
The command to generate stories for that library would be:
nx g @nx/vue:stories --project=feature-ui
and the result would be the following:
Directoryworkspace name/
Directoryapps/
- …
Directorylibs/
Directoryfeature/
Directoryui/
Directory.storybook/
- …
Directorysrc/
Directorylib/
Directorymy-button/
- MyButton.vue
- MyButton.stories.ts
- etc...
- etc...
- README.md
- tsconfig.json
- etc...
- etc...
- nx.json
- package.json
- README.md
- etc...
More Documentation
Section titled “More Documentation”You can find all Storybook-related Nx topics here.
For more on using Storybook, see the official Storybook documentation.