Storybook-Driven development in Nuxt

Build in Isolation – Focus on one component at a time.
Live Playground – Tweak props and see instant results.
Auto Docs – Stories double as documentation.
Rich Addons – Accessibility, viewport, controls, and more.
Rich Integrations – Playwright, Cypress, Chromatic.
Visual Testing – Spot UI changes before they ship.
Design Sync – Direct integration with Figma or Sketch.
Collaboration – for UX, QA, BA, PO, and DEVs all in one place.
Scalable – Grows with your project and team.
Easy Sharing – Publish and share as a static site.
Predictable and stable - mocks all outer dependencies

Why Storybook?

Autoimports - Nuxt auto-imports a lot of stuff:
- Components
- Composables
- Stores
- Utils
- Directives
Layers – stories can be spread across multiple layers, and they can override each other.
Aliases - components can be overridden in different layers
Plugins – functionality critical to the component can be placed inside the plugin that Storybook should recognize
Modules - Storybook should be able to execute Nuxt modules during initialization

Nuxt Requirements to Storybook

Step 1 – Create a Nuxt project

Let's get Started!

Step 2 – Install Nuxt-Storybook module

Step 3 – Add base Storybook configuration to nuxt.config.ts

pnpm create nuxt@latest nuxt-storybook-starter

npx nuxi@latest module add storybook

 storybook: {
    port: 6006
  }

Configuring Storybook

import type { StorybookConfig } from '@nuxtjs/storybook'

const config: StorybookConfig = {
  staticDirs: ['./public'],
  "stories": [
    "../**/components/**/*.stories.ts"
  ],
  "addons": [
    "@storybook/addon-docs",
    "@storybook/addon-a11y"
  ],
  "framework": {
    "name": "@storybook-vue/nuxt",
    "options": {}
  }
}
export default config

Let's add main.ts

Adding first story

import type { StorybookConfig } from '@nuxtjs/storybook'

const config: StorybookConfig = {
  staticDirs: ['./public'],
  "stories": [
    "../**/components/**/*.stories.ts"
  ],
  "addons": [
    "@storybook/addon-docs",
    "@storybook/addon-a11y"
  ],
  "framework": {
    "name": "@storybook-vue/nuxt",
    "options": {}
  }
}
export default config

Let's add main.ts

Theaming Storybook

import type { StorybookConfig } from '@nuxtjs/storybook'

const config: StorybookConfig = {
  staticDirs: ['./public'],
  "stories": [
    "../**/components/**/*.stories.ts"
  ],
  "addons": [
    "@storybook/addon-docs",
    "@storybook/addon-a11y"
  ],
  "framework": {
    "name": "@storybook-vue/nuxt",
    "options": {}
  }
}
export default config

Let's add manager.ts and manager-head.html