Skip to content
Nx Docs

Set up Storybook for Vue and Nuxt Projects

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:

Terminal window
nx g @nx/vue:storybook-configuration project-name

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:

Terminal window
nx g @nx/vue:stories --project=<project-name>

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.