Options

To configure the integration, you can use storybook property in the nuxt.config.js:

nuxt.config.js
export default {
  storybook: {
    // Options
  }
}

addons

  • Default: []

Register third party addons.

nuxt.config.js
export default {
  storybook: {
    addons: [
      '@storybook/addon-controls',
      '@storybook/addon-notes',
    ]
  }
}

You can pass configurations by using Object addon declaration and adding the configurations under the option key. For example if you want to use @storybook/preset-scss with custom configuration you can do this:

nuxt.config.js
export default {
  storybook: {
    addons: [
      {
        name: '@storybook/preset-scss',
        options: {
          cssLoaderOptions: {
              modules: true,
              localIdentName: '[name]__[local]--[hash:base64:5]',
          }
        }
      }
    ]
  }
}

@nuxtjs/storybook internally registered some third party addons.

You don't need to register these addons in your project:

  • @storybook/addon-essentials

stories

  • Default: []

With this option you can register your custom stories to Storybook. For example, If your stories are located in the stories directory, you can use the following snippet:

nuxt.config.js
export default {
  storybook: {
    stories: [
      '~/stories/**/*.stories.js',
      '~/custom/path/sample.stories.js'
    ],
  }
}

By default @nuxtjs/storybook load all stories inside ~/components. You don't need to add this directory.

port

  • Default: 3003

Port to run Storybook

nuxt.config.js
export default {
  storybook: {
    // Run Storybook on localhost:4000
    port: 4000
  }
}

webpackFinal

To customize Storybook's webpack config, you can create webpackFinal. webpackFinal is applied to the preview config after all presets have been applied.

nuxt.config.js
export default {
  storybook: {
    webpackFinal(config, { configDir }) {
      // manipulate webpack config
      return config;
    }
  }
}

parameters

  • Default: {}

Parameters are a set of static, named metadata about a story, typically used to control the behavior of Storybook features and addons.*

Customize Storybook's global parameters.

nuxt.config.js
export default {
  storybook: {
    parameters: {
      backgrounds: {
        default: 'white',
        values: [
          { name: 'white', value: '#ffffff' },
          { name: 'gray', value: '#aaaaaa' },
        ],
      },
    }
  }
}

modules

  • Default: true

As of Version 3 @nuxtjs/storybook will provide an API for modules to modify Storybook config and add their own stories. Each module can use module API to provide their own stories.
Using module option you can control modules stories, exclude all or a specific modules.

nuxt.config.js
 export default {
   storybook: {
     modules: {
       exclude: [
         'module_name',
       ]
     }
   }
 }
nuxt.config.js
 export default {
   storybook: {
     modules: false
   }
 }