Download the PHP package vikdiesel/admin-one-laravel-dashboard without Composer
On this page you can find all versions of the php package vikdiesel/admin-one-laravel-dashboard. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Informations about the package admin-one-laravel-dashboard
Free Laravel 9.x Vue.js 2.x Buefy Bulma Dashboard
This guide will help you integrate your Laravel Jetstream application with vikdiesel/admin-one-vue-bulma-dashboard Vue Bulma Buefy dashboard.
Please note: this document is work in progress, so some things are missing.
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 available
Table of contents
- Install
- Copy styles, components and scripts
- Add pages
- Fix router links
- Add Inertia-related stuff
- Work in progress
- Laravel 7.x & 8.x
Install
- Install Laravel application
- Install Jetstream with Inertia + Vue stack
cd
to project dir- Move
resources/js
folder toresources-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
:
Copy styles, components and scripts
Clone either vikdiesel/admin-one-vue-bulma-dashboard or 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
toresources/js/
- Copy
src/App.vue
andsrc/FullPage.vue
toresources/Layouts/
- Copy
src/css
andsrc/scss
toresources/
- Copy
src/assets/justboil-logo.svg
toresources/js/images/
- Delete
resources/css/app.css
- Copy
resources
directory from this repository to to laravel project
In resources/views/app.blade.php
Replace app.css
with main.css
:
Add before </body>
:
In resources/layouts/App.vue & FullPage.vue
Replace <router-view />
with <slot />
In resources/layouts/App.vue
Add this.$store.dispatch('toggleFullPage', false)
to created()
lifecycle hook
In resources/layouts/FullPage.vue
Add this.$store.dispatch('toggleFullPage', true)
to created()
lifecycle hook
Remove beforeDestroy()
lifecycle hook
In resources/layouts/Tiles.vue
Add import filter from 'lodash/filter'
Add filter()
and replace this.$slots.default
with slots
in render()
method, so you'll get:
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:
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')
:
Fix router links
Here we replace router-link with Inertia Link.
resources/js/menu.js
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
:
Route names reflect ones defined in routes/web.php
:
Now, let's update vue files, to make them work with route names and Inertia links.
resources/js/components/AsideMenuItem.vue
Add Link
import to <script>
:
resources/js/components/AsideMenuItem.vue
Replace componentIs
in computed{}
with:
Replace <component>
attrs with:
.vue files in resources/js/ containing
Import and register Link
component:
Replace <router-link>
with <Link>
:
resources/js/components/NavBar.vue
Replace this.$router
with Inertia
:
Add Inertia-related stuff
resources/js/components/UserAvatar.vue
Fix newAvatar
computed property, so it fetches profile photo from backend:
resources/js/components/NavBar.vue
Update userName
and logout
:
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
If you're using an older version of Laravel, please follow Laravel 7.x & 8.x guide.