AdminLTE Vue

AdminLTE 4 + Bootstrap 5.3 admin dashboard for Vue 3 & Nuxt.

45+ typed components · composables (no Pinia) · dark mode · ⌘K command palette · SSR-safe theming

Status: v0.8.0 (Early Release) · Live demo: adminlte.io/themes/vue-nuxt

🔗 Live demo → · Get started → · Changelog →

A faithful Vue/Nuxt port of AdminLTE 4, mirroring the official React and Laravel editions. Use the framework-agnostic component library in any Vue 3 app, or drop in the Nuxt module for zero-config auto-imports and SSR-safe theming — same components, same markup, only the setup differs.

Also available for your stack

The same AdminLTE 4 dashboard, in the framework you know best — you're looking at the Vue & Nuxt edition:

Also available as the original AdminLTE (HTML · Bootstrap 5.3 · vanilla JS — demo) and the legacy AdminLTE v3 (Bootstrap 4 · jQuery — demo). Need a full backend and dozens more pages, not just the toolkit? See the premium Vue & Nuxt dashboards below.

Packages

This is a pnpm monorepo:

Package	Path	Description
`@adminlte/vue`	`packages/adminlte-vue`	Framework-agnostic Vue 3 component library — works in any Vite / Nuxt / Vue 3 app.
`@adminlte/nuxt`	`packages/nuxt`	Nuxt module: auto-imports, CSS injection, Bootstrap init, SSR-safe dark mode.
`demo`	`apps/demo`	Nuxt 4 demo — a 1:1 clone of the official AdminLTE 4 demo, built from the library's own components.
`docs`	`apps/docs`	@nuxt/content documentation site (API reference for every component & composable).

Features

🧩 45+ components across layout, widgets, forms, and tools — all typed with <script setup lang="ts">.
🪝 Composables, not jQuery — useSidebar, useColorMode, useCardWidget, useFullscreen, … via provide/inject (no Pinia).
🌙 Native dark mode through Bootstrap's data-bs-theme, with a blocking head script so there's no flash on SSR.
⌘ Command palette (⌘K / Ctrl+K) generated from your menu.
📊 Plugin wrappers — Chart.js, Tabulator, Quill, Flatpickr, Tom Select, FullCalendar, jsVectorMap, SortableJS — lazy-loaded and SSR-safe.
📈 Charts are Chart.js (MIT) — LteChart and LteSparklineChart share one AdminLTE theme preset that follows dark mode and RTL live.
📦 No required runtime dependencies — beyond the Vue peer; nothing extra forced into your bundle. Plugin libs are optional peers.
♿ Accessibility — skip links, live region, reduced-motion support out of the box.
🎨 No SCSS to maintain — styling comes from the prebuilt admin-lte package (core 4.8.1).
🌈 Opt-in color palettes — @adminlte/vue/css/colors (14 extra WCAG-AA colors) or @adminlte/vue/css/colors/v3 (the AdminLTE 3 palette); data-lte-primary="teal" on <html> makes any of them Bootstrap's primary.

Quick start — Nuxt

npm i @adminlte/nuxt @adminlte/vue bootstrap

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@adminlte/nuxt'],
  adminlte: {
    defaults: { sidebarTheme: 'dark', fixedHeader: true, fixedSidebar: true, initialColorMode: 'auto' },
  },
  css: ['bootstrap-icons/font/bootstrap-icons.css', 'overlayscrollbars/overlayscrollbars.css'],
})

<!-- app/layouts/default.vue -->
<script setup lang="ts">
import type { MenuNode } from '@adminlte/vue'
const route = useRoute()
const NuxtLink = resolveComponent('NuxtLink')
const menu: MenuNode[] = [
  { type: 'item', text: 'Dashboard', href: '/', icon: 'bi-speedometer' },
  { type: 'group', text: 'Pages', icon: 'bi-files', children: [
    { type: 'item', text: 'Profile', href: '/profile' },
  ] },
]
</script>

<template>
  <LteDashboardLayout :menu-items="menu" :current-path="route.path" :link-component="NuxtLink">
    <slot />
  </LteDashboardLayout>
</template>

<!-- app/pages/index.vue -->
<template>
  <LteAppContent title="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" collapsible>It works!</LteCard>
  </LteAppContent>
</template>

Components and composables are auto-imported by the module — no import statements needed.

Quick start — plain Vue 3 (Vite)

npm i @adminlte/vue bootstrap

// main.ts
import { createApp } from 'vue'
import AdminLteVue from '@adminlte/vue'
import '@adminlte/vue/css'
import 'bootstrap-icons/font/bootstrap-icons.css'
import 'bootstrap' // dropdowns/modals/offcanvas
import App from './App.vue'

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

Pass :current-path from your router and :link-component="RouterLink" to <LteDashboardLayout>. SSR-safety is built into the library, so this works under Vite SSR / vue-router SSR too — the Nuxt module just automates the wiring above.

Components

Layout — LteDashboardLayout, LteAuthLayout, LteAppContent, LteSidebar, LteSidebarBrand, LteSidebarNav, LteSidebarNavItem, LteSidebarOverlay, LteTopbar, LteFooter, LteColorModeToggle, LteFullscreenToggle

Widgets — LteCard, LteSmallBox, LteInfoBox, LteAlert, LteCallout, LteProgress, LteProgressGroup, LteTimeline, LteRatings, LteProfileCard, LteDescriptionBlock, LteDirectChat, LteNavMessages, LteNavNotifications, LteNavTasks, LteToast, LteTabs, LteTab, LteAccordion, LteAccordionItem, LteBreadcrumb, LteCommandPalette

Forms — LteButton, LteInput, LteTextarea, LteSelect, LteInputSwitch, LteInputColor, LteInputFile, LteInputFlatpickr, LteInputTomSelect

Tools — LteModal, LteWizard, LteWizardStep

Plugins (@adminlte/vue/plugins) — LteChart, LteSparklineChart, LteDatatable, LteEditor, LteFlatpickr, LteTomSelect, LteCalendar, LteVectorMap, LteSortable, LteKanban

Composables

Composable	Purpose
`useSidebar()`	Sidebar collapse / mobile-overlay / mini state + `toggle/collapse/expand`.
`useColorMode()`	`colorMode` / `resolvedMode` / `setColorMode` (light · dark · auto).
`useCardWidget()`	Per-card collapse / maximize / remove.
`useFullscreen()`	Fullscreen API wrapper.
`useDirectChat()`	Direct-chat contacts pane toggle.
`useSortable(el, opts)`	SortableJS on a ref (lazy-loaded).
`useCommandPalette()`	Open/close the ⌘K palette.
`useDirection(dir)`	Apply `dir` to `<html>` while mounted; restores it on unmount.
`treeviewTransition(speed)`	Height transition hooks for the sidebar treeview.

useSidebar / useColorMode / useCommandPalette are provided by <LteDashboardLayout>.

Screenshots

Every screenshot is a real page from the running demo — browse the live demo →

Dark mode

Dark mode toggles Bootstrap's data-bs-theme on <html> and persists the preference under the lte-theme localStorage key. Under Nuxt, the module injects a blocking inline head script that sets the attribute before first paint — no flash of the wrong theme. Add <LteColorModeToggle> (it's already in <LteTopbar>) for a light/dark/auto switcher.

Documentation

A full API reference for every component and composable — Installation, Guide (Nuxt module, color mode, SSR-safety, routing), Components, Composables, and Resources — lives in the docs site (apps/docs, built with @nuxt/content):

📖 adminlte.io/themes/vue-nuxt/docs — or run it locally:

pnpm dev:docs     # http://localhost:3000/docs/

CLAUDE.md documents the architecture and build pipeline.

Development

pnpm install
pnpm build        # build the library + Nuxt module (dependency order)
pnpm dev:demo     # run the demo
pnpm dev:docs     # run the docs site

Browser support

Modern evergreen browsers (Chrome, Firefox, Safari, Edge). Same matrix as Bootstrap 5.3.

Premium Vue & Nuxt Dashboards

This library is free and MIT-licensed. When you need a production dashboard with a real backend, many more pages, and dedicated support — server-driven CRUD, authentication, role-based access, and dozens of polished screens out of the box — these commercial Vue & Nuxt editions from DashboardPack pick up where the free toolkit leaves off.

Haze — Nuxt _{Nuxt 4 + Vue 3 + Nuxt UI v4 + Tailwind CSS v4. 92+ pages, 7 layouts, 5 dashboards, full CRUD with a mock API, i18n, RTL, live theme customizer.}	ArchitectUI — Vue Pro _{Vue 3.5 + Vuetify 4 (Material Design 3) + Vite 7 + Pinia. 9 dashboard layouts, 50+ components, 9 color schemes, dark mode.}
Apex Dashboard — Next.js _{Next.js 16 + React 19 + Tailwind CSS v4 + shadcn/ui. 5 dashboard variants, 20+ app pages, 125+ routes, full CRUD.}	Admindek — HTML _{Bootstrap 5 + vanilla JS. 100+ components, dark/light modes, RTL support, 10 color presets.}

_{Prefer the official AdminLTE-branded premium themes? Browse AdminLTE Premium.}

View All Premium Templates →

Contributing

Issues and PRs welcome. After changes, run pnpm --filter adminlte-vue type-check, pnpm --filter adminlte-vue test, pnpm lint, and pnpm build:demo (the SSR/hydration gate). See CLAUDE.md for where things live and the three touch-points for adding a component.

Name		Name	Last commit message	Last commit date
.github		.github
apps		apps
docs/screenshots		docs/screenshots
packages		packages
scripts		scripts
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
CLAUDE.md		CLAUDE.md
LICENSE		LICENSE
README.md		README.md
eslint.config.js		eslint.config.js
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
tsconfig.base.json		tsconfig.base.json

Navigation Menu

Repository navigation

About

Repository files navigation

AdminLTE Vue

Also available for your stack

Packages

Features

Quick start — Nuxt

Quick start — plain Vue 3 (Vite)

Components

Composables

Screenshots

Dark mode

Documentation

Development

Browser support

Premium Vue & Nuxt Dashboards

Contributing

License

Resources

Support

About

Releases

Packages

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

AdminLTE Vue

Also available for your stack

Packages

Features

Quick start — Nuxt

Quick start — plain Vue 3 (Vite)

Components

Composables

Screenshots

Dark mode

Documentation

Development

Browser support

Premium Vue & Nuxt Dashboards

Contributing

License

Resources

Support

About

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages