Setup

Installation

1. Install @nuxtjs/storybook dependency to your project:

npx nuxi@latest module add storybook

2. Add it to your modules section in your nuxt.config:

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

3. Prepare Storybook config files.

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.