This guide will walk you through setting upStorybook for Vue and Nuxt projects in your Nx workspace.

You can generate Storybook configuration for an individual Vue or Nuxt project by using the@nx/vue:storybook-configuration generator, like this:

nxg@nx/vue:storybook-configurationproject-name

nxg@nx/nuxt:storybook-configurationmy-nuxt-app

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:

nxg@nx/vue:stories--project=<project-name>

nxg@nx/nuxt:stories--project=<project-name>

Let's take for a example a library in your workspace, underlibs/feature/ui, calledfeature-ui. This library contains a component, calledmy-button.

The command to generate stories for that library would be:

nxg@nx/vue:stories--project=feature-ui

and the result would be the following:

You can find all Storybook-related Nx topicshere.

For more on using Storybook, see theofficial Storybook documentation.