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.
`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.
`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 (e.g. `router.push`).

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.
`sidebar-brand`	Replace the entire sidebar brand area.
`logo`	Custom logo markup inside the brand.
`footer`	Footer content (forwarded to `LteFooter`).

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.
`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.

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.