The official Nuxt Certification Program is coming.


Easily integrate Storybook in your Nuxt application to design, build, and organize your UI components in isolation.

Nuxt Storybook

Nuxt Storybook

Integrate Storybook into your Nuxt application.


npx nuxi@latest module add storybook

Update your nuxt.config:

  modules: [
  storybook: {
    url: 'http://localhost:6006',
    storybookRoute: '/__storybook__',
    port: 6006,

Then run pnpm dev to start you Nuxt server.



๐Ÿ‘Œ 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 / Storybook 7

Nuxt 2

Nuxt 2 is supported with Storybook v6,you can check legacy code on the v4 branch.


  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 is no issues (consider adding tests).
  5. Submit a PR.


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

Contacts :

๐Ÿ”– Mail:

๐Ÿ’ฌ Discord: ChakAs3

๐Ÿฆโ€โฌ› Twitter: @ChakirQatab