nx/docs/shared/recipes/storybook/plugin-vue.md

title	description
Set up Storybook for Vue and Nuxt Projects	This guide explains how to set up Storybook for Vue and Nuxt projects in your Nx workspace.

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.

{% callout type="warning" title="Set up Storybook in your workspace" %} You first need to set up Storybook for your Nx workspace, if you haven't already. You can read the Storybook plugin overview guide to get started. {% /callout %}

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:

{% tabs %} {% tab label="Vue" %}

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

{% /tab %} {% tab label="Nuxt" %}

nx g @nx/nuxt:storybook-configuration my-nuxt-app

{% /tab %}

{% /tabs %}

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:

{% tabs %} {% tab label="Vue" %}

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

{% /tab %} {% tab label="Nuxt" %}

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

{% /tab %}

{% /tabs %}

{% callout type="note" title="Example" %} 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:

<workspace name>/
├── apps/
├── libs/
│   ├── feature/
│   │   ├── ui/
|   |   |   ├── .storybook/
|   |   |   ├── src/
|   |   |   |   ├──lib
|   |   |   |   |   ├──my-button
|   |   |   |   |   |   ├── MyButton.vue
|   |   |   |   |   |   ├── MyButton.stories.ts
|   |   |   |   |   |   └── etc...
|   |   |   |   |   └── etc...
|   |   |   ├── README.md
|   |   |   ├── tsconfig.json
|   |   |   └── etc...
|   |   └── etc...
|   └── etc...
├── nx.json
├── package.json
├── README.md
└── etc...

{% /callout %}

More Documentation

You can find all Storybook-related Nx topics here.

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