Use AdminKit with Vue

Use AdminKit in a Vue 3 app created with create-vue, import the CSS and JavaScript from @adminkit/core and add a layout component with Vue Router.

AdminKit is an HTML, CSS and JavaScript template, not a Vue component library. You import its compiled files once and use its class names in your templates.

Install

npm create vue@latest my-app -- --ts --router
cd my-app
npm install
npm install @adminkit/core

AdminKit PRO is not published to npm. Copy dist/ from the download into src/adminkit/ and import ./adminkit/css/app.css and ./adminkit/js/app.js instead.

Import the CSS and JavaScript

Import both files in src/main.ts, in place of the starter's ./assets/main.css.

src/main.ts

import '@adminkit/core/css'
import '@adminkit/core'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

The package ships TypeScript declarations for both imports and for the globals app.js adds, such as window.adminkit.

Optional: avoid a color mode flash

Without head.js, app.js applies the stored color mode once it runs, so a visitor who picked the mode opposite to their operating system briefly sees the other one. head.js applies it before the first paint. It has to be a plain, blocking script in <head>, which Vite only serves from public/, so copy it there:

cp node_modules/@adminkit/core/dist/js/head.js public/

index.html

<script src="/head.js"></script>

Minimal layout

app.js sets up icons, the sidebar toggle and the SimpleBar scrollbar in markup that Vue renders later, also after each route change, so the layout is plain markup with the js-sidebar, js-simplebar and js-sidebar-toggle classes. From the lg breakpoint the toggle collapses the sidebar; below it, the sidebar is a Bootstrap offcanvas sheet (offcanvas-lg on #sidebar).

src/layouts/DefaultLayout.vue

<script setup lang="ts">
import { RouterLink } from 'vue-router'
</script>

<template>
  <div class="wrapper">
    <nav id="sidebar" class="sidebar js-sidebar offcanvas-lg offcanvas-start" tabindex="-1" aria-label="Sidebar">
      <div class="sidebar-content js-simplebar">
        <RouterLink class="sidebar-brand" to="/">
          <span class="align-middle">AdminKit</span>
        </RouterLink>
        <ul class="sidebar-nav">
          <li class="sidebar-header">Pages</li>
          <li class="sidebar-item" :class="{ active: $route.path === '/' }">
            <RouterLink class="sidebar-link" to="/">
              <i class="align-middle" data-lucide="sliders-vertical"></i> <span class="align-middle">Dashboard</span>
            </RouterLink>
          </li>
          <li class="sidebar-item" :class="{ active: $route.path === '/about' }">
            <RouterLink class="sidebar-link" to="/about">
              <i class="align-middle" data-lucide="user"></i> <span class="align-middle">About</span>
            </RouterLink>
          </li>
        </ul>
      </div>
    </nav>

    <div class="main">
      <nav class="navbar navbar-expand navbar-light navbar-bg" aria-label="Top bar">
        <button type="button" class="sidebar-toggle js-sidebar-toggle" aria-controls="sidebar" aria-expanded="true" aria-label="Collapse sidebar">
          <i class="hamburger align-self-center"></i>
        </button>
      </nav>
      <main class="content">
        <div class="container-fluid p-0">
          <slot />
        </div>
      </main>
    </div>
  </div>
</template>

src/App.vue

<script setup lang="ts">
import { RouterView } from 'vue-router'
import DefaultLayout from './layouts/DefaultLayout.vue'
</script>

<template>
  <DefaultLayout>
    <RouterView />
  </DefaultLayout>
</template>

src/views/HomeView.vue

<template>
  <h1 class="h3 mb-3">Dashboard</h1>
  <div class="card">
    <div class="card-body">Hello from AdminKit.</div>
  </div>
</template>

Run

npm run dev

Open http://localhost:5173. You should see the dark sidebar with its two icons, the navbar with the hamburger toggle and the card. Clicking About navigates client-side; the icons stay rendered and the active item moves. In a window narrower than 992px the sidebar is hidden, and the toggle opens it as a sheet over the page; Escape, the backdrop or a link closes it.

Vue

InstallCopy Anchor Link

Import the CSS and JavaScriptCopy Anchor Link

Optional: avoid a color mode flashCopy Anchor Link

Minimal layoutCopy Anchor Link

RunCopy Anchor Link

On this page

Install

Import the CSS and JavaScript

Optional: avoid a color mode flash

Minimal layout

Run