Nuxt module

Configure @adminlte/nuxt — auto-registration, auto-imports, CSS, the color-mode head script.

@adminlte/nuxt is a thin Nuxt module that wires the adminlte-vue component library into your app: it auto-registers every Lte* component, auto-imports the composables, injects the AdminLTE CSS, loads Bootstrap's client-side JS, and adds an SSR-safe color-mode head script. After adding it you can use the components and composables in any page or component with no manual imports.

Installation

Install the module and the underlying library, then add the module to nuxt.config.ts.

pnpm add @adminlte/nuxt adminlte-vue

export default defineNuxtConfig({
  modules: ['@adminlte/nuxt'],
})

That's it — with zero configuration the module registers all components, auto-imports the composables, injects the CSS, loads Bootstrap, and adds the theme head script.

Configuration

Options live under the adminlte key in nuxt.config.ts.

export default defineNuxtConfig({
  modules: ['@adminlte/nuxt'],
  adminlte: {
    prefix: 'Lte',
    components: true,
    composables: true,
    css: true,
    bootstrap: true,
    themeScript: true,
    defaults: {
      layoutFixed: true,
      sidebarTheme: 'dark',
      sidebarBreakpoint: 'lg',
      initialColorMode: 'auto',
      enableSidebarPersistence: false,
    },
  },
})

Module options

These are the fields of AdminlteModuleOptions.

Name	Type	Default	Description
`prefix`	`string`	`'Lte'`	Component name prefix used when auto-registering. With the default `'Lte'`, names are used as-is (`LteCard`); any other value replaces the leading `Lte` (e.g. `'App'` → `AppCard`).
`components`	`boolean`	`true`	Auto-register all `Lte*` components globally. Set `false` to opt out.
`composables`	`boolean`	`true`	Auto-import the composables (`useSidebar`, `useColorMode`, …).
`css`	`boolean`	`true`	Inject `adminlte-vue/css` automatically into `nuxt.options.css`.
`bootstrap`	`boolean`	`true`	Load Bootstrap's JS bundle client-side (powers dropdowns, modals, offcanvas, tooltips).
`themeScript`	`boolean`	`true`	Inject the blocking head script that sets `data-bs-theme` before first paint.
`defaults`	`AdminlteLayoutDefaults`	see below	Default layout + theme flags, surfaced via `useAdminlteConfig()`.

Layout defaults

defaults accepts the fields of AdminlteLayoutDefaults. These values are written to runtimeConfig.public.adminlte and read back at runtime through useAdminlteConfig().

Name	Type	Default	Description
`sidebarTheme`	`'light' \| 'dark'`	`'dark'`	Sidebar color theme.
`sidebarMini`	`boolean`	—	Enable the collapsed mini-sidebar variant.
`sidebarBreakpoint`	`'lg' \| 'md'`	`'lg'`	Breakpoint at which the sidebar expands.
`fixedHeader`	`boolean`	—	Fix the topbar to the top of the viewport.
`fixedSidebar`	`boolean`	—	Fix the sidebar so it does not scroll with the page.
`fixedFooter`	`boolean`	—	Fix the footer to the bottom of the viewport.
`layoutFixed`	`boolean`	`true`	Apply the `layout-fixed` body class.
`initialColorMode`	`'light' \| 'dark' \| 'auto'`	`'auto'`	Initial color mode; also the fallback used by the theme head script.
`enableSidebarPersistence`	`boolean`	`false`	Persist the sidebar collapse state in `localStorage`.
`dir`	`'ltr' \| 'rtl'`	—	Text direction.

What the module registers

Auto-registered components

When components is enabled, the module registers every component globally so you can use them in templates without importing. Core components resolve from the adminlte-vue entry; plugin wrappers resolve from adminlte-vue/plugins.

Core components: LteDashboardLayout, LteAuthLayout, LteAppContent, LteSidebar, LteSidebarBrand, LteSidebarNav, LteSidebarNavItem, LteSidebarOverlay, LteTopbar, LteFooter, LteColorModeToggle, LteFullscreenToggle, LteCard, LteSmallBox, LteInfoBox, LteAlert, LteCallout, LteProgress, LteProgressGroup, LteTimeline, LteRatings, LteProfileCard, LteDescriptionBlock, LteDirectChat, LteNavMessages, LteNavNotifications, LteNavTasks, LteToast, LteTabs, LteTab, LteAccordion, LteAccordionItem, LteBreadcrumb, LteCommandPalette, LteButton, LteInput, LteTextarea, LteSelect, LteInputSwitch, LteInputColor, LteInputFile, LteInputFlatpickr, LteInputTomSelect, LteModal, LteWizard, LteWizardStep.

Plugin-wrapper components (heavy third-party libs, dynamically imported client-side): LteApexChart, LteSparklineChart, LteDatatable, LteEditor, LteFlatpickr, LteTomSelect, LteCalendar, LteVectorMap, LteSortable, LteKanban.

Auto-imported composables

When composables is enabled, these are auto-imported from adminlte-vue: useSidebar, useColorMode, useCardWidget, useTreeviewRegistry, useFullscreen, useDirectChat, useSortable, useCommandPalette.

The module also always auto-imports useAdminlteConfig (see below), independent of the composables option.

CSS

When css is enabled, the module pushes adminlte-vue/css onto nuxt.options.css, so the prebuilt AdminLTE stylesheet loads automatically.

Bootstrap JS

When bootstrap is enabled, the module registers a client-only plugin that imports Bootstrap's JS bundle. Its data-API delegation is what powers dropdowns, modals, offcanvas, and tooltips. The module also adds bootstrap and @popperjs/core to vite.optimizeDeps.include.

Build transpilation

The module always pushes adminlte-vue into build.transpile. The library ships compiled SFC ESM that uses Vue runtime helpers, so it must be transpiled by your build rather than externalized by Nitro. This is not configurable.

Theme head script

When themeScript is enabled (the default), the module injects a small blocking inline script into <head> that runs before first paint. It reads the persisted preference from the lte-theme localStorage key (falling back to defaults.initialColorMode, or 'auto'), resolves 'auto' against prefers-color-scheme, and sets data-bs-theme on <html>. This eliminates the flash of incorrect theme on load. After hydration, useColorMode owns reactive theme updates.

The script is tagged lte-theme-init and its innerHTML is exempted from Nuxt's head sanitizer so it is not minified or reordered away.

useAdminlteConfig()

useAdminlteConfig() reads the layout defaults you configured under adminlte.defaults back at runtime. It returns the AdminlteLayoutDefaults object (or an empty object if none were set).

<script setup lang="ts">
const config = useAdminlteConfig()
// config.sidebarTheme, config.sidebarBreakpoint, config.initialColorMode, …
</script>

The composable is auto-imported by the module, so no manual import is needed. Under the hood it reads runtimeConfig.public.adminlte, which the module populates by merging your defaults with the module's built-in defaults.