Layout
The dashboard shell is <LteDashboardLayout> — it renders the topbar, sidebar and footer, provides the sidebar / color-mode / command-palette state to everything inside it, and projects your page through its default slot. Wrap each page's body in <LteAppContent> for the standard header + container.
The dashboard layout
<script setup lang="ts">
import type { MenuNode, TopbarUser } from '@adminlte/vue'
const route = useRoute()
const NuxtLink = resolveComponent('NuxtLink')
const menu: MenuNode[] = [
{ type: 'item', text: 'Dashboard', href: '/', icon: 'bi-speedometer' },
]
const user: TopbarUser = { name: 'Jane Doe', image: '/img/avatar.png', role: 'Administrator' }
</script>
<template>
<LteDashboardLayout
:menu-items="menu"
:current-path="route.path"
:link-component="NuxtLink"
:user="user"
sidebar-theme="dark"
>
<slot />
</LteDashboardLayout>
</template>Key props of LteDashboardLayout
| Prop | Type | Purpose |
|---|---|---|
menuItems | MenuNode[] | The sidebar menu tree — see Menu & Sidebar. |
currentPath | string | Current route path, for active-link detection (replaces React's usePathname()). |
user | TopbarUser | { name, image, role?, memberSince? } shown in the topbar user menu. |
logo / logoHref | string | Brand image src and its link target. |
sidebarTheme | 'light' | 'dark' | Sidebar color (independent of global color mode). |
sidebarMini | bool | Icon-only mini sidebar when collapsed. |
sidebarBreakpoint | BreakpointSize | Width below which the sidebar is a mobile overlay. |
fixedHeader / fixedSidebar / fixedFooter / layoutFixed | bool | Pin the corresponding region / use the fixed shell. |
colorModeToggle / initialColorMode | bool / ColorMode | Show the toggle / set the initial mode. |
enableSidebarPersistence | bool | Remember collapse state. |
dir | 'ltr' | 'rtl' | Text direction. |
Slots
Beyond the default slot (your page content), the layout exposes named slots so you can extend the shell without rebuilding it:
| Slot | What it fills |
|---|---|
| default | The main page content area. |
topbar-start / topbar-end | Extra controls at the start / end of the topbar (e.g. notification dropdowns). |
sidebar-brand / logo | Custom brand block / logo in the sidebar header. |
footer | Custom footer content. |
The page content wrapper
<LteAppContent> renders the content header (title + breadcrumbs) and the container that holds your page:
<template>
<LteAppContent
title="Dashboard"
:breadcrumbs="[{ label: 'Home', href: '/' }, { label: 'Dashboard' }]"
>
<div class="row">
<div class="col-lg-3 col-6">
<LteSmallBox title="150" text="New Orders" theme="primary" icon="bi-bag" url="#" />
</div>
</div>
<LteCard title="Welcome" theme="primary" variant="outline" collapsible>
Built with AdminLTE 4 for Vue.
</LteCard>
</LteAppContent>
</template>LteAppContent takes title, breadcrumbs ({ label, href? }[]) and fluid; a header slot overrides the default header row entirely.
The auth layout
For login / register screens use <LteAuthLayout> — a centered card outside the dashboard shell. It takes authType ('login' | 'register'), variant ('default' | 'v2'), logo and logoHref:
<LteAuthLayout auth-type="login" variant="v2">
<form>…</form>
</LteAuthLayout>LteDashboardLayout calls provideSidebar, provideColorMode and provideCommandPalette internally, so useSidebar(), useColorMode() and useCommandPalette() work in any descendant. It also reflects layout state onto <body> (e.g. sidebar-collapse, sidebar-open) and clears those classes on unmount, so navigating to an auth page won't leak dashboard classes.