# 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
```bash
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`.
```ts title="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](/docs/getting-started/dark-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 ``, which Vite only serves from `public/`, so copy it there:
```bash
cp node_modules/@adminkit/core/dist/js/head.js public/
```
```html title="index.html"
```
## 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`).
```vue title="src/layouts/DefaultLayout.vue"
```
```vue title="src/App.vue"
```
```vue title="src/views/HomeView.vue"
Dashboard
```
## Run
```bash
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.
---
Canonical HTML page: https://adminkit.io/docs/frameworks/vue/
Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/docs/ · Questions: support@adminkit.io