Skip to main content
Storybook is an essential tool for developing and documenting UI components in isolation. This design system uses Storybook to showcase all available components and their variants.

​
Viewing the Live Storybook

You can explore the complete component library in the deployed Storybook instance:

View Storybook

Browse all components, guides, and examples in the live Storybook deployment

​
Running Storybook Locally

If you’re contributing to the design system or want to test components locally, you can run Storybook on your machine.
1

Clone the repository

First, clone the design system repository:
git clone https://github.com/vicventum/design-system-dashboard-devmunity
cd design-system-dashboard-devmunity
2

Install dependencies

Install all required dependencies:
npm install
3

Start Storybook

Launch the Storybook development server:
npm run storybook
This will start Storybook on port 6006. Open your browser to:
http://localhost:6006

​
Storybook Configuration

The Storybook setup is configured in the .storybook directory with the following key files:

​
Main Configuration

.storybook/main.ts
const config = {
  stories: [
    '../app/**/*.mdx',
    '../app/components/**/*.mdx',
    '../app/components/**/*.stories.@(js|jsx|ts|tsx|mdx)',
  ],
  addons: [
    '@chromatic-com/storybook',
    '@storybook/addon-docs'
  ],
  framework: {
    name: '@storybook-vue/nuxt',
    options: {},
  },
}

​
Preview Configuration

The preview configuration wraps all stories with the Nuxt UI App component and defines the story organization:
.storybook/preview.ts
const preview = {
  decorators: [
    () => ({
      components: { UApp },
      template: '<UApp><story /></UApp>',
    }),
  ],
  parameters: {
    options: {
      storySort: {
        order: [
          'Guides',
          ['Introduction', 'Component Organization System', 'Arquitectura de Estilos'],
        ],
      },
    },
  },
  tags: ['autodocs'],
}

​
Story Structure

Stories are located alongside components in the app/components directory. The pattern follows: 
app/
├── components/
│   ├── Button/
│   │   ├── Button.vue
│   │   └── Button.stories.ts
│   └── Card/
│       ├── Card.vue
│       └── Card.stories.ts
└── **/*.mdx (documentation pages)

​
Writing Stories

When creating a new component story, follow this pattern:
ComponentName.stories.ts
import type { Meta, StoryObj } from '@storybook/vue3'
import ComponentName from './ComponentName.vue'

const meta: Meta<typeof ComponentName> = {
  title: 'Components/ComponentName',
  component: ComponentName,
  tags: ['autodocs'],
}

export default meta
type Story = StoryObj<typeof ComponentName>

export const Default: Story = {
  args: {
    // component props
  },
}

​
Building Storybook

To build a static version of Storybook for deployment: 
npm run build-storybook
This command:
  1. Runs nuxt prepare to generate necessary Nuxt files
  2. Sets the STORYBOOK=true environment variable
  3. Builds a static Storybook site in the storybook-static directory

​
Storybook Addons

This project uses the following Storybook addons:

Chromatic

Visual testing and review platform integration

Addon Docs

Automatic documentation generation from component props and JSDoc comments

​
Environment Variables

The Storybook module is conditionally loaded in nuxt.config.ts only when STORYBOOK=true is set. This prevents Storybook dependencies from affecting regular Nuxt builds.
nuxt.config.ts
modules: [
  '@nuxt/ui',
  process.env.STORYBOOK === 'true' ? '@nuxtjs/storybook' : undefined,
].filter(Boolean),

​
Automatic Documentation

All stories are tagged with autodocs, which means Storybook automatically generates documentation pages based on:
  • Component props and their types
  • JSDoc comments
  • Default values
  • Story examples

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us