28b48ad1f3
This PR fixes an issue introduced when we removed `/nx-api` pages: https://github.com/nrwl/nx/pull/31453. Most of the old `/nx-api/<plugin>` URLs should now go to `/technologies/<plugin>/introduction`, since those pages contain what was on the previous "overview" pages. The only exception are places where we explicitly link to `.../api/{generators,executors,migrations}` URLs, and the following three blog posts that we want users to land on the API index. - https://github.com/nrwl/nx/blob/master/docs/blog/2022-03-29-the-react-cli-you-always-wanted-but-didnt-know-about.md?plain=1#L132 (https://nx.dev/blog/the-react-cli-you-always-wanted-but-didnt-know-about) - https://github.com/nrwl/nx/blob/master/docs/blog/2022-04-08-what-is-new-in-nx-13-10.md?plain=1#L245 (https://nx.dev/blog/what-is-new-in-nx-13-10) - https://github.com/nrwl/nx/blob/master/docs/blog/2022-05-02-nx-v14-is-out-here-is-all-you-need-to-know.md?plain=1#L253 (https://nx.dev/blog/nx-v14-is-out-here-is-all-you-need-to-know)
3.1 KiB
| 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.