Skip to main content
This guide covers everything you need to know to contribute to the Design System Dashboard Devmunity or test it locally.

​
Prerequisites

Before you begin, ensure you have the following installed:
  • Node.js: Version 18 or higher recommended
  • npm: Comes with Node.js (or use yarn/pnpm)
  • Git: For version control

​
Initial Setup

1

Clone the repository

Clone the repository from GitHub:
git clone https://github.com/vicventum/design-system-dashboard-devmunity
cd design-system-dashboard-devmunity
2

Install dependencies

Install all required dependencies:
npm install
This will also set up Husky hooks for commit linting and code quality checks.
3

Start development server

Launch the Nuxt development server:
npm run dev
The development server will start, typically at http://localhost:3000.

​
Available Scripts

The project includes several npm scripts for different development tasks:

​
Development

# Start the Nuxt development server with hot reload
npm run dev

​
Storybook

# Start Storybook on port 6006
npm run storybook

# Build a static Storybook site
npm run build-storybook

​
Production Build

# Build the project for production
npm run build

# Generate static site
npm run generate

# Preview production build
npm run preview

​
Code Quality

# Use Commitizen for conventional commits
npm run commit

​
Development Workflow

​
Adding a New Component

1

Create component file

Create your component in the app/components directory:
app/components/YourComponent/YourComponent.vue
2

Create Storybook story

Add a corresponding story file:
app/components/YourComponent/YourComponent.stories.ts
3

Test in Storybook

Run Storybook to see your component in isolation:
npm run storybook
4

Test in Nuxt app

Test the component in the Nuxt development server:
npm run dev

​
Project Structure

design-system-dashboard-devmunity/
├── .storybook/           # Storybook configuration
│   ├── main.ts          # Main Storybook config
│   └── preview.ts       # Preview configuration
├── app/                 # Main application directory
│   ├── assets/
│   │   └── css/
│   │       └── main.css # Global styles
│   └── components/      # Vue components
├── public/              # Static assets
├── nuxt.config.ts       # Nuxt configuration
└── package.json         # Package dependencies and scripts

​
Configuration Files

​
Nuxt Configuration

The nuxt.config.ts file configures the layer:
nuxt.config.ts
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    '@nuxt/ui',
    process.env.STORYBOOK === 'true' ? '@nuxtjs/storybook' : undefined,
  ].filter(Boolean),
  
  css: ['#layers/design-system/app/assets/css/main.css'],
  
  vite: {
    plugins: [tailwindcss()],
  },
  
  ui: {
    theme: {
      colors: ['primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error'],
    },
  },
})

​
Package Configuration

Key fields in package.json: 
{
  "name": "design-system-dashboard-devmunity",
  "version": "1.1.0",
  "main": "./nuxt.config.ts",
  "files": [
    "app",
    "public",
    "nuxt.config.ts"
  ]
}

​
Git Workflow

This project uses Conventional Commits and Semantic Release for versioning.

​
Commit Message Format

Use the Commitizen CLI for properly formatted commits: 
npm run commit
This will prompt you to create a commit following the conventional commits specification:
  • feat: New features
  • fix: Bug fixes
  • docs: Documentation changes
  • style: Code style changes (formatting, etc.)
  • refactor: Code refactoring
  • test: Adding or updating tests
  • chore: Maintenance tasks

​
Example Commits

feat: add new Button component variant
fix: resolve spacing issue in Card component
docs: update installation instructions

​
Code Quality Tools

The project includes several tools to maintain code quality:

Husky

Git hooks for pre-commit and commit-msg validation

Commitlint

Ensures commit messages follow conventional commits

Prettier

Code formatting with Tailwind CSS plugin

Semantic Release

Automated versioning and changelog generation

​
Testing Components

​
In Storybook

  1. Start Storybook: npm run storybook
  2. Navigate to your component
  3. Test different props and variants
  4. Check responsive behavior
  5. Verify accessibility

​
In Nuxt Dev Server

  1. Start dev server: npm run dev
  2. Create or modify a page to use your component
  3. Test in the full Nuxt context
  4. Verify SSR behavior

​
Building for Production

1

Run production build

npm run build
2

Preview the build

npm run preview
3

Test the layer

Test that the layer works when installed in another Nuxt project.

​
Publishing

The package is published automatically via Semantic Release when changes are merged to the main or next branches. Do not publish manually unless necessary.
The automated release process:
  1. Analyzes commit messages
  2. Determines version bump (major, minor, patch)
  3. Generates changelog
  4. Publishes to npm
  5. Creates GitHub release

​
Key Dependencies

​
Production Dependencies

  • @nuxt/ui: Nuxt UI component library
  • tailwindcss: Utility-first CSS framework
  • @tailwindcss/vite: Vite plugin for Tailwind
  • nuxt: Nuxt 4 framework

​
Development Dependencies

  • @nuxtjs/storybook: Storybook integration for Nuxt
  • @chromatic-com/storybook: Visual testing
  • prettier: Code formatting
  • commitizen: Conventional commits CLI

​
Environment Variables

​
STORYBOOK

The STORYBOOK environment variable controls whether the Storybook module is loaded: 
# Automatically set by npm run storybook
STORYBOOK=true storybook dev -p 6006

​
Troubleshooting

Try removing node_modules and reinstalling:
rm -rf node_modules package-lock.json
npm install
Ensure the STORYBOOK environment variable is set:
STORYBOOK=true npm run storybook
Check that the Vite Tailwind plugin is configured in nuxt.config.ts and the CSS file is imported.

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us