State composables

useSidebar, useColorMode, useCommandPalette — the provided dashboard state.

LteDashboardLayout is the single provider host for the dashboard's shared state. In its setup() it calls provideSidebar(), provideColorMode(), and provideCommandPalette(), and descendant components consume that state via the useSidebar, useColorMode, and useCommandPalette composables.

Because they rely on inject, the use* composables only work inside the layout's component tree. useSidebar() and useColorMode() throw if used outside <LteDashboardLayout>; useCommandPalette() returns undefined instead so a topbar button can degrade gracefully.

useSidebar

Reactive sidebar state and the responsive collapse logic ported from AdminLTE's push-menu.ts.

function useSidebar(): SidebarApi

Usage

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

const { isCollapsed, isMobile, toggle } = useSidebar()
</script>

<template>
  <button type="button" class="btn" @click="toggle">
    <i class="bi" :class="isCollapsed ? 'bi-list' : 'bi-x-lg'" />
    <span v-if="isMobile">Menu</span>
  </button>
</template>

Returned API (`SidebarApi`)

Name	Type	Description
`isCollapsed`	`Ref<boolean>`	Desktop collapse state → `body.sidebar-collapse`.
`isMobileOpen`	`Ref<boolean>`	Mobile off-canvas open state → `body.sidebar-open`.
`isMiniMode`	`Ref<boolean>`	Whether the sidebar is in mini (icon-only) mode → `body.sidebar-mini`.
`isMobile`	`ComputedRef<boolean>`	Reactive: is the viewport at/below the sidebar breakpoint?
`sidebarBreakpoint`	`number`	The breakpoint, in pixels.
`toggle`	`() => void`	On mobile toggles the overlay; on desktop toggles the collapse state.
`collapse`	`() => void`	Collapse the sidebar (and close the mobile overlay).
`expand`	`() => void`	Expand the sidebar (and close the mobile overlay).

The provider (provideSidebar, called by the layout) reflects this state onto <body> and accepts the following options.

Provider options (`ProvideSidebarOptions`)

Name	Type	Default	Description
`sidebarMini`	`boolean`	`false`	Start in mini (icon-only) mode.
`enablePersistence`	`boolean`	`false`	Persist the collapse state under the `lte.sidebar.state` localStorage key.
`sidebarBreakpoint`	`number`	`992`	Breakpoint in pixels below which the sidebar behaves as a mobile overlay.
`staticBodyClasses`	`MaybeRefOrGetter<string>`	—	Static body classes (e.g. `layout-fixed sidebar-expand-lg`) reflected onto `<body>` alongside the dynamic state classes.

useColorMode

Light/dark/auto theme state. Writes Bootstrap's data-bs-theme attribute on <html> and persists the preference under the lte-theme localStorage key. In Nuxt, a blocking inline head script (added by @adminlte/nuxt) sets data-bs-theme before first paint to avoid a flash; this composable owns the reactive updates thereafter.

function useColorMode(): ColorModeApi

Usage

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

const { colorMode, resolvedMode, setColorMode } = useColorMode()
</script>

<template>
  <div class="btn-group">
    <button type="button" @click="setColorMode('light')">Light</button>
    <button type="button" @click="setColorMode('dark')">Dark</button>
    <button type="button" @click="setColorMode('auto')">Auto</button>
    <span>Active: {{ resolvedMode }} (preference: {{ colorMode }})</span>
  </div>
</template>

Returned API (`ColorModeApi`)

Name	Type	Description
`colorMode`	`Ref<ColorMode>`	The current preference: `'light' \| 'dark' \| 'auto'`.
`resolvedMode`	`ComputedRef<ResolvedColorMode>`	The concrete mode after `auto` is evaluated against the system setting: `'light' \| 'dark'`.
`setColorMode`	`(mode: ColorMode) => void`	Set the preference.

Provider options (`ProvideColorModeOptions`)

Name	Type	Default	Description
`initialMode`	`ColorMode`	`'auto'`	The initial preference before the persisted value is read on mount.

useCommandPalette

State for the ⌘K command palette. The provider registers a global ⌘K / Ctrl+K shortcut to toggle it and Escape to close it.

function useCommandPalette(): CommandPaletteApi | undefined

Unlike the others, this composable returns undefined when called outside <LteDashboardLayout>, so always guard the result.

Usage

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

const palette = useCommandPalette()
</script>

<template>
  <button v-if="palette" type="button" class="btn" @click="palette.open()">
    Search <kbd>⌘K</kbd>
  </button>
</template>

Returned API (`CommandPaletteApi`)

Name	Type	Description
`isOpen`	`Ref<boolean>`	Whether the palette is currently open.
`open`	`() => void`	Open the palette.
`close`	`() => void`	Close the palette.
`toggle`	`() => void`	Toggle the open state.