DashboardGroup

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
as

'div'

any

The element or component this component should render as.

storage

'cookie'

"cookie" | "local"

The storage to use for the size.

storageKey

'dashboard'

string

Unique id used to auto-save size.

persistent

true

boolean

Whether to persist the size in the storage.

Slots

Slot Type
default

{}

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'
        }
      }
    })
  ]
})

ContextMenu

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

DashboardNavbar

A responsive navbar to display in a dashboard.