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

export default {
  storybook: {
    // Options
  }
}

addons

• Default: []

Register third party addons.

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:

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

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:

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

port

• Default: 3003

Port to run Storybook

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.

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.

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

decorators

• Default: []

A decorator is a way to wrap a story in extra “rendering” functionality. Many addons define decorators in order to augment your stories with extra rendering or gather details about how your story is rendered.*

Customize Storybook's global decorators.

export default {
  storybook: {
    decorators: [
      // VApp decorator for Vuetify
      '<v-app><story/></v-app>'
    ]
  }
}

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.

 export default {
   storybook: {
     modules: {
       exclude: [
         'module_name',
       ]
     }
   }
 }

 export default {
   storybook: {
     modules: false
   }
 }