Skip to content

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

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>

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

You can find all Storybook-related Nx topics here.

For more on using Storybook, see the official Storybook documentation.