Laravel
Install AdminKit in a Laravel application with Vite, import the CSS and JavaScript from @adminkit/core and build a Blade layout component.
Laravel ships with Vite, so AdminKit is installed from npm and imported through the default resources/css/app.css and resources/js/app.js entry points.
Install
composer create-project laravel/laravel my-app
cd my-app
npm install
npm install @adminkit/coreAdminKit PRO is not published to npm. Copy the dist/ folder from the download into resources/adminkit/ and import ../adminkit/css/app.css and ../adminkit/js/app.js instead.
Import the CSS and JavaScript
Replace the contents of the two Vite entry files. The @vite directive in the layout loads both.
@import "@adminkit/core/css";import "@adminkit/core";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>, before @vite, whose entries are module scripts that run later, so copy it to public/:
cp node_modules/@adminkit/core/dist/js/head.js public/<script src="{{ asset('head.js') }}"></script>Minimal layout
Create an anonymous Blade component for the layout, a view that uses it, and a route.
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>{{ $title ?? config('app.name') }}</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
<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">
<a class="sidebar-brand" href="{{ url('/') }}">
<span class="align-middle">AdminKit</span>
</a>
<ul class="sidebar-nav">
<li class="sidebar-header">Pages</li>
<li class="sidebar-item {{ request()->is('/') ? 'active' : '' }}">
<a class="sidebar-link" href="{{ url('/') }}">
<i class="align-middle" data-lucide="sliders-vertical"></i> <span class="align-middle">Dashboard</span>
</a>
</li>
<li class="sidebar-item {{ request()->is('profile') ? 'active' : '' }}">
<a class="sidebar-link" href="{{ url('/profile') }}">
<i class="align-middle" data-lucide="user"></i> <span class="align-middle">Profile</span>
</a>
</li>
</ul>
</div>
</nav>
<div class="main">
<nav class="navbar navbar-expand navbar-light navbar-bg">
<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>
</body>
</html><x-layout title="Dashboard">
<h1 class="h3 mb-3">Dashboard</h1>
<div class="card">
<div class="card-body">Hello from AdminKit.</div>
</div>
</x-layout><?php
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('dashboard');
});Run
Build the assets and start the PHP development server:
npm run build
php artisan serveOpen http://localhost:8000. You should see the dark sidebar, the navbar with the hamburger toggle and the card. Clicking the toggle collapses the sidebar.
Last updated on