Configuration

In plain Vue you configure the dashboard through props on <LteDashboardLayout>. In Nuxt you set the same flags once under the adminlte key in nuxt.config.ts, and read them back anywhere with useAdminlteConfig().

Nuxt module options

The module is configured under the adminlte key. The top-level options toggle what the module wires up; defaults carries the layout/theme flags surfaced to the runtime.

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@adminlte/nuxt'],
  adminlte: {
    prefix: 'Lte',         // component name prefix (default 'Lte')
    components: true,      // auto-register all Lte* components
    composables: true,    // auto-import useSidebar, useColorMode, …
    css: true,            // inject @adminlte/vue/css
    bootstrap: true,      // load Bootstrap JS client-side
    themeScript: true,    // blocking head script — no theme flash
    defaults: {
      sidebarTheme: 'dark',
      sidebarMini: false,
      sidebarBreakpoint: 'lg',   // 'lg' | 'md'
      fixedHeader: true,
      fixedSidebar: true,
      fixedFooter: false,
      layoutFixed: true,
      initialColorMode: 'auto',  // 'light' | 'dark' | 'auto'
      enableSidebarPersistence: false,
      dir: 'ltr',                // 'ltr' | 'rtl'
    },
  },
})

Module option reference

Option	Type	Default	Purpose
`prefix`	string	`Lte`	Prefix used when auto-registering components.
`components`	bool	`true`	Auto-register all `Lte*` components globally.
`composables`	bool	`true`	Auto-import the composables.
`css`	bool	`true`	Inject `@adminlte/vue/css`.
`bootstrap`	bool	`true`	Load Bootstrap's JS bundle client-side.
`themeScript`	bool	`true`	Inject the blocking head script that sets `data-bs-theme` before paint.
`defaults`	object	see above	Layout + theme flags, read via `useAdminlteConfig()`.

Layout defaults

Key	Type	Purpose
`sidebarTheme`	`'light' \| 'dark'`	Sidebar color, independent of the global color mode.
`sidebarMini`	bool	Collapse to an icon-only mini sidebar.
`sidebarBreakpoint`	`'lg' \| 'md'`	Width below which the sidebar becomes a mobile overlay.
`fixedHeader` / `fixedSidebar` / `fixedFooter`	bool	Pin the corresponding region.
`layoutFixed`	bool	Use the fixed AdminLTE layout shell.
`initialColorMode`	`'light' \| 'dark' \| 'auto'`	Fallback color mode before a stored preference exists.
`enableSidebarPersistence`	bool	Remember collapse state in `localStorage`.
`dir`	`'ltr' \| 'rtl'`	Text direction.

Reading the config (Nuxt)

The defaults are surfaced through the auto-imported useAdminlteConfig() composable, so you can spread them straight onto the layout:

<script setup lang="ts">
const cfg = useAdminlteConfig()
const route = useRoute()
</script>

<template>
  <LteDashboardLayout v-bind="cfg" :menu-items="menu" :current-path="route.path">
    <slot />
  </LteDashboardLayout>
</template>

Plain Vue: pass the same flags as props

Without Nuxt there is no config file — the identical flags are props on the layout component:

<LteDashboardLayout
  :menu-items="menu"
  :current-path="route.path"
  sidebar-theme="dark"
  :fixed-header="true"
  :fixed-sidebar="true"
  initial-color-mode="auto"
  :enable-sidebar-persistence="true"
/>

The Nuxt module's defaults are merged with defu into runtimeConfig.public.adminlte, so anything you set in your own runtimeConfig overrides the module defaults — handy for per-environment tweaks.

AdminLTE 4 · Vue port Edit on GitHub