In August 2020, we released a new separate QuickAdminPanel version that generates Vue.js + Laravel API code.
Notice: this version is available only for the Yearly Plan customers.
Compared to the "classic" generator version with jQuery Datatables, this Vue+Laravel code is totally different.
It's a SPA with a front-end-first approach, where most of the logic is inside Vue, using Vue Components, Vue Router, Vuex. Laravel serves only as an API layer, powered by Laravel Sanctum authentication.
Here are a few screenshots of a simple adminpanel, fully generated without writing a single line of code.
Structure of Generated Vue.js Code
As mentioned above, most of the logic of generated panel is inside of Vue.js SPA application.
That said, the public non-auth part of the website is simple Laravel + Blade, without Vue.js at all, the SPA behavior starts only when you log into the panel.
So, inside of the main Blade file resources/views/layouts/admin/app.blade.php you will find this line:
<div id="app"></div>
And from there, everything happens with Vue, in the folder resources/adminapp/js
Here's the code of the main resources/adminapp/js/app.js:
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap')
window.Vue = require('vue')
window.moment.updateLocale('en', { week: { dow: 1 } })
Vue.config.productionTip = false
Vue.prototype.$jquery = $
import App from './App.vue'
// Core
import router from './routes/routes'
import store from './store/store'
import i18n from './i18n'
// Plugins
import GlobalComponents from './globalComponents'
import GlobalDirectives from './globalDirectives'
import GlobalMixins from './mixins/global'
import { mapGetters, mapActions } from 'vuex'
Vue.use(GlobalComponents)
Vue.use(GlobalDirectives)
Vue.use(GlobalMixins)
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const app = new Vue({
el: '#app',
render: h => h(App),
router,
store,
i18n,
created() {
this.fetchLanguages()
},
methods: {
...mapActions('I18NStore', ['fetchLanguages'])
}
})
Then, all the generated CRUDs are registered as Routes, in resources/adminapp/js/routes/routes.js:
And here's an example API Controller, in app/Http/Controllers/Api/V1/Admin/TransactionsApiController.php:
<?php
namespace App\Http\Controllers\Api\V1\Admin;
use App\Http\Controllers\Controller;
use App\Http\Requests\StoreTransactionRequest;
use App\Http\Requests\UpdateTransactionRequest;
use App\Http\Resources\Admin\TransactionResource;
use App\Models\Transaction;
use Gate;
use Illuminate\Http\Request;
use Illuminate\Http\Response;
class TransactionsApiController extends Controller
{
public function index()
{
abort_if(Gate::denies('transaction_access'), Response::HTTP_FORBIDDEN, '403 Forbidden');
return new TransactionResource(Transaction::advancedFilter());
}
public function store(StoreTransactionRequest $request)
{
$transaction = Transaction::create($request->validated());
return (new TransactionResource($transaction))
->response()
->setStatusCode(Response::HTTP_CREATED);
}
public function create(Transaction $transaction)
{
abort_if(Gate::denies('transaction_create'), Response::HTTP_FORBIDDEN, '403 Forbidden');
return response([
'meta' => [],
]);
}
public function show(Transaction $transaction)
{
abort_if(Gate::denies('transaction_show'), Response::HTTP_FORBIDDEN, '403 Forbidden');
return new TransactionResource($transaction);
}
public function update(UpdateTransactionRequest $request, Transaction $transaction)
{
$transaction->update($request->validated());
return (new TransactionResource($transaction))
->response()
->setStatusCode(Response::HTTP_ACCEPTED);
}
public function edit(Transaction $transaction)
{
abort_if(Gate::denies('transaction_edit'), Response::HTTP_FORBIDDEN, '403 Forbidden');
return response([
'data' => new TransactionResource($transaction),
'meta' => [],
]);
}
public function destroy(Transaction $transaction)
{
abort_if(Gate::denies('transaction_delete'), Response::HTTP_FORBIDDEN, '403 Forbidden');
$transaction->delete();
return response(null, Response::HTTP_NO_CONTENT);
}
}
<?php
namespace App\Http\Resources\Admin;
use Illuminate\Http\Resources\Json\JsonResource;
class TransactionResource extends JsonResource
{
public function toArray($request)
{
return parent::toArray($request);
}
}
For the design, we're using a , based on Bootstrap 4.
For the Datatables, we're using the Vue2-Datatable package, which we , to be able to have more control or fixes if needed.
You can see the contents of all other Vue files by checking out .
We also generate , so it would be easier to customize in the future, but they contain mostly default Laravel code. Example from app/Http/Resources/Admin/TransactionResource.php:
As mentioned above, Authorization is powered by , and for Roles and Permissions on the front-end, we use , see video demo below:
You can look at the full code of this example adminpanel .
