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
as

'div'

any

The element or component this component should render as.

storage

'cookie'

"cookie" | "local"

storageKey

'dashboard'

string

persistent

true

boolean

unit

'%'

"%" | "rem" | "px"

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