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


  1. Install @nuxtjs/storybook dependency to your project:
yarn add -D @nuxtjs/storybook
npm install -D @nuxtjs/storybook
pnpm i -D @nuxtjs/storybook
  1. Add it to your modules section in your nuxt.config:
nuxt.config (Nuxt 3)
export default defineNuxtConfig({  modules: ['@nuxtjs/storybook']})
nuxt.config (Nuxt 2)
export default {  buildModules: ['@nuxtjs/storybook']}
That's it! You can now use Storybook in your Nuxt app ✨
Discover your Stories directly with the Storybook Devtools tab.

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
If you want to auto launch storybook after init pass --start If you want to enable Nuxt module pass --enable-module


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.