Laravel 7/6/5.8+ User CRUD using Resource Controller API & VueJS & jQuery

This tutorial will guide you into building the User CRUD for Laravel authentication in less than ten minutes with the help of reactive components from VueJs and resource controller from Laravel.

Pre-requisites:
1. Basic knowledge of Laravel Framework.
2. Authentication scaffolding generated. ( Link )

Steps to be followed during the tutorial:
1. User API Resource Controller
2. Route for API & Web
3. Populate User API Controller
4. Populate Vue Controller

Step 1: Create a Users API Controller using the Artisan command

php artisan make:controller UsersController --resource

Step 2:
— Add the resource API routes to `routes/api.php`

Route::resource(‘/users’, ‘UsersController’);

— Add the route for the view in `routes/web.php`

Route::get(‘/users’, function(){
   return view(‘users’);
})->name(‘users’)->middleware(‘auth’);

— Check the routes:

php artisan route:list

— Add the view to the `resources/views`

@extends('layouts.app')
@section('content')
    <user-component></user-component>
@endsection

Step 3:
Populate the functions for the User API Controller.

Step 4:
— Create a Vue component file and register it in `resources/js/app.js`, after the example component.

Vue.component('user-component', require('./components/UserComponent.vue').default);

— Write the template and the script to drive the component in `resources/js/components/UserComponent.vue`

The final output:

The next part of this series will be about the Roles and Permissions addition to the Users CRUD along with required Vue Components. Please feel free to share the work.

Regards,
Aditya Padhi