Setup

Using Storybook in your Nuxt project is only one command away ✨

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'],
})

export default {
  buildModules: ['@nuxtjs/storybook'],
}

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}

If these files don't exist, the module will automatically generate a basic configuration for them, so you don't have to create these files manually.

You can create these files 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.