Deployment

Build with Vite for a plain Vue 3 SPA, or with Nuxt for SSR or a fully static export. Both ship the prebuilt AdminLTE CSS from @adminlte/vue, so there's no SCSS step to maintain.

Plain Vue 3 (Vite)

Nothing special is required — the library is standard ESM with a Vue peer. Build and preview:

npm run build      # vite build → dist/
npm run preview    # serve the production build locally

Ensure your main.ts imports the stylesheet and registers the plugin (see Installation). The CSS is marked as a side-effect in the package, so bundlers keep it; Lte* components and the composables tree-shake to only what you use.

Nuxt — SSR

The default Nuxt output is a Node server with server-side rendering. The module already wires the blocking theme head script, CSS injection and client-side Bootstrap JS, so a normal build just works:

npx nuxi build     # → .output/  (run with: node .output/server/index.mjs)

The library ships compiled SFC ESM that relies on Vue runtime helpers, so the Nuxt module adds @adminlte/vue to build.transpile automatically (and pre-bundles bootstrap + @popperjs/core for Vite). You don't need to configure transpilation yourself.

Nuxt — static export

For a static host (Cloudflare Pages, Netlify, GitHub Pages) prerender every route:

npx nuxi generate  # → .output/public/  (static HTML + assets)

This is how the official demo at adminlte.io/themes/vue-nuxt is published.

Deploying under a sub-path

If your app lives at a sub-path (e.g. /themes/vue-nuxt/ rather than the domain root), set Nuxt's app.baseURL — it natively prefixes the router (every NuxtLink) and the build assets:

// nuxt.config.ts
const base = process.env.EXPORT === 'true' ? '/themes/vue-nuxt/' : '/'

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

Set a real initialColorMode and any production layout flags in nuxt.config.ts → adminlte.defaults before deploying — these feed the blocking head theme script that prevents the dark-mode flash. Raw <a href> / <img src> that don't go through NuxtLink won't get the baseURL prefix automatically; prefix those at the data layer.

Consumer-side CSS

The module injects @adminlte/vue/css for you, but two extras are not bundled and should be added in your nuxt.config.ts (or imported in main.ts for plain Vue):

css: [
  'bootstrap-icons/font/bootstrap-icons.css',   // sidebar + widget icons
  'overlayscrollbars/overlayscrollbars.css',     // sidebar scrollbar
]

AdminLTE 4 · Vue port Edit on GitHub