@nuxtjs/storybook is shipped with multiple commands, making easy to develop or ship the UI for production.

Development

To start Storybook in development environment:

Yarn
yarn nuxt storybook
NPM
npx nuxt storybook

By default, it will start the development server on http://localhost:3003 , you can configure the port in the options or with CLI options.

CLI Options

Development command have some options you can pass to alter storybook behaviors.

-c, --config-file <file-path> Specify the path to nuxt.config.js file.
-p, --port [number]           Port to run Storybook.
-h, --host [string]           Host to run Storybook
-s, --static-dir <dir-names>  Directory where to load static files from, comma-separated list. By default it loads Nuxt static dir
--smoke-test                  Exit after successful start
--ci                          CI mode (skip interactive prompts, don't open browser)
--quiet                       Suppress verbose build output
--tsconfig <file-path>        Specify the path to tsconfig.json file.

Export

Export your Storybook into a static web application to deploy it to GitHub pages or any static hosting service:

Yarn
yarn nuxt storybook build
NPM
npx nuxt storybook build

By default this command will output a storybook-static/ directory. See command option to change output directory.

CLI Options

Build command have some options you can pass to alter storybook behaviors.

-c, --config-file <file-path> Specify the path to nuxt.config.js file.
-s, --static-dir <dir-names>  Directory where to load static files from, comma-separated list. By default it loads Nuxt static dir
-o, --output-dir [dir-name]   Directory where to store built files
--tsconfig <file-path>        Specify tha path to tsconfig.json file.
--quiet
--webpack-stats-json <file-path> Must be set to the value of --output-dir, for
use with Chromatic's TurboSnap feature

Eject

Generate manual config directory for Storybook

Yarn
yarn nuxt storybook eject
NPM
npx nuxt storybook eject

This command will create a storybook directory and default configuration files.

CLI Options 

-c, --config-file <file-path> Specify the path to nuxt.config.js file.
--force  Force to overwrite config files if there are existed
Edit this page on GitHub Updated at Mon, Sep 11, 2023
Getting Started Usage
Api Hooks