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

DashboardPage

A wrapper for your dashboard pages.

Usage

The DashboardPage component is meant to be the root component of your pages. It ensures a consistent layout and scrolling behavior across all DashboardPanel.

pages/settings.vue
<template>
  <UDashboardPage>
    <UDashboardPanel>
      <UDashboardNavbar />

      <NuxtPage />
    </UDashboardPanel>
  </UDashboardPage>
</template>

This demonstrates a parent page with a NuxtPage inside the DashboardPanel. This way, its children can be wrapped inside a DashboardPanelContent.

Props

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

Config

{
  wrapper: 'flex flex-1 w-full min-w-0'
}