The DashboardPanel component is used to display a panel. Its state (size, collapsed, etc.) will be saved based on the storage and storage-key props you provide to the DashboardGroup component.
Use it inside the default slot of the DashboardGroup component, you can put multiple panels next to each other:
<script setup lang="ts">
definePageMeta({
layout: 'dashboard'
})
</script>
<template>
<UDashboardPanel id="inbox-1" resizable />
<UDashboardPanel id="inbox-2" class="hidden lg:flex" />
</template>
id when using multiple panels in different pages to avoid conflicts.resizable prop, so wrap it in a container (e.g., <div class="flex flex-1">) if you use page transitions or require a single root for layout.Use the header, body and footer slots to customize the panel or the default slot if you don't want a scrollable body with padding.
<template>
<UDashboardPanel resizable>
<template #header>
<UDashboardNavbar title="Inbox">
<template #leading>
<UDashboardSidebarCollapse />
</template>
</UDashboardNavbar>
</template>
<template #body>
<Placeholder class="h-full" />
</template>
</UDashboardPanel>
</template>
DashboardNavbar component in the header slot.Use the resizable prop to make the panel resizable.
Use the min-size, max-size and default-size props to customize the size of the panel.
<template>
<UDashboardPanel resizable>
<template #body>
<Placeholder class="h-96" />
</template>
</UDashboardPanel>
</template>
unit prop on the DashboardGroup component.| Prop | Default | Type |
|---|---|---|
id | useId() | stringThe id of the panel. |
minSize | 15 | numberThe minimum size of the panel. |
maxSize | 100 | numberThe maximum size of the panel. |
defaultSize | 0 | numberThe default size of the panel. |
resizable | false | boolean Whether to allow the user to resize the panel. |
ui | { root?: ClassNameValue; body?: ClassNameValue; handle?: ClassNameValue; } |
| Slot | Type |
|---|---|
default | {} |
header | {} |
body | {} |
footer | {} |
resize-handle | { onMouseDown: (e: MouseEvent) => void; onTouchStart: (e: TouchEvent) => void; onDoubleClick: (e: MouseEvent) => void; } |
export default defineAppConfig({
ui: {
dashboardPanel: {
slots: {
root: 'relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default shrink-0',
body: 'flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6',
handle: ''
},
variants: {
size: {
true: {
root: 'w-full lg:w-(--width)'
},
false: {
root: 'flex-1'
}
}
}
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
dashboardPanel: {
slots: {
root: 'relative flex flex-col min-w-0 min-h-svh lg:not-last:border-e lg:not-last:border-default shrink-0',
body: 'flex flex-col gap-4 sm:gap-6 flex-1 overflow-y-auto p-4 sm:p-6',
handle: ''
},
variants: {
size: {
true: {
root: 'w-full lg:w-(--width)'
},
false: {
root: 'flex-1'
}
}
}
}
}
})
]
})