Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vikdiesel/admin-one-laravel-dashboard
Free Laravel 9.x Jetstream Inertia Bulma Buefy Vue.js 2.x Dashboard
https://github.com/vikdiesel/admin-one-laravel-dashboard
buefy bulma bulma-admin bulma-admin-dashboard bulma-css bulma-css-framework bulma-extensions bulma-framework bulma-template bulma-ui bulmacss laravel laravel-framework laravel-package vue vuejs vuejs2
Last synced: 6 days ago
JSON representation
Free Laravel 9.x Jetstream Inertia Bulma Buefy Vue.js 2.x Dashboard
- Host: GitHub
- URL: https://github.com/vikdiesel/admin-one-laravel-dashboard
- Owner: vikdiesel
- License: mit
- Created: 2019-08-28T10:17:40.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-11-21T09:19:22.000Z (about 2 years ago)
- Last Synced: 2024-10-30T07:46:25.412Z (about 2 months ago)
- Topics: buefy, bulma, bulma-admin, bulma-admin-dashboard, bulma-css, bulma-css-framework, bulma-extensions, bulma-framework, bulma-template, bulma-ui, bulmacss, laravel, laravel-framework, laravel-package, vue, vuejs, vuejs2
- Language: Vue
- Homepage:
- Size: 187 KB
- Stars: 142
- Watchers: 7
- Forks: 34
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](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
* [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 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`:
```javascript
mix.js('resources/js/app.js', 'public/js').vue()
.sass('resources/scss/main.scss', 'public/css')
.alias({
'@': 'resources/js',
})
```
## 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
Replace `app.css` with `main.css`:
```php
```
Add before `