Comment on page
QuickAdminPanel: Vue.js+Laravel Version
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.
Login form page
Simple Datatable Example
Simple Form Example
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:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const View = { template: '<router-view></router-view>' }
const routes = [
{
path: '/',
component: () => import('@pages/Layout/DashboardLayout.vue'),
redirect: 'dashboard',
children: [
{
path: 'dashboard',
name: 'dashboard',
component: () => import('@pages/Dashboard.vue'),
meta: { title: 'global.dashboard' }
},
{
path: 'user-management',
name: 'user_management',
component: View,
redirect: { name: 'permissions.index' },
children: [
{
path: 'permissions',
name: 'permissions.index',
component: () => import('@cruds/Permissions/Index.vue'),
meta: { title: 'cruds.permission.title' }
},
{
path: 'permissions/create',
name: 'permissions.create',
component: () => import('@cruds/Permissions/Create.vue'),
meta: { title: 'cruds.permission.title' }
},
{
path: 'permissions/:id',
name: 'permissions.show',
component: () => import('@cruds/Permissions/Show.vue'),
meta: { title: 'cruds.permission.title' }
},
{
path: 'permissions/:id/edit',
name: 'permissions.edit',
component: () => import('@cruds/Permissions/Edit.vue'),
meta: { title: 'cruds.permission.title' }
},
]
},
// ... More routes
]
}
]
export default new VueRouter({
mode: 'history',
base: '/admin',
routes
})
For every CRUD, we generate a set of Vue.js components, in the folder resources/adminapp/js/components/[CRUD Folder].
Here's an example of the list page of Transactions CRUD, in resources/adminapp/js/components/Transactions/Index.vue:
<template>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header card-header-primary card-header-icon">
<div class="card-icon">
<i class="material-icons">assignment</i>
</div>
<h4 class="card-title">
{{ $t('global.table') }}
<strong>{{ $t('cruds.transaction.title') }}</strong>
</h4>
</div>
<div class="card-body">
<router-link
class="btn btn-primary"
v-if="$can(xprops.permission_prefix + 'create')"
:to="{ name: xprops.route + '.create' }"
>
<i class="material-icons">
add
</i>
{{ $t('global.add') }}
</router-link>
<button
type="button"
class="btn btn-default"
@click="fetchIndexData"
:disabled="loading"
:class="{ disabled: loading }"
>
<i class="material-icons" :class="{ 'fa-spin': loading }">
refresh
</i>
{{ $t('global.refresh') }}
</button>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-12">
<div class="table-overlay" v-show="loading">
<div class="table-overlay-container">
<material-spinner></material-spinner>
<span>Loading...</span>
</div>
</div>
<datatable
:columns="columns"
:data="data"
:total="total"
:query="query"
:xprops="xprops"
:HeaderSettings="false"
:pageSizeOptions="[10, 25, 50, 100]"
>
<global-search :query="query" class="pull-left" />
<header-settings :columns="columns" class="pull-right" />
</datatable>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import DatatableActions from '@components/Datatables/DatatableActions'
import TranslatedHeader from '@components/Datatables/TranslatedHeader'
import HeaderSettings from '@components/Datatables/HeaderSettings'
import GlobalSearch from '@components/Datatables/GlobalSearch'
export default {
components: {
GlobalSearch,
HeaderSettings
},
data() {
return {
columns: [
{
title: 'cruds.transaction.fields.id',
field: 'id',
thComp: TranslatedHeader,
sortable: true,
colStyle: 'width: 100px;'
},
{
title: 'cruds.transaction.fields.amount',
field: 'amount',
thComp: TranslatedHeader,
sortable: true
},
{
title: 'cruds.transaction.fields.transaction_date',
field: 'transaction_date',
thComp: TranslatedHeader,
sortable: true
},
{
title: 'global.actions',
thComp: TranslatedHeader,
tdComp: DatatableActions,
visible: true,
thClass: 'text-right',
tdClass: 'text-right td-actions',
colStyle: 'width: 150px;'
}
],
query: { sort: 'id', order: 'desc', limit: 100, s: '' },
xprops: {
module: 'TransactionsIndex',
route: 'transactions',
permission_prefix: 'transaction_'
}
}
},
beforeDestroy() {
this.resetState()
},
computed: {
...mapGetters('TransactionsIndex', ['data', 'total', 'loading'])
},
watch: {
query: {
handler(query) {
this.setQuery(query)
this.fetchIndexData()
},
deep: true
}
},
methods: {
...mapActions('TransactionsIndex', [
'fetchIndexData',
'setQuery',
'resetState'
])
}
}
</script>
For the Datatables, we're using the Vue2-Datatable package, which we forked under our own LaravelDaily name, to be able to have more control or fixes if needed.
On the back-end, in Laravel, we generate the API routes and Controllers.
Here's the example routes/api.php:
<?php
Route::group(['prefix' => 'v1', 'as' => 'api.', 'namespace' => 'Api\V1\Admin', 'middleware' => ['auth:sanctum']], function () {
// Abilities
Route::apiResource('abilities', 'AbilitiesController', ['only' => ['index']]);
// Locales
Route::get('locales/languages', 'LocalesController@languages')->name('locales.languages');
Route::get('locales/messages', 'LocalesController@messages')->name('locales.messages');
// Permissions
Route::resource('permissions', 'PermissionsApiController');
// Roles
Route::resource('roles', 'RolesApiController');
// Users
Route::resource('users', 'UsersApiController');
// Contact Company
Route::resource('contact-companies', 'ContactCompanyApiController');
// Contact Contacts
Route::resource('contact-contacts', 'ContactContactsApiController');
// Transactions
Route::resource('transactions', 'TransactionsApiController');
});
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);
}
}
We also generate Laravel API Resources, 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:
<?php
namespace App\Http\Resources\Admin;
use Illuminate\Http\Resources\Json\JsonResource;
class TransactionResource extends JsonResource
{
public function toArray($request)
{
return parent::toArray($request);
}
}
As mentioned above, Authorization is powered by Laravel Sanctum, and for Roles and Permissions on the front-end, we use CASL Vue package, see video demo below: