Setup

Installation

The Storybook CLI provides a convenient way to integrate Storybook with Nuxt. Run the following command in your project's root directory:

pnpm dlx storybook@latest init

This command will install Storybook along with the Nuxt module, set up the necessary scripts to configure Storybook, and add some boilerplate stories to get you started. Please consult the Storybook documentation for more information.

Alternatively, you can install Storybook and the Nuxt module manually.

1. Add @nuxtjs/storybook as a development dependency to your project:

npx nuxi@latest module add storybook

2. If not using nuxi above, add the module @nuxtjs/storybook to your Nuxt configuration:

export default defineNuxtConfig({
  modules: ['@nuxtjs/storybook'],
})

3. Prepare Storybook config files.

Usage

When you run your Nuxt app in development mode, the Storybook server will automatically start in the background. The URL to access Storybook will be displayed in the console (http://localhost:6006 by default). If you want to start Storybook without running your Nuxt app, you can use the following command:

pnpm run storybook

When you install Storybook using the CLI, you will find a few stories in the components directory to get you started. You can add your own stories to this directory or create a new directory for your stories (in which case you will need to update the Storybook configuration). The Storybook server will automatically detect changes to your stories and update the UI accordingly.

For more information on how to write stories and the next steps, refer to the Storybook documentation.

Nightly Builds

The nightly release channel allows you to test the latest updates and features, directly from the most recent commits. This is useful for experimenting with new features, improvements, and bug fixes before they are included in the stable release.

Opting in to the nightly release

To use the nightly version, follow these steps:

• Modify the @nuxtjs/storybook dependency in your package.json to use the latest nightly release:

  {
    "devDependencies": {
      "@nuxtjs/storybook": "npm:@nuxtjs/storybook@nightly"
    }
  }
  

• Remove the lockfile and reinstall the dependencies using your package manager to ensure the nightly release is installed.

Opting out of the nightly release

If you need to revert to the stable release, follow these steps:

• Change the @nuxtjs/storybook dependency in package.json back to the stable version:

  {
    "devDependencies": {
      "@nuxtjs/storybook": "latest"
    }
  }
  

• Remove the lockfile and reinstall the dependencies to revert to the stable release.

Storybook config Files

When running npm run dev, this module will look for these files:

• .storybook/main.{ts,js}
• .storybook/preview.{js,cjs,mjs,ts}

You can create these files manually or by running the following command:

npx storybook-nuxt init

Options

You can customize the module's behavior by using the storybook property in nuxt.config:

export default defineNuxtConfig({
  storybook: {
    // Options
    url: 'http://localhost:6006',
    port: 6006,
  },
})

See the module options.