Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 27 days ago
JSON representation

Free Laravel 9.x Jetstream Inertia Bulma Buefy Vue.js 2.x Dashboard

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 `