Set up Storybook for Nuxt Projects

This guide will walk you through setting up Storybook for Nuxt projects in your Nx workspace.

The generators for your Nuxt projects use the @nx/vue:storybook-configuration and @nx/vue:stories generators under the hood, with some additional configuration. There is no official support or settings for Nuxt3 in Storybook yet, so until then we are just configuring your Nuxt apps as if they were Vue apps, since the components are still Vue components.

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.

Generate Storybook Configuration for a Nuxt project

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

❯

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

Nx 15 and lower use @nrwl/ instead of @nx/

Auto-generate Stories

The @nx/nuxt:storybook-configuration generator has the option to automatically generate *.stories.ts files for each component declared in your project, under the components directory. This makes sure that no stories are generated for your pages components. The stories will be generated using Component Story Format 3 (CSF3).

1<some-folder>/ 2├── MyComponent.vue 3└── MyComponent.stories.ts 4

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/nuxt:stories generator:

❯

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

Nx 15 and lower use @nrwl/ instead of @nx/
Example

Let's take for a example a Nuxt application in your workspace, under my-nuxt-app, called my-nuxt-app. This application contains a component, called my-button.

The command to generate stories for that application would be:

❯

nx g @nx/nuxt:stories --project=my-nuxt-app

Nx 15 and lower use @nrwl/ instead of @nx/

and the result would be the following:

1<workspace name>/ 2my-nuxt-app 3├── nuxt.config.ts 4├── project.json 5├── src 6│   ├── app.vue 7│   ├── assets 8│   ├── components 9│   │   └── my-button 10│   │   ├── my-button.stories.ts 11│   │   └── my-button.vue 12│   ├── pages 13│   ├── public 14│   └── server 15├── tsconfig.json 16└── tsconfig.storybook.json 17

More Documentation

You can find all Storybook-related Nx topics here.

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

Recipes