PHPackages vikdiesel/admin-one-laravel-dashboard - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. vikdiesel/admin-one-laravel-dashboard ActiveLibrary[Templating & Views](/categories/templating) vikdiesel/admin-one-laravel-dashboard ===================================== Admin One - Laravel Dashboard Preset (SPA) 1.5.1(5y ago)1415.5k32[4 issues](https://github.com/vikdiesel/admin-one-laravel-dashboard/issues)MITVuePHP ^7.3|^8.0 Since Aug 28Pushed 3y ago7 watchersCompare [ Source](https://github.com/vikdiesel/admin-one-laravel-dashboard)[ Packagist](https://packagist.org/packages/vikdiesel/admin-one-laravel-dashboard)[ Docs](https://github.com/vikdiesel/admin-one-laravel-dashboard)[ RSS](/packages/vikdiesel-admin-one-laravel-dashboard/feed)WikiDiscussions master Synced 3w ago READMEChangelog (10)Dependencies (2)Versions (14)Used By (0) Free Laravel 9.x Vue.js 2.x Buefy Bulma Dashboard ================================================= [](#free-laravel-9x-vuejs-2x-buefy-bulma-dashboard) [![](https://camo.githubusercontent.com/f7375001377ae89589fcb341c3128b9a4c7b6b80176e1d7c33ac0fb05f3276fa/68747470733a2f2f7374617469632e6a757374626f696c2e6d652f74656d706c617465732f6f6e652f7265706f2d62756c6d612d7675652e706e67)](https://vikdiesel.github.io/admin-one-vue-bulma-dashboard/ "Bulma Vue.js 2.x Buefy free admin dashboard") This guide will help you integrate your **Laravel Jetstream** application with [vikdiesel/admin-one-vue-bulma-dashboard](https://github.com/vikdiesel/admin-one-vue-bulma-dashboard) Vue Bulma Buefy dashboard. **Please note:** this document is work in progress, so [some things are missing](#work-in-progress). Simple, beautiful and free **Vue.js 2.x** **Bulma** **Buefy** admin dashboard for **Laravel 9.x Jetstream Inertia + Vue** stack - Built with **Vue.js 2.x** **Bulma** and **Buefy** - **Laravel 9.x Jetstream Inertia + Vue** stack - Laravel Mix - Classic **Options API** using `data`, `computed`, `methods`, etc. - SPA with **Vuex** & **Inertia Router** - **Styled** scrollbars - **SCSS sources** with variables - Reusable components - Responsive - Free under MIT License - [Premium versions](https://justboil.me/bulma-admin-template/) available Table of contents ----------------- [](#table-of-contents) - [Install](#install) - [Copy styles, components and scripts](#copy-styles-components-and-scripts) - [Add pages](#add-pages) - [Fix router links](#fix-router-links) - [Add Inertia-related stuff](#add-inertia-related-stuff) - [Work in progress](#work-in-progress) - [Laravel 7.x & 8.x](#laravel-7x--8x) Install ------- [](#install) - [Install Laravel](https://laravel.com/docs/installation) application - [Install Jetstream](https://jetstream.laravel.com/2.x/installation.html) with Inertia + Vue stack - `cd` to project dir - Move `resources/js` folder to `resources-temp/js`. These js files will serve as a reference during development process (just in case, you'll ever need to extract some logic, that is missing here) - run `npm remove @inertiajs/inertia-vue3 @vue/compiler-sfc @tailwindcss/forms @tailwindcss/typography postcss postcss-import tailwindcss` - run `npm i vuex@^3 vue@^2 vue-loader@^15 @vue/composition-api @inertiajs/inertia-vue bulma buefy chart.js vue-chartjs numeral sass sass-loader -D` Replace `postCss()` with `sass()` and `app.scss` with `main.scss` in `webpack.mix.js`: ``` mix.js('resources/js/app.js', 'public/js').vue() .sass('resources/scss/main.scss', 'public/css') .alias({ '@': 'resources/js', }) ``` Copy styles, components and scripts ----------------------------------- [](#copy-styles-components-and-scripts) Clone either [vikdiesel/admin-one-vue-bulma-dashboard](https://github.com/vikdiesel/admin-one-vue-bulma-dashboard) or [vikdiesel/admin-two-vue-bulma-dashboard](https://github.com/vikdiesel/admin-two-vue-bulma-dashboard) project locally into a separate folder Next, copy these files **from cloned dashboard project** directory **to laravel project** directory: - Copy `src/components` `src/store` `src/menu.js` to `resources/js/` - Copy `src/App.vue` and `src/FullPage.vue` to `resources/Layouts/` - Copy `src/css` and `src/scss` to `resources/` - Copy `src/assets/justboil-logo.svg` to `resources/js/images/` - Delete `resources/css/app.css` - Copy `resources` directory **from this repository** to **to laravel project** ##### In resources/views/app.blade.php [](#in-resourcesviewsappbladephp) Replace `app.css` with `main.css`: ``` ``` Add before ``: ``` ``` ##### In resources/layouts/App.vue & FullPage.vue [](#in-resourceslayoutsappvue--fullpagevue) Replace `` with `` ##### In resources/layouts/App.vue [](#in-resourceslayoutsappvue) Add `this.$store.dispatch('toggleFullPage', false)` to `created()` lifecycle hook ##### In resources/layouts/FullPage.vue [](#in-resourceslayoutsfullpagevue) Add `this.$store.dispatch('toggleFullPage', true)` to `created()` lifecycle hook Remove `beforeDestroy()` lifecycle hook ##### In resources/layouts/Tiles.vue [](#in-resourceslayoutstilesvue) Add `import filter from 'lodash/filter'` Add `filter()` and replace `this.$slots.default` with `slots` in `render()` method, so you'll get: ``` render (createElement) { const renderAncestor = elements => createElement( // ... ) const slots = filter(this.$slots.default, slot => !!slot.tag) if (slots.length { return renderAncestor(group) }) ) } } ``` Add Pages --------- [](#add-pages) Let's just add first page. You can repeat these steps for other pages, if you wish to. If you've followed previous steps, there's already `resources/js/Pages/HomeExample.vue` for your reference. First, copy `src/views/Home.vue` (original dashboard project) to `resources/js/Pages/` (your Laravel project). Add `Head`. Then, wrap page contents into `App` Layout component: ``` import { Head } from '@inertiajs/inertia-vue' import App from '@/Layouts/App.vue' // ... export default defineComponent({ name: 'Home', components: { Head, App, // ... } // ... }) ``` Add route in `routes/web.php`. There's a `/dashboard` route already defined by default, so just replace `Inertia::render('Dashboard')` with `Inertia::render('Home')`: ``` Route::get('/dashboard', function () { return Inertia::render('Home'); })->name('dashboard'); ``` Fix router links ---------------- [](#fix-router-links) Here we replace router-link with Inertia Link. ##### resources/js/menu.js [](#resourcesjsmenujs) Optionally, you can pass menu via Inertia shared props, so it's going to be controlled 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 `menu.js`: ``` export default [ 'General', [ { route: 'dashboard', icon: mdiDesktopMac, label: 'Dashboard' }, { href: 'https://example.com/', icon: mdiDesktopMac, label: 'Example.com' } ] ] ``` Route names reflect ones defined in `routes/web.php`: ``` Route::get('/dashboard', function () { return Inertia::render('Home'); })->name('dashboard'); ``` Now, let's update vue files, to make them work with route names and Inertia links. ##### resources/js/components/AsideMenuItem.vue [](#resourcesjscomponentsasidemenuitemvue) Add `Link` import to ``: ``` import { Link } from '@inertiajs/inertia-vue' // ... ``` ##### resources/js/components/AsideMenuItem.vue [](#resourcesjscomponentsasidemenuitemvue-1) Replace `componentIs` in `computed{}` with: ``` export default defineComponent({ // ... computed: { componentIs () { return this.item.route ? Link : 'a' } // ... } // ... }) ``` Replace `` attrs with: ``` ``` ##### .vue files in resources/js/ containing [](#vue-files-in-resourcesjs-containing-) Import and register `Link` component: ``` import { Link } from '@inertiajs/inertia-vue' // ... export default defineComponent({ components: { Link // ... } // ... }) ``` Replace `` with ``: ``` ``` ##### resources/js/components/NavBar.vue [](#resourcesjscomponentsnavbarvue) Replace `this.$router` with `Inertia`: ``` import { Inertia } from '@inertiajs/inertia' // ... export default defineComponent({ // ... mounted () { Inertia.on('navigate', (event) => { this.isMenuActive = false }) } // ... }) ``` Add Inertia-related stuff ------------------------- [](#add-inertia-related-stuff) ##### resources/js/components/UserAvatar.vue [](#resourcesjscomponentsuseravatarvue) Fix `newAvatar` computed property, so it fetches profile photo from backend: ``` export default defineComponent({ // ... computed: { newAvatar () { return this.avatar ? this.avatar : this.$page.props.user.profile_photo_url } } }) ``` ##### resources/js/components/NavBar.vue [](#resourcesjscomponentsnavbarvue-1) Update `userName` and `logout`: ``` export default defineComponent({ // ... computed: { // ... userName () { return this.$page.props.user.name }, ...mapState([ 'isAsideMobileExpanded', 'isNavBarVisible', // remove 'userName' ]) }, methods: { // ... logout () { Inertia.post(route('logout')) } } // ... }) ``` Work in progress ---------------- [](#work-in-progress) As mentioned, this guide is WIP - work in progress. Contributions open. Here's the list of what's missing right now: - Pages for resources/Pages/API - Pages for resources/Pages/Auth (except Login.vue and Register.vue) - Pages for resources/Pages/Profile - Unused default Jetstream files list Laravel 7.x & 8.x --------------------- [](#laravel-7x--8x) If you're using an older version of Laravel, please follow [Laravel 7.x & 8.x guide](https://github.com/vikdiesel/admin-one-laravel-dashboard/tree/master/.laravel-7x-8x). ### Health Score 40 — FairBetter than 86% of packages Maintenance19 Infrequent updates — may be unmaintained Popularity39 Limited adoption so far Community18 Small or concentrated contributor base Maturity71 Established project with proven stability Bus Factor1 Top contributor holds 97.1% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~41 days Recently: every ~83 days Total 14 Last Release 1956d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/6491f42a049a4a9bb213c1768874ffe36dd3344490cb41419f6a2c410e53f24e?d=identicon)[vikdiesel](/maintainers/vikdiesel) --- Top Contributors [![vikdiesel](https://avatars.githubusercontent.com/u/1877513?v=4)](https://github.com/vikdiesel "vikdiesel (66 commits)")[![lucacalcaterra](https://avatars.githubusercontent.com/u/879825?v=4)](https://github.com/lucacalcaterra "lucacalcaterra (1 commits)")[![xlith](https://avatars.githubusercontent.com/u/510560?v=4)](https://github.com/xlith "xlith (1 commits)") --- Tags buefybulmabulma-adminbulma-admin-dashboardbulma-cssbulma-css-frameworkbulma-extensionsbulma-frameworkbulma-templatebulma-uibulmacsslaravellaravel-frameworklaravel-packagevuevuejsvuejs2laraveltemplatedashboardvuebulmapresetvue jsSPAvuex ### Embed Badge ![Health badge](/badges/vikdiesel-admin-one-laravel-dashboard/health.svg) ``` [![Health](https://phpackages.com/badges/vikdiesel-admin-one-laravel-dashboard/health.svg)](https://phpackages.com/packages/vikdiesel-admin-one-laravel-dashboard) ``` ### Alternatives [unopim/unopim UnoPim Laravel PIM 10.3k2.2k](/packages/unopim-unopim)[acacha/admin-lte-template-laravel AdminLTE template applied to Laravel Scaffolding 1.8k388.6k8](/packages/acacha-admin-lte-template-laravel)[hieu-le/laravel-dashboard A starting template for Laravel 5 dashboards 322.6k](/packages/hieu-le-laravel-dashboard) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)