This guide will help you integrate your Laravel application with Admin One - free Vue 3 Tailwind 3 Admin Dashboard with dark mode.
Admin One is simple, fast and free Vue.js 3.x Tailwind CSS 3.x admin dashboard with Laravel 9.x integration.
- Built with Vue.js 3, Tailwind CSS 3 framework & Composition API
- Laravel build tools
- Laravel Breeze with Inertia + Vue stack
- SFC
<script setup>Info - Pinia state library (official Vuex 5)
- Dark mode
- Styled scrollbars
- Production CSS is only ≈38kb
- Reusable components
- Free under MIT License
- Install
- Copy styles, components and scripts
- Add pages
- Fix router links
- Add Inertia-related stuff
- Upgrading to Premium version
- Optional steps
- Laravel & Inertia docs
First, install Laravel application
Then cd to project dir and install Breeze with Vue option
composer require laravel/breeze --dev
php artisan breeze:install vue
php artisan migrate
npm installnpm i pinia @tailwindcss/line-clamp @mdi/js chart.js numeral -DBefore you start, we recommend to rename Laravel Breeze's original folders (so you'll keep them for future reference) — resources/js/Components resources/js/Layouts resources/js/Pages to something like ComponentsBreeze, LayoutsBreeze, etc.
Now clone justboil/admin-one-vue-tailwind project somewhere locally (into any separate folder)
Next, copy these files from justboil/admin-one-vue-tailwind project directory to laravel project directory:
- Copy
tailwind.config.jsto/ - Copy
src/componentssrc/layoutssrc/storessrc/colors.jssrc/config.jssrc/menuAside.jssrc/menuNavBar.jssrc/styles.jstoresources/js/ - Copy
.laravel-guide/resources/js/toresources/js/ - Delete
resources/css/app.css - Copy
src/csstoresources/css
Fresh Laravel install with Breeze provides Capitalized folder names such as Components, Layouts, etc. For the sake of simplicity we just follow Vue conventions with lowercase folder names. However, you may opt-in to capitalize folder names:
- Make sure you've removed original Laravel Breeze's
resources/js/Layoutsandresources/js/Componentsfolders - Rename the folders you've copied in the previous section:
resources/js/layoutstoLayouts;componentstoComponents;storestoStores - Replace everywhere in imports:
@/layouts/with@/Layouts/;@/components/with@/Components/;@/stores/with@/Stores/
Please make sure, you've copied template's tailwind.config.js. Then replace content, to reflect Laravel's structure:
module.exports = {
content: [
"./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
"./storage/framework/views/*.php",
"./resources/views/**/*.blade.php",
"./resources/js/**/*.vue",
"./resources/js/**/*.js",
],
// ...
};- Remove
<link rel="stylesheet" href="https://fonts.bunny.net/css2?family=Nunito:wght@400;600;700&display=swap">
Let's just add first page. You can repeat these steps for other pages, if you wish to.
First, copy src/views/HomeView.vue (from justboil/admin-one-vue-tailwind project) to resources/js/Pages/ (in your Laravel project).
Then, open resources/js/Pages/HomeView.vue and add <Head>:
<script setup>
import { Head } from "@inertiajs/vue3";
// ...
</script>
<template>
<LayoutAuthenticated>
<Head title="Dashboard" />
<!-- ... -->
</LayoutAuthenticated>
</template>Add route in routes/web.php. There's a /dashboard route already defined by default, so just replace Inertia::render('Dashboard') with Inertia::render('HomeView'):
Route::get('/dashboard', function () {
return Inertia::render('HomeView');
})->middleware(['auth', 'verified'])->name('dashboard');Here we replace RouterLink with Inertia Link.
Optionally, you can pass menu via Inertia shared props, so you'll be able to control it with PHP. Here we'd just use JS.
to should be replaced with route which specifies route name defined in routes/web.php. For external links href should be used instead. Here's an example for menuAside.js:
export default [
"General",
[
{
route: "dashboard",
icon: mdiMonitor,
label: "Dashboard",
},
// {
// route: "another-route-name",
// icon: mdiMonitor,
// label: "Dashboard 2",
// },
{
href: "https://example.com/",
icon: mdiMonitor,
label: "Example.com",
},
],
];Route names reflect ones defined in routes/web.php:
Route::middleware(['auth:sanctum', 'verified'])->get('/dashboard', function () {
return Inertia::render('Home');
})->name('dashboard');
// Route::middleware(['auth:sanctum', 'verified'])->get('/dashboard-2', function () {
// return Inertia::render('Home2');
// })->name('another-route-name');Now, let's update vue files, to make them work with route names and Inertia links.
Replace RouterLink imported from vue-router with Link import in <script setup> and add consts:
<script setup>
import { Link } from "@inertiajs/vue3";
// import { RouterLink } from "vue-router";
// ...
// Add itemHref
const itemHref = computed(() =>
props.item.route ? route(props.item.route) : props.item.href
);
// Add activeInactiveStyle
const activeInactiveStyle = computed(() =>
props.item.route && route().current(props.item.route)
? styleStore.asideMenuItemActiveStyle
: ""
);
// ...
</script>In <template> section:
- In
<component>removev-slotand:toattributes; replace:iswith:is="item.route ? Link : 'a'"and:hrefwith:href="itemHref" - Inside
<component>replace:classattribute for both<BaseIcon>components,<span>and another<BaseIcon>with:class="activeInactiveStyle" - ...and for
<span>(also inside<component>) replace:classattribute with:class="[{ 'pr-12': !hasDropdown }, activeInactiveStyle]"
Replace RouterLink imported from vue-router with Link import in <script setup>:
<script setup>
import { Link } from "@inertiajs/vue3";
// import { RouterLink } from "vue-router";
// ...
</script>Replace to prop declaration with routeName:
const props = defineProps({
// ...
routeName: {
type: String,
default: null,
},
// ...
});Fix const is declaration, so it returns the Link component when props.routeName is set:
const is = computed(() => {
if (props.as) {
return props.as;
}
if (props.routeName) {
return Link;
}
if (props.href) {
return "a";
}
return "button";
});Remove :to and replace :href in <component> with :href="routeName ? route(routeName) : href":
<template>
<component
:is="is"
:class="componentClass"
:href="routeName ? route(routeName) : href"
:type="computedType"
:target="target"
:disabled="disabled"
>
<!-- ... -->
</component>
</template>Replace RouterLink imported from vue-router with Link import in <script setup>:
<script setup>
import { Link } from "@inertiajs/vue3";
// import { RouterLink } from "vue-router";
// ...
// Add itemHref
const itemHref = computed(() =>
props.item.route ? route(props.item.route) : props.item.href
);
// Update `const is` to return `Link` when `props.routeName` is set:
const is = computed(() => {
if (props.item.href) {
return "a";
}
if (props.item.route) {
return Link;
}
return "div";
});
</script>Then, remove :to attribute and set :href attribute to :href="itemHref" in <component>.
<script setup>
// Remove vue-router stuff:
// import { useRouter } from 'vue-router'
// const router = useRouter()
// router.beforeEach(() => {
// isAsideMobileExpanded.value = false
// isAsideLgActive.value = false
// })
// Add:
import { router } from "@inertiajs/vue3";
router.on("navigate", () => {
isAsideMobileExpanded.value = false;
isAsideLgActive.value = false;
});
// Replace `isLogout` logic:
const menuClick = (event, item) => {
// ...
if (item.isLogout) {
// Add:
router.post(route("logout"));
}
};
// ...
</script>Let's fetch user avatar initials based on username stored in database.
<script setup>
import { computed } from "vue";
import { usePage } from "@inertiajs/vue3";
import UserAvatar from "@/components/UserAvatar.vue";
const userName = computed(() => usePage().props.auth.user.name);
</script>
<template>
<UserAvatar :username="userName" api="initials">
<slot />
</UserAvatar>
</template><script setup>
// Add usePage:
import { usePage } from "@inertiajs/vue3";
// Remove unused useMainStore:
// import { useMainStore } from '@/stores/main.js'
// ...
// Update itemLabel:
const itemLabel = computed(() =>
props.item.isCurrentUser ? usePage().props.auth.user.name : props.item.label
);
// ...
</script>Please make sure you have completed all previous steps in this guide, so you have everything up and running. Then download and uzip the Premium version files. Next, follow steps described below.
npm i @headlessui/vue -DCopy files to your Laravel project (overwrite free version ones or merge if you have changed something):
- Copy
src/components/Premiumtoresources/js/components/Premium - Copy
src/storestoresources/js/stores - Copy
src/config.jstoresources/js/config.js - Copy
src/styles.jstoresources/js/styles.js - Copy
src/sampleButtonMenuOptions.jstoresources/js/sampleButtonMenuOptions.js - Copy
src/colorsPremium.jstoresources/js/colorsPremium.js
Replace tailwind.config.js in your Laravel project with the Premium one. Make sure to preserve module.exports.content:
module.exports = {
content: [
"./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php",
"./storage/framework/views/*.php",
"./resources/views/**/*.blade.php",
"./resources/js/**/*.vue",
"./resources/js/**/*.js",
],
// ...
};Add layout store to resources/js/app.js:
// Add layout store
import { useLayoutStore } from "@/stores/layout.js";
const layoutStore = useLayoutStore(pinia);
layoutStore.responsiveLayoutControl();
window.onresize = () => layoutStore.responsiveLayoutControl();Replace contents of resources/js/layouts/LayoutAuthenticated.vue with contents of src/js/layouts/LayoutAuthenticated.vue (from the Premium version)
<script setup>
// Replace router use:
// import { useRouter } from "vue-router";
import { router } from "@inertiajs/vue3";
// const router = useRouter();
// router.beforeEach(() => {
// layoutStore.isAsideMobileExpanded = false;
// });
router.on("navigate", () => {
layoutStore.isAsideMobileExpanded = false;
});
// Add logout:
const menuClick = (event, item) => {
// ...
if (item.isLogout) {
router.post(route("logout"));
}
};
</script>Optionally, you may update layouts of login and signup, located at resources/js/Pages/Auth with Premium version layouts from src/views/Premium/LoginView.vue and src/views/Premium/SignupView.vue
It's likely, you'll use only one app style, either basic or one of listed in src/styles.js. Follow this guide to set one of choice.
Add to .editorconfig:
[*.{js,jsx,ts,tsx,vue,html,css}]
indent_size = 2Global lodash and axios aren't needed, as we import them directly when needed. Most likely, you'd not need axios at all, as Laravel pushes all data via Inertia.