Rescope @nrwl to @nx
@nx/vueSee schema

@nx/vue:storybook-configuration

Set up Storybook for a Vue project.

This generator will set up Storybook for your Vue project. You can also use this generator to generate Storybook configuration for your Nuxt project.

1nx g @nx/vue:storybook-configuration project-name 2
Nx 15 and lower use @nrwl/ instead of @nx/

or

1nx g @nx/nuxt:storybook-configuration project-name 2
Nx 15 and lower use @nrwl/ instead of @nx/

You can read more about how this generator works, in the Storybook for Vue overview page.

When running this generator, you will be prompted to provide the following:

  • The name of the project you want to generate the configuration for.
  • Whether you want to set up Storybook interaction tests (interactionTests). If you choose yes, a play function will be added to your stories, and all the necessary dependencies will be installed. Also, a test-storybook target will be generated in your project's project.json, with a command to invoke the Storybook test-runner. You can read more about this in the Nx Storybook interaction tests documentation page..
  • Whether you want to generateStories for the components in your project. If you choose yes, a .stories.ts file will be generated next to each of your components in your project.

You must provide a name for the generator to work.

By default, this generator will also set up Storybook interaction tests. If you don't want to set up Storybook interaction tests, you can pass the --interactionTests=false option, but it's not recommended.

There are a number of other options available. Let's take a look at some examples.

Examples

Generate Storybook configuration

1nx g @nx/vue:storybook-configuration ui 2
Nx 15 and lower use @nrwl/ instead of @nx/

This will generate Storybook configuration for the ui project using TypeScript for the Storybook configuration files (the files inside the .storybook directory, eg. .storybook/main.ts).

Ignore certain paths when generating stories

1nx g @nx/vue:storybook-configuration ui --generateStories=true --ignorePaths=libs/ui/src/not-stories/**,**/**/src/**/*.other.*,apps/my-app/**/*.something.ts 2
Nx 15 and lower use @nrwl/ instead of @nx/

This will generate a Storybook configuration for the ui project and generate stories for all components in the libs/ui/src/lib directory, except for the ones in the libs/ui/src/not-stories directory, and the ones in the apps/my-app directory that end with .something.ts, and also for components that their file name is of the pattern *.other.*.

This is useful if you have a project that contains components that are not meant to be used in isolation, but rather as part of a larger component.

By default, Nx will ignore the following paths:

1*.stories.ts, *.stories.tsx, *.stories.js, *.stories.jsx, *.stories.mdx 2

but you can change this behaviour easily, as explained above.

Generate stories using JavaScript instead of TypeScript

1nx g @nx/vue:storybook-configuration ui --generateStories=true --js=true 2
Nx 15 and lower use @nrwl/ instead of @nx/

This will generate stories for all the components in the ui project using JavaScript instead of TypeScript. So, you will have .stories.js files next to your components.

Generate Storybook configuration using JavaScript

1nx g @nx/vue:storybook-configuration ui --tsConfiguration=false 2
Nx 15 and lower use @nrwl/ instead of @nx/

By default, our generator generates TypeScript Storybook configuration files. You can choose to use JavaScript for the Storybook configuration files of your project (the files inside the .storybook directory, eg. .storybook/main.js).

Usage

1nx generate storybook-configuration ... 2

By default, Nx will search for storybook-configuration in the default collection provisioned in workspace.json.

You can specify the collection explicitly as follows:

1nx g @nx/vue:storybook-configuration ... 2
Nx 15 and lower use @nrwl/ instead of @nx/

Show what will be generated without writing to disk:

1nx g storybook-configuration ... --dry-run 2

Options

name

Required
string

Project for which to generate Storybook configuration.

configureStaticServe

boolean
Default: true

Specifies whether to configure a static file server target for serving storybook. Helpful for speeding up CI build/test times.

generateStories

boolean
Default: true

Automatically generate *.stories.ts files for components declared in this project?

interactionTests

configureTestRunner
boolean
Default: true

Set up Storybook interaction tests.

ignorePaths

Array<string>
Default: [*.stories.ts,*.stories.tsx,*.stories.js,*.stories.jsx,*.stories.mdx]

Paths to ignore when looking for components.

js

boolean
Default: false

Generate JavaScript story files rather than TypeScript story files.

linter

string
Default: eslint
Accepted values: eslint

The tool to use for running lint checks.

tsConfiguration

boolean
Default: true

Configure your project with TypeScript. Generate main.ts and preview.ts files, instead of main.js and preview.js.