Black Friday Week: 20% off on all Nuxt UI Pro products from Nov 25 to Dec 2!

DashboardLayout

A wrapper for your dashboard layout.

Usage

The DashboardLayout component is meant to be the root component of your layout. It ensures a consistent placement between all DashboardPanel and DashboardPage.

layouts/default.vue
<template>
  <UDashboardLayout>
    <UDashboardPanel>
      <UDashboardNavbar />

      <UDashboardSidebar />
    </UDashboardPanel>

    <slot />
  </UDashboardLayout>
</template>

Props

ui
DeepPartial<{ wrapper: string; }>
{}

Config

{
  wrapper: 'fixed inset-0 flex overflow-hidden'
}