Nuxt Storybook

Integrate Storybook into your Nuxt application.

Installing

npx nuxi@latest module add storybook

Update your nuxt.config:

  modules: [
    '@nuxtjs/storybook',
  ],
  storybook: {
    url: 'http://localhost:6006',
    storybookRoute: '/__storybook__',
    port: 6006,
  },

Then run pnpm dev to start your Nuxt server.

Demo

https://github.com/storybook-vue/nuxt-storybook-module-demo

Features

👌 Zero configuration to start (see video)

🪄 Access Storybook Terminal

🎨 Devtools tab with Storybook app

⚙️ Reference your Storybook config in your app

📦 Extendable by Nuxt modules

🚀 Supports Nuxt 3 and Nuxt 4 with Storybook 10

Requirements

• Node.js 20.19+, 22.12+, or 24+
• Nuxt 3.x or Nuxt 4.x
• Storybook 10.x

Previous Versions

• Storybook 8/9: Use v8.x of this module
• Nuxt 2: Use v4.x with Storybook v6 (check the v4 branch for legacy code)

Contributing

1. Install dependencies with pnpm.
2. Run pnpm dev:prepare to generate stubbed dist directory.
3. Make your changes.
4. Run pnpm lint to verify that there are no issues (consider adding tests).
5. Submit a PR.

License

This repository is licensed under the MIT License. Feel free to use the code and modify it according to your needs.

Contacts :

🔖 Mail: javachakir@gmail.com

💬 Discord: ChakAs3

🐦‍⬛ Twitter: @ChakirQatab

Sponsors

Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.