Adding New Page or Component in Laravel Admin


Usually, any admin component would require List, Add, and Edit. In this tutorial, we will List, Add, and Edit Users.

Basic Routing

_vApp is the base directory of AdLara Bootstrap Admin Application. All the routes are defined in routes.js file in the base directory (_vApp).

In most cases, you can access defined routes by accessing urls in the browser along with your AdLara Route path. For example, you may access the following routes by entering

{ path: '/users', component: UserListing }

Component Declaration and Usage

The defined component "UserListing" should be imported in the top of the file:

import UserListing from './pages/users/list.vue'

Routing Parameters

You will need to add route with parameters to capture information from the route. For example, you may want to capture User's ID from the given url:

{ path: '/user/:id', component: UserEdit }

In the component, UserEdit, You can access the User's ID using this.$ in the Vue beforeCreate, created, or mounted events. For more information on how Vue Routing works, please visit

Adding List Component File

Now, create list.vue file under _vApp/pages/users folder:

<template> <div> <Header heading="Admin Users" > <v-btn to="/user/add" color="info" > <v-icon left>mdi-view-list</v-icon> Add User </v-btn> </Header> <Listing endpoint="/users" slug="/user" component="user" > </Listing> </div> </template>

In the above file, Listing component accepts endpoint which will resolve:

So now, we need to define the route 'users' in Laravel Route File routes/admin.php

Route::group(['prefix' => 'api', 'middleware' => 'admin_user'], function () { Route::get('users', 'AdminUserController@initListing'); });

Next, the method initListing of AdminControllers/AdminUserController.php looks like this

public function initListing() { $this->initProcessFilter(); $admin_user = AdminUser::select('id', 'name', 'email') ->orderBy('id', 'desc'); if ($this->filter) { $admin_user->where($this->filter_search); } $this->obj = $admin_user->paginate($this->paginate); $keys = [ 'id' => [ 'text' => 'ID', 'filter' => true ], 'name' => [ 'text' => 'Name', 'filter' => true ], 'email' => [ 'text' => 'Email', 'filter' => true ] ]; return array( 'obj' => $this->obj, 'keys' => $keys ); }

This method returns 'obj' and 'keys'. The keys are the definition of the listing columns and the 'obj' is consisting the records from the database.


Make sure to subscribe to my newsletter and be the first to know about my new post.

Subscribe on Youtube

I post tutorials about various technologies on the youtube channel

Subscribe Now

Make sure to subscribe to my newsletter and be the first to know about my new post.

© 2021