Layout components

LteDashboardLayout, LteSidebar, LteTopbar, LteAppContent, LteFooter, LteAuthLayout.

The layout components assemble the AdminLTE shell. LteDashboardLayout is the single host that wires the topbar, sidebar, footer and command palette together and provides the shared sidebar / color-mode / command-palette state to every descendant. The remaining components either render inside it or, like LteAuthLayout, stand alone for sign-in pages.

LteDashboardLayout

The top-level wrapper for an admin page. It renders LteTopbar, LteSidebar, your page content (via the default slot), LteFooter, and the ⌘K command palette — and installs all shared state.

<template>
  <LteDashboardLayout
    :menu-items="menu"
    brand-text="Acme"
    :current-path="$route.path"
    @logout="signOut"
    @profile="goToProfile"
  >
    <LteAppContent title="Dashboard">
      <!-- page content -->
    </LteAppContent>
  </LteDashboardLayout>
</template>

Props

Name	Type	Default	Description
`menuItems`	`MenuNode[]`	—	Navigation tree feeding the sidebar and the command palette.
`logo`	`string`	—	Logo image src. When omitted the `logo` slot (or default AdminLTE text) is used.
`logoHref`	`string`	`'/'`	Link target for the sidebar brand.
`user`	`TopbarUser`	—	Signed-in user shown in the topbar menu.
`sidebarTheme`	`'light' \| 'dark'`	`'dark'`	Sidebar color theme (independent of the global color mode).
`sidebarClass`	`string`	—	Extra classes on the `<aside class="app-sidebar">`.
`sidebarBreakpoint`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'`	`'lg'`	Breakpoint where the sidebar expands / push-menu activates.
`sidebarMini`	`boolean`	`false`	Enable the collapsed mini-sidebar behavior.
`fixedHeader`	`boolean`	`false`	Add the `fixed-header` body class.
`fixedSidebar`	`boolean`	`false`	Add the `fixed-sidebar` body class.
`fixedFooter`	`boolean`	`false`	Add the `fixed-footer` body class.
`layoutFixed`	`boolean`	`true`	Add the `layout-fixed` body class.
`colorModeToggle`	`boolean`	`true`	Show the light/dark toggle in the topbar.
`initialColorMode`	`'light' \| 'dark' \| 'auto'`	`'auto'`	Starting color mode before persisted preference loads.
`dir`	`'ltr' \| 'rtl'`	—	Text direction. Rendered on `.app-wrapper` and written to `<html dir>` while the layout is mounted (the previous value is restored on unmount). Pair it with the RTL stylesheet — see `useDirection`.
`enableSidebarPersistence`	`boolean`	`false`	Persist the sidebar collapse state to localStorage.
`navbarClass`	`string`	—	Extra classes on the topbar `<nav>`.
`bodyClass`	`string`	—	Extra classes appended to the body layout classes.
`currentPath`	`string`	`'/'`	Current route path for active-link detection.
`footerRightText`	`string`	`'Anything you want'`	Right-aligned footer text (forwarded to `LteFooter`).
`footerYear`	`number \| string`	current year	Year in the default footer copyright line (forwarded to `LteFooter`).
`brandText`	`string`	—	Brand text shown next to the logo in the sidebar.
`linkComponent`	`string \| Component`	`'a'`	Link component for sidebar/palette nav (e.g. `NuxtLink`).
`accordion`	`boolean`	`false`	Accordion treeview — one open group per parent.
`navigate`	`(href: string) => void`	—	Navigation callback for the command palette and sidebar links (e.g. `router.push`). See Routing & links.

Emits

Name	Payload	Description
`logout`	—	The user clicked "Sign out" in the topbar menu.
`profile`	—	The user clicked "Profile" in the topbar menu.

Slots

Name	Description
default	Page content (rendered inside `<main class="app-main">`).
`topbar-start`	Extra nav items at the start of the topbar.
`topbar-end`	Extra nav items at the end of the topbar.
`user-menu`	Replace the entire user dropdown body (forwarded to `LteTopbar`). Slot prop: `user`.
`user-header`	Replace the `user-header` block of the user dropdown. Slot prop: `user`.
`user-body`	Replace the `user-body` block (the stock Followers / Sales / Friends row). Slot prop: `user`.
`user-footer`	Replace the `user-footer` block (the stock Profile / Sign out buttons). Slot props: `user`, `profile`, `logout`.
`sidebar-brand`	Replace the entire sidebar brand area.
`logo`	Custom logo markup inside the brand.
`footer`	Footer content (forwarded to `LteFooter`).
`footer-right`	Right-aligned footer content (forwarded to `LteFooter`'s `right` slot; overrides `footerRightText`).

The user-dropdown slots let you replace AdminLTE's demo content without rebuilding the topbar. The user-footer slot receives profile and logout callbacks so custom buttons still raise the layout's profile / logout events:

<LteDashboardLayout :menu-items="menu" :user="user" footer-right-text="v2.1.0" @logout="signOut">
  <template #user-body>
    <div class="row">
      <div class="col-6 text-center"><NuxtLink to="/billing">Billing</NuxtLink></div>
      <div class="col-6 text-center"><NuxtLink to="/team">Team</NuxtLink></div>
    </div>
  </template>

  <template #user-footer="{ logout }">
    <NuxtLink to="/account" class="btn btn-outline-secondary">Account</NuxtLink>
    <button type="button" class="btn btn-outline-danger float-end" @click="logout()">Log out</button>
  </template>

  <LteAppContent title="Dashboard" />
</LteDashboardLayout>

LteSidebar

The off-canvas navigation aside. Renders the brand, a scroll wrapper (auto-hiding OverlayScrollbars on desktop when installed), and the recursive nav tree. Normally rendered for you by LteDashboardLayout.

<LteSidebar :items="menu" brand-text="Acme" :current-path="$route.path" theme="dark" />

Props

Name	Type	Default	Description
`items`	`MenuNode[]`	—	Navigation tree.
`logo`	`string`	—	Logo image src.
`logoHref`	`string`	`'/'`	Brand link target.
`brandText`	`string`	—	Brand text next to the logo.
`theme`	`'light' \| 'dark'`	`'dark'`	Sidebar color theme.
`sidebarClass`	`string`	`'bg-body-secondary shadow'`	Extra classes on the `<aside>`.
`currentPath`	`string`	`'/'`	Active-link detection path.
`accordion`	`boolean`	`false`	One open group per parent.
`linkComponent`	`string \| Component`	`'a'`	Link component for nav items.
`navigate`	`(href: string) => void`	—	Navigation callback for in-app nav links (e.g. `router.push`).
`animationSpeed`	`number`	`300`	Treeview expand/collapse duration in ms.

Slots

Name	Description
`brand`	Replace the brand area entirely.
`logo`	Custom logo markup (inside the default brand).
default	Replace the nav tree with custom markup.

LteTopbar

The fixed application navbar: sidebar toggle, optional search/command-palette trigger, fullscreen and color-mode toggles, and the user dropdown menu. Rendered for you by LteDashboardLayout.

Props

Name	Type	Default	Description
`user`	`TopbarUser`	—	User shown in the menu (falls back to a demo user).
`colorModeToggle`	`boolean`	`true`	Show the light/dark toggle.
`search`	`boolean`	`true`	Show the search button (opens the command palette).
`fullscreen`	`boolean`	`true`	Show the fullscreen toggle.
`navbarClass`	`string`	—	Extra classes on the `<nav>`.

Emits

Name	Payload	Description
`logout`	—	"Sign out" clicked.
`profile`	—	"Profile" clicked.

Slots

Name	Description
`start`	Extra nav items after the sidebar toggle.
`end`	Extra nav items before the built-in toggles.
`user-menu`	Replace the whole user dropdown body. Slot prop: `user`.
`user-header`	Replace the `user-header` block. Slot prop: `user`.
`user-body`	Replace the `user-body` block. Slot prop: `user`.
`user-footer`	Replace the `user-footer` block. Slot props: `user`, `profile`, `logout`.

All four are forwarded by LteDashboardLayout under the same names, so you rarely mount LteTopbar yourself just to customize the dropdown.

The TopbarUser interface:

interface TopbarUser {
  name: string
  image: string
  role?: string
  memberSince?: string
}

LteAppContent

The content region for a page: an optional header (title + breadcrumbs) and a Bootstrap container wrapping your content.

<LteAppContent
  title="Dashboard"
  :breadcrumbs="[{ label: 'Home', href: '/' }, { label: 'Dashboard' }]"
>
  <!-- page content -->
</LteAppContent>

Props

Name	Type	Default	Description
`title`	`string`	—	Page title rendered as an `<h3>` in the header.
`breadcrumbs`	`Breadcrumb[]`	—	Breadcrumb trail; the last entry is marked active.
`fluid`	`boolean`	`true`	`true` → `container-fluid`, `false` → `container-lg`.

Slots

Name	Description
`header`	Replace the header left column (overrides `title`).
default	Page content (inside the container).

The Breadcrumb interface:

interface Breadcrumb {
  label: string
  href?: string
}

LteFooter

The application footer. Defaults to the AdminLTE copyright line; override via slots. Rendered for you by LteDashboardLayout (its footer slot is forwarded here).

Props

Name	Type	Default	Description
`rightText`	`string`	`'Anything you want'`	Right-aligned text (hidden on extra-small screens).
`year`	`number \| string`	current year	Year used in the default copyright line.

Slots

Name	Description
default	Main footer content (replaces the default copyright).
`right`	Right-aligned content (replaces `rightText`).

LteAuthLayout

A standalone wrapper for sign-in / register pages. It applies the page-level body classes (login-page / register-page plus bg-body-secondary) on mount and renders a centered card.

<template>
  <LteAuthLayout auth-type="login" variant="v2" logo="/logo.svg">
    <!-- login form -->
  </LteAuthLayout>
</template>

Props

Name	Type	Default	Description
`authType`	`'login' \| 'register'`	`'login'`	Drives the body class and box/card-body class prefixes.
`variant`	`'default' \| 'v2'`	`'default'`	`'default'` → logo above a plain card; `'v2'` → `card-outline card-primary` with the logo in the card header.
`logo`	`string`	—	Logo image src (used by the default logo slot).
`logoHref`	`string`	`'/'`	Logo link target.

Slots

Name	Description
`logo`	Custom logo markup (overrides the default image / AdminLTE text).
default	The form / card body content.