Skip to main content
The Design System Dashboard Devmunity is distributed as a Nuxt Layer, making it easy to extend and use in any Nuxt application. This guide walks you through the installation and configuration process.

​
What is a Nuxt Layer?

Nuxt Layers allow you to share and reuse components, composables, assets, and configurations across multiple Nuxt projects. By extending this design system layer, you automatically get access to all its features without manual setup.

​
Installation

1

Install the package

Install the design system using your preferred package manager:
npm install design-system-dashboard-devmunity
Or with yarn:
yarn add design-system-dashboard-devmunity
Or with pnpm:
pnpm add design-system-dashboard-devmunity
2

Configure your Nuxt project

Add the package to the extends property in your nuxt.config.ts file:
nuxt.config.ts
export default defineNuxtConfig({
  extends: ['design-system-dashboard-devmunity'],
  // Your other configuration...
})
3

Start using components

That’s it! All components, composables, and assets from the design system are now available in your project.Components are auto-imported, so you can use them directly in your templates:
<template>
  <div>
    <!-- Design system components are automatically available -->
  </div>
</template>

​
Extending Multiple Layers

You can extend multiple layers in your Nuxt configuration. Simply add them to the extends array:
nuxt.config.ts
export default defineNuxtConfig({
  extends: [
    'design-system-dashboard-devmunity',
    'another-layer',
  ],
})

​
What Gets Extended

When you extend this layer, your project automatically inherits:
  • Components: All UI components are auto-imported
  • Composables: Shared Vue composables for common functionality
  • Assets: CSS files and styles from the design system
  • Configuration: Pre-configured modules and settings including:
    • @nuxt/ui module with custom theme colors (primary, secondary, accent, info, success, warning, error)
    • Tailwind CSS with @tailwindcss/vite plugin
    • CSS imports from the layer’s assets

​
Layer Configuration

The layer includes the following key configurations that will be merged with your project: 
// From the layer's nuxt.config.ts
{
  modules: ['@nuxt/ui'],
  css: ['#layers/design-system/app/assets/css/main.css'],
  ui: {
    theme: {
      colors: ['primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error'],
    },
  },
}

​
Overriding Layer Defaults

You can override any layer configuration in your own nuxt.config.ts. Your project’s configuration takes precedence over the layer’s defaults. For example, to customize the UI theme colors:
nuxt.config.ts
export default defineNuxtConfig({
  extends: ['design-system-dashboard-devmunity'],
  
  ui: {
    theme: {
      colors: ['primary', 'custom', 'brand'],
    },
  },
})

​
NPM Package Information

The package is published as design-system-dashboard-devmunity on npm. Check the npm registry for the latest version and release notes.

​
Migration Notes

The component library is currently being migrated from an older version. New components and features are being added regularly. Check the Storybook for the latest available components.

​
Next Steps

Build docs developers (and LLMs) love

Get started for freeTalk to us