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:
<template>
<UDashboardGroup>
<UDashboardSidebar />
<slot />
</UDashboardGroup>
</template>
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
storage | 'cookie' | "cookie" | "local"The storage to use for the size. |
storageKey | 'dashboard' | stringUnique 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. |
| Slot | Type |
|---|---|
default | {} |
export default defineAppConfig({
ui: {
dashboardGroup: {
base: 'fixed inset-0 flex overflow-hidden'
}
}
})
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'
}
}
})
]
})
5cb65 — feat: import @nuxt/ui-pro components