DashboardGroupPRO

GitHub
A fixed layout component that provides context for dashboard components with sidebar state management and persistence.

Usage

The DashboardGroup component is the main layout that wraps the DashboardSidebar and DashboardPanel components to create a responsive dashboard interface.

Use it in a layout or in your app.vue:

layouts/dashboard.vue
<template>
  <UDashboardGroup>
    <UDashboardSidebar />

    <slot />
  </UDashboardGroup>
</template>

API

Props

Prop Default Type

Slots

Slot Type

Theme

app.config.ts
export default defineAppConfig({
  uiPro: {
    dashboardGroup: {
      base: 'fixed inset-0 flex overflow-hidden'
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      uiPro: {
        dashboardGroup: {
          base: 'fixed inset-0 flex overflow-hidden'
        }
      }
    })
  ]
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      uiPro: {
        dashboardGroup: {
          base: 'fixed inset-0 flex overflow-hidden'
        }
      }
    })
  ]
})

ContextMenu

A menu to display actions when right-clicking on an element.

DashboardNavbar

A responsive navbar to display in a dashboard.