Skip to main content

​
Installation

Get started with the Design System Dashboard Devmunity by installing it as a dependency in your Nuxt project.

​
Prerequisites

Before installing, make sure you have:
  • Node.js 18 or higher
  • A Nuxt 3 or Nuxt 4 project
  • npm, yarn, or pnpm package manager
If you don’t have a Nuxt project yet, create one first:
npx nuxi@latest init my-dashboard-app

​
Install the package

Install the design system using your preferred package manager: 
npm install design-system-dashboard-devmunity

​
Configure Nuxt

Add the design system to the extends property in your nuxt.config.ts file:
nuxt.config.ts
export default defineNuxtConfig({
  extends: ['design-system-dashboard-devmunity'],
})
That’s it! Nuxt will automatically load all components, composables, assets, and configurations from the design system layer.

​
What gets loaded

When you extend the design system layer, Nuxt automatically provides:

​
Components

All components are auto-imported and ready to use:
  • Layout components (LDashboardContainer, LSidebar, LNavbar)
  • UI components (cards, badges, buttons, modals, etc.)
  • No manual imports required

​
Styles

Pre-configured styling with:
  • Tailwind CSS 4 configuration
  • Custom color themes
  • Nuxt UI component styles

​
Configuration

Default app configuration including:
  • Color palette (primary, secondary, accent, etc.)
  • Icon mappings
  • Theme settings

​
Verify installation

To verify the installation worked, start your development server: 
npm run dev
You should be able to use any component from the design system without errors.

​
Next steps

Quick start

Build your first dashboard with step-by-step instructions

Storybook

Explore available components and their props

Build docs developers (and LLMs) love

Get started for freeTalk to us