Components overview

The full set of Lte* components and how they are organized.

adminlte-vue ships a complete set of Vue 3 components for building AdminLTE 4 dashboards. Every component is prefixed Lte and is grouped into five categories: layout, widget, form, tool, and plugin wrappers.

Two entry points

Core components (layout, widget, form, tool) come from the package root. Plugin wrappers — thin components around heavy third-party libraries — live in a separate /plugins entry so those dependencies stay out of your default import.

import { LteDashboardLayout, LteCard, LteButton } from 'adminlte-vue'
import { LteApexChart, LteDatatable } from 'adminlte-vue/plugins'

In Nuxt with @adminlte/nuxt, all of these are auto-registered, so you can use the tags in any page without importing them.

Registering everything (plain Vue 3)

The default export is a Vue plugin that globally registers all core components. Plugin wrappers are not registered by the plugin — import them explicitly.

import { createApp } from 'vue'
import AdminLte from 'adminlte-vue'
import 'adminlte-vue/css'
import App from './App.vue'

createApp(App).use(AdminLte).mount('#app')

Layout

The structural shell of a dashboard. LteDashboardLayout is the single provider host — wrap your app in it. Import from adminlte-vue.

Component	Purpose
`LteDashboardLayout`	Top-level dashboard shell and state provider
`LteAuthLayout`	Centered shell for login / register pages
`LteAppContent`	Page content wrapper with header
`LteSidebar`	Main sidebar container
`LteSidebarBrand`	Sidebar brand / logo area
`LteSidebarNav`	Sidebar navigation list
`LteSidebarNavItem`	Recursive nav item (renders the menu tree)
`LteSidebarOverlay`	Mobile backdrop for the open sidebar
`LteTopbar`	Top navigation bar
`LteFooter`	Page footer
`LteColorModeToggle`	Light / dark / auto theme toggle
`LteFullscreenToggle`	Enter / exit browser fullscreen

Cards, boxes, stats and nav-dropdown widgets. Import from adminlte-vue.

Component	Purpose
`LteCard`	Standard AdminLTE card
`LteSmallBox`	Stat box with icon and link
`LteInfoBox`	Compact info / metric box
`LteAlert`	Dismissible alert
`LteCallout`	Bordered callout note
`LteProgress`	Single progress bar
`LteProgressGroup`	Labeled progress group
`LteTimeline`	Vertical timeline
`LteRatings`	Star rating display
`LteProfileCard`	User profile card
`LteDescriptionBlock`	Description / stat block
`LteDirectChat`	Direct-chat message panel
`LteNavMessages`	Topbar messages dropdown
`LteNavNotifications`	Topbar notifications dropdown
`LteNavTasks`	Topbar tasks dropdown
`LteToast`	Bootstrap toast
`LteTabs` / `LteTab`	Tab container and panel
`LteAccordion` / `LteAccordionItem`	Accordion container and item
`LteBreadcrumb`	Breadcrumb trail
`LteCommandPalette`	⌘K command palette

LteCommandPalette is accompanied by a flattenMenuToCommands helper (also exported from adminlte-vue) that turns a menu array into palette commands.

import { LteCommandPalette, flattenMenuToCommands } from 'adminlte-vue'

Form

Form controls, plain and enhanced. Import from adminlte-vue.

Component	Purpose
`LteButton`	Button
`LteInput`	Text input
`LteTextarea`	Textarea
`LteSelect`	Native select
`LteInputSwitch`	Toggle switch
`LteInputColor`	Color picker input
`LteInputFile`	File input
`LteInputFlatpickr`	Date input (Flatpickr-backed)
`LteInputTomSelect`	Enhanced select (Tom Select-backed)

Tool

Interactive utilities, imported from adminlte-vue (listed here — no separate detail page).

Component	Purpose
`LteModal`	Bootstrap modal
`LteWizard` / `LteWizardStep`	Multi-step wizard and step

Plugin

Wrappers around heavy third-party libraries. Each one dynamically imports its dependency on the client, so you must install the matching peer library yourself and load its CSS. In SSR apps (Nuxt), wrap them in <ClientOnly>. Import from adminlte-vue/plugins.

Component	Peer library
`LteApexChart`	`apexcharts`
`LteSparklineChart`	`apexcharts`
`LteDatatable`	`tabulator-tables`
`LteEditor`	`quill`
`LteFlatpickr`	`flatpickr`
`LteTomSelect`	`tom-select`
`LteCalendar`	`@fullcalendar/*`
`LteVectorMap`	`jsvectormap`
`LteSortable`	`sortablejs`
`LteKanban`	`sortablejs`

LteKanban also exports its KanbanCard and KanbanColumn types.

<template>
  <ClientOnly>
    <LteApexChart :options="options" :series="series" />
  </ClientOnly>
</template>

<script setup lang="ts">
import { LteApexChart } from 'adminlte-vue/plugins'
</script>

pnpm add apexcharts