Component composables

useCardWidget, useFullscreen, useDirectChat, useSortable, useTreeview.

These composables hold local, per-component state — unlike the provided composables (useSidebar, useColorMode, …) they do not rely on the layout's provide/inject context and can be called from any component. Import them from adminlte-vue (or rely on auto-import in Nuxt).

useCardWidget

Per-card widget state porting AdminLTE's card-widget.ts: collapse, maximize, and remove. Maximizing also toggles the maximized-card class on <html>.

function useCardWidget(options?: UseCardWidgetOptions): CardWidgetApi

Usage

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

const { isCollapsed, isMaximized, isRemoved, toggleCollapse, toggleMaximize, remove } =
  useCardWidget()
</script>

<template>
  <div v-if="!isRemoved" class="card" :class="{ 'collapsed-card': isCollapsed, maximized: isMaximized }">
    <div class="card-header">
      <h3 class="card-title">Widget</h3>
      <div class="card-tools">
        <button type="button" class="btn btn-tool" @click="toggleCollapse">
          <i class="bi" :class="isCollapsed ? 'bi-plus-lg' : 'bi-dash-lg'" />
        </button>
        <button type="button" class="btn btn-tool" @click="toggleMaximize">
          <i class="bi bi-fullscreen" />
        </button>
        <button type="button" class="btn btn-tool" @click="remove">
          <i class="bi bi-x-lg" />
        </button>
      </div>
    </div>
    <div v-show="!isCollapsed" class="card-body">Content</div>
  </div>
</template>

Options

Name	Type	Default	Description
`defaultCollapsed`	`boolean`	`false`	Initial collapsed state.

Returns

Name	Type	Description
`isCollapsed`	`Ref<boolean>`	Whether the card is collapsed.
`isMaximized`	`Ref<boolean>`	Whether the card is maximized.
`isRemoved`	`Ref<boolean>`	Whether the card has been removed.
`collapse`	`() => void`	Set collapsed to `true`.
`expand`	`() => void`	Set collapsed to `false`.
`toggleCollapse`	`() => void`	Toggle the collapsed state.
`maximize`	`() => void`	Maximize; adds `maximized-card` to `<html>`.
`minimize`	`() => void`	Un-maximize; removes `maximized-card` from `<html>`.
`toggleMaximize`	`() => void`	Toggle the maximized state.
`remove`	`() => void`	Set removed to `true`.

useFullscreen

A wrapper around the browser Fullscreen API (ports AdminLTE's fullscreen.ts). It listens to fullscreenchange while mounted and reflects the current state in isFullscreen. The async methods request fullscreen on document.documentElement and log errors to the console rather than throwing.

function useFullscreen(): FullscreenApi

Usage

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

const { isFullscreen, toggleFullscreen } = useFullscreen()
</script>

<template>
  <button type="button" class="btn btn-tool" @click="toggleFullscreen">
    <i class="bi" :class="isFullscreen ? 'bi-fullscreen-exit' : 'bi-fullscreen'" />
  </button>
</template>

Returns

Name	Type	Description
`isFullscreen`	`Ref<boolean>`	Whether the document is currently in fullscreen.
`toggleFullscreen`	`() => Promise<void>`	Enter if not fullscreen, exit otherwise.
`enterFullscreen`	`() => Promise<void>`	Request fullscreen on the document element.
`exitFullscreen`	`() => Promise<void>`	Exit fullscreen if currently active.

useDirectChat

Local state for a direct-chat contacts pane (ports AdminLTE's direct-chat.ts). Bind isContactsOpen to the direct-chat-contacts-open class.

function useDirectChat(): DirectChatApi

Usage

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

const { isContactsOpen, toggleContacts } = useDirectChat()
</script>

<template>
  <div class="card direct-chat" :class="{ 'direct-chat-contacts-open': isContactsOpen }">
    <div class="card-header">
      <button type="button" class="btn btn-tool" @click="toggleContacts">
        <i class="bi bi-people" />
      </button>
    </div>
    <div class="direct-chat-contacts"><!-- contacts --></div>
  </div>
</template>

Returns

Name	Type	Description
`isContactsOpen`	`Ref<boolean>`	Whether the contacts pane is open.
`toggleContacts`	`() => void`	Toggle the contacts pane.
`openContacts`	`() => void`	Open the contacts pane.
`closeContacts`	`() => void`	Close the contacts pane.

useSortable

Initializes SortableJS on a target element. The library is imported lazily and client-only, so it is SSR-safe. Install sortablejs as your own dependency. Cleanup runs automatically on unmount; a destroy handle is also returned.

function useSortable(target: Ref<HTMLElement | null>, options?: UseSortableOptions): SortableApi

Usage

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

const list = ref<HTMLElement | null>(null)
useSortable(list, { options: { animation: 150 } })
</script>

<template>
  <ul ref="list" class="list-group">
    <li class="list-group-item">Item 1</li>
    <li class="list-group-item">Item 2</li>
    <li class="list-group-item">Item 3</li>
  </ul>
</template>

Pass a reactive enabled ref to initialize and destroy the instance on demand:

const enabled = ref(true)
useSortable(list, { enabled, options: { animation: 150 } })

Parameters

Name	Type	Description
`target`	`Ref<HTMLElement \| null>`	Element to make sortable.
`options`	`UseSortableOptions`	See below. Optional.

Options

Name	Type	Default	Description
`enabled`	`Ref<boolean> \| boolean`	`true`	When a boolean, initializes only if `true`. When a ref, watched to init/destroy reactively.
`options`	`Sortable.Options`	—	Options forwarded directly to SortableJS.

Returns

Name	Type	Description
`destroy`	`() => void`	Destroy the SortableJS instance manually.

useTreeview

Powers the sidebar nav's accordion behavior and submenu animation. It is used internally by LteSidebarNav / LteSidebarNavItem, but the exported helpers are available for custom nav-like UIs.

provideTreeviewRegistry / useTreeviewRegistry

A registry for accordion mode (one open group per parent at a time). provideTreeviewRegistry is called by the nav container; descendants read it with useTreeviewRegistry, which returns undefined if no registry was provided.

function provideTreeviewRegistry(accordion: boolean): TreeviewRegistry
function useTreeviewRegistry(): TreeviewRegistry | undefined

The TreeviewRegistry shape:

Name	Type	Description
`accordion`	`boolean`	Whether accordion mode is active.
`openByParent`	`Ref<Record<string, string \| null>>`	Map of parent key → currently open child id.
`setOpen`	`(parentKey: string, id: string, open: boolean) => void`	Open/close a child within its parent.
`isOpen`	`(parentKey: string, id: string) => boolean`	Whether the given child is open.

treeviewTransition

Returns height-based enter/leave hooks for a <Transition>, animating a submenu from 0 to its scroll height and back. The Vue port of the React useTreeviewAnimation technique.

function treeviewTransition(speed?: number)

Name	Type	Default	Description
`speed`	`number`	`300`	Transition duration in milliseconds.

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

const isOpen = ref(false)
</script>

<template>
  <Transition v-bind="treeviewTransition(300)">
    <ul v-if="isOpen" class="nav nav-treeview">
      <li class="nav-item"><a href="#" class="nav-link">Child</a></li>
    </ul>
  </Transition>
</template>