Installation

Two supported paths: install the framework-agnostic @adminlte/vue library into any Vue 3 (Vite) app, or add the @adminlte/nuxt module for zero-config auto-imports and SSR-safe theming. Same components, same markup — only the wiring differs.

Plain Vue 3 (Vite)

1. Install

npm install @adminlte/vue bootstrap

2. Register the plugin

The default export is a Vue plugin that globally registers all core Lte* components. Import the prebuilt CSS, Bootstrap Icons, and Bootstrap's JS bundle (for dropdowns, modals and offcanvas):

// 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')

3. Wire your router

Pass the current path and your router's link component to <LteDashboardLayout> so the sidebar can resolve active links and render real navigation:

<script setup lang="ts">
import { RouterLink, useRoute } from 'vue-router'
import type { MenuNode } from '@adminlte/vue'

const route = useRoute()
const menu: MenuNode[] = [
  { type: 'item', text: 'Dashboard', href: '/', icon: 'bi-speedometer' },
]
</script>

<template>
  <LteDashboardLayout :menu-items="menu" :current-path="route.path" :link-component="RouterLink">
    <router-view />
  </LteDashboardLayout>
</template>

SSR-safety is built into the library, so this also works under Vite SSR / vue-router SSR — composables guard every window/document access and apply body classes imperatively after mount.

Nuxt

1. Install

npm i @adminlte/nuxt @adminlte/vue bootstrap

2. Register the module

// 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'],
})

The module auto-registers every Lte* component, auto-imports the composables, injects @adminlte/vue/css, loads Bootstrap's JS client-side, and adds the blocking head theme script — so your .vue files need no import statements:

<!-- 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' },
]
</script>

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

Package entry points

Import	Provides
`@adminlte/vue`	Plugin + all core components, composables and types.
`@adminlte/vue/plugins`	The optional plugin-wrapper components (charts, tables, editors).
`@adminlte/vue/css`	The prebuilt AdminLTE stylesheet (LTR).
`@adminlte/vue/css/rtl`	The right-to-left stylesheet.

Plugin libraries (apexcharts, tabulator-tables, quill, flatpickr, tom-select, sortablejs, jsvectormap, the FullCalendar packages) are declared as optional peer dependencies. Install only the ones you use; the wrapper components lazy-load them so nothing extra is forced into your bundle.

Next step

Tune the layout and theme defaults — see Configuration.

AdminLTE 4 · Vue port Edit on GitHub