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.

unit

'%'

"%" | "rem" | "px"

The unit to use for size values.

Slots

Slot Type
default

{}

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    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({
      ui: {
        dashboardGroup: {
          base: 'fixed inset-0 flex overflow-hidden'
        }
      }
    })
  ]
})

Changelog

5cb65 — feat: import @nuxt/ui-pro components

PricingTable

A responsive pricing table component that displays tiered pricing plans with feature comparisons.

DashboardNavbar

A responsive navbar to display in a dashboard.