Skip to main content

​
Quick start

Follow this step-by-step guide to create a fully functional dashboard application using the Design System Dashboard Devmunity.
Make sure you’ve completed the installation before starting this guide.
1

Install the package

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

Configure nuxt.config.ts to extend the layer

Add the design system to your nuxt.config.ts file using the extends property:
nuxt.config.ts
export default defineNuxtConfig({
  extends: ['design-system-dashboard-devmunity'],
  devtools: { enabled: true },
})
The Nuxt Layer architecture automatically imports all components, composables, and configurations from the design system. No manual imports needed!
3

Use the basic layout component

Create a new page at app/pages/index.vue with the LDashboardContainer component. This component provides the core dashboard layout structure:
app/pages/index.vue
<template>
  <LDashboardContainer>
    <template #sidebar>
      <!-- Sidebar content will go here -->
    </template>

    <template #header>
      <!-- Header content will go here -->
    </template>

    <template #body>
      <!-- Main content will go here -->
    </template>
  </LDashboardContainer>
</template>
The LDashboardContainer component provides three main slots:
  • sidebar - For navigation and sidebar content
  • header - For the top navbar
  • body - For the main dashboard content
4

Add navigation with LSidebar

Add the LSidebar component to create a responsive sidebar with navigation:
app/pages/index.vue
<script setup lang="ts">
import type { NavigationMenuItem } from '@nuxt/ui'

const isOpen = ref(false)

const sidebarLinks = [
  [
    {
      label: 'Dashboard',
      icon: 'i-lucide-activity',
      to: '/',
    },
    {
      label: 'Users',
      icon: 'i-lucide-users',
      to: '/users',
    },
    {
      label: 'Settings',
      icon: 'i-lucide-settings',
      to: '/settings',
    },
  ],
] satisfies NavigationMenuItem[][]
</script>

<template>
  <LDashboardContainer>
    <template #sidebar>
      <LSidebar
        v-model:is-open="isOpen"
        logo-default-src="/logo.svg"
        :links-body="sidebarLinks"
      />
    </template>

    <template #header>
      <!-- Header content will go here -->
    </template>

    <template #body>
      <!-- Main content will go here -->
    </template>
  </LDashboardContainer>
</template>
The LSidebar component features:
  • Collapsible and resizable sidebar
  • Logo display (changes based on collapsed state)
  • Navigation menu with icons
  • Support for nested navigation items
5

Create a simple dashboard page

Now let’s add a complete dashboard with header navigation and content cards:
app/pages/index.vue
<script setup lang="ts">
import type { DropdownMenuItem, NavigationMenuItem } from '@nuxt/ui'
import type { NavbarLinks } from '~/types'

const isOpen = ref(false)
const searchTerm = ref('')

const sidebarLinks = [
  [
    {
      label: 'Dashboard',
      icon: 'i-lucide-activity',
      to: '/',
      onSelect: () => (isOpen.value = false),
    },
    {
      label: 'Users',
      icon: 'i-lucide-users',
      to: '/users',
      onSelect: () => (isOpen.value = false),
    },
    {
      label: 'Settings',
      icon: 'i-lucide-settings',
      to: '/settings',
      onSelect: () => (isOpen.value = false),
    },
  ],
] satisfies NavigationMenuItem[][]

const menuItems = [
  [{ label: 'Profile', icon: 'heroicons:user' }],
  [{ label: 'Settings', icon: 'heroicons:cog-6-tooth' }],
] satisfies DropdownMenuItem[][]

const links = [
  { label: 'Reports', to: '/reports' },
  { label: 'Analytics', to: '/analytics' },
] satisfies NavbarLinks
</script>

<template>
  <LDashboardContainer>
    <template #sidebar>
      <LSidebar
        v-model:is-open="isOpen"
        logo-default-src="/logo.svg"
        :links-body="sidebarLinks"
      />
    </template>

    <template #header>
      <LNavbar
        v-model:search-term="searchTerm"
        :links="links"
        :menu-items="menuItems"
        search-placeholder="Search..."
        menu-user-name="John Doe"
        menu-user-email="[email protected]"
      />
    </template>

    <template #body>
      <BCard>
        <template #header>
          <DCardHeader title="Welcome to your Dashboard" />
        </template>
        <ACardInner>
          <p class="text-gray-600">
            This is your main dashboard content area. You can add charts,
            tables, and any other content here using the available components
            from the design system.
          </p>
        </ACardInner>
      </BCard>
    </template>
  </LDashboardContainer>
</template>
This creates a complete dashboard with:
  • Collapsible sidebar navigation
  • Top navbar with search and user menu
  • Main content area with a card component

​
Complete working example

Here’s the full working example of a dashboard application:
app/pages/index.vue
<script setup lang="ts">
import type { DropdownMenuItem, NavigationMenuItem } from '@nuxt/ui'
import type { NavbarLinks } from '~/types'

const isOpen = ref(false)
const searchTerm = ref('')

const sidebarLinks = [
  [
    {
      label: 'General',
      type: 'label',
    },
    {
      label: 'Dashboard',
      icon: 'i-lucide-activity',
      to: '/',
      onSelect: () => (isOpen.value = false),
    },
    {
      label: 'Calendar',
      icon: 'i-lucide-calendar',
      to: '/calendar',
      defaultOpen: true,
      type: 'trigger',
      children: [
        {
          label: 'My Schedule',
          icon: 'i-lucide-calendar-days',
          to: '/calendar/schedule',
          onSelect: () => (isOpen.value = false),
        },
        {
          label: 'All Events',
          icon: 'i-lucide-users-2',
          to: '/calendar/events',
          onSelect: () => (isOpen.value = false),
        },
      ],
    },
    {
      label: 'Messages',
      icon: 'i-lucide-message-circle',
      to: '/messages',
      onSelect: () => (isOpen.value = false),
    },
  ],
  [
    {
      label: 'Settings',
      icon: 'i-lucide-settings',
      to: '/settings',
      onSelect: () => (isOpen.value = false),
    },
  ],
] satisfies NavigationMenuItem[][]

const menuItems = [
  [{ label: 'Profile', icon: 'heroicons:user' }],
  [{ label: 'Settings', icon: 'heroicons:cog-6-tooth' }],
] satisfies DropdownMenuItem[][]

const links = [
  { label: 'Reports', to: '/reports' },
  { label: 'Analytics', to: '/analytics' },
] satisfies NavbarLinks
</script>

<template>
  <LDashboardContainer>
    <template #sidebar>
      <LSidebar
        v-model:is-open="isOpen"
        logo-default-src="/media/img/ui-logo-placeholder.svg"
        logo-mini-src="/media/img/ui-logo-placeholder.svg"
        :links-body="sidebarLinks.slice(0, 1)"
        :links-body-bottom="sidebarLinks.slice(1)"
        :links-footer="sidebarLinks.slice(1)"
      />
    </template>

    <template #header>
      <LNavbar
        v-model:search-term="searchTerm"
        :links="links"
        :menu-items="menuItems"
        search-placeholder="Search..."
        menu-user-name="John Doe"
        menu-user-email="[email protected]"
      />
    </template>

    <template #body>
      <BCard>
        <template #header>
          <DCardHeader title="Welcome to your Dashboard" />
        </template>
        <ACardInner>
          <p class="text-gray-600">
            This is your main dashboard content area. You can add charts,
            tables, and any other content here using the available components
            from the design system.
          </p>
        </ACardInner>
      </BCard>
    </template>
  </LDashboardContainer>
</template>

​
Run your dashboard

Start the development server to see your dashboard in action: 
npm run dev
Your dashboard should now be running at http://localhost:3000 with a fully functional layout including sidebar navigation, header, and content area.

​
Next steps

Explore components

Discover all available components and their usage

Browse Storybook

View interactive examples and component documentation

Build docs developers (and LLMs) love

Get started for freeTalk to us