Laravel Vue JS CRUD SPA (Single-Page Application) Tutorial

Last updated on January 4th, 2022

Here in our Laravel Vue JS CRUD tutorial, we'll share with you how we've created a single-page application (SPA) where we can perform CRUD (create, read, update, delete) operations in MySQL database interactively.

Laravel Vue JS CRUD SPA (Single-page application) demo

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
    require('admin-lte'); 
} catch (e) {}

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';
$fa-font-path: '../webfonts'; 

// Bootstrap
@import '~bootstrap/scss/bootstrap';

// AdminLTE
@import '~admin-lte/dist/css/adminlte.css';

// Fontawesome
@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
@import '~@fortawesome/fontawesome-free/scss/brands.scss';

// Add your custom sass code below...

We need to run scripts from package.json so our app will be aware of changes we've made to our Vue components.

Open new CLI, navigate to your project folder and run npm run watch command to compile all Vue components and watch the files for changes. Npm run watch will recompile all components automatically every time we update them.

run npm run watch command to recompile all components

Now we have 2 instances of CLI running different command.

CLI 1 to serve our app using php artisan serve command.

CLI 2 to watch our files for changes using npm run watch command.

Let's use AdminLTE template now. Create new file inside /resources/views/layouts (e.g. laravel-vue-js-crud-spa.blade.php).

create new layout laravel-vue-crud-spa-blade.php

Copy and paste AdminLTE's HTML structure here to laravel-vue-js-crud-spa-blade.php.

Next, paste the following code inside the head tag.

<!--
We have to include public/css/app.css
Add the following code inside head tag 
-->
<link rel="stylesheet" type="text/css" href="/css/app.css">

<!-- 
We have to include public/js/app.js 
Add the following code before end of body tag
-->
@if( app()->environment('local') )
  <script src="{{ mix('js/app.js') }}"></script>
@else
  <script src="{{ url('/js/app.js') }}"></script>
@endif

Here's how you do those steps.

copy and paste adminlte's html structure to /resources/layouts/laravel-vue-js-crud-spa-blade.php

Edit /resources/views/home.blade.php, replace @extends('layouts.app'); with @extends('layouts.laravel-vue-js-crud-spa').

Here you should have AdminLTE and Font awesome added within your Laravel app.

Next, we'll create our APIs for CRUD operations, then we'll setup API routes.

<?php

namespace App\Http\Controllers\API;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\User;
use Illuminate\Support\Facades\Hash;

class UserController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        $data = User::orderBy('id', 'desc')->paginate(5);
        return response()->json($data);
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        // use /validate method provided by Illuminate\Http\Request object to validate post data
        // if validation fails JSON response will be sent for AJAX requests
        $this->validate($request, [
                'name' => 'required|string|max:191',
                'email' => 'required|string|email|unique:users|max:191',
                'password' => 'required|string|min:6',
            ]
        );

        return User::create([
            'name' => $request['name'],
            'email' => $request['email'],
            'password' => Hash::make($request['password']),
        ]);
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        $user = User::findOrFail($id);

        $this->validate($request, [
                'name' => 'required|string|max:191',
                'email' => 'required|string|email|max:191|unique:users,email,' . $user->id,
                'password' => 'sometimes|min:6',
            ]
        );

        $user->update($request->all());

        return $user;
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        $user = User::findOrFail($id);

        $user->delete();

        return $user;
    }
}

Route::apiResources(['users' => 'API\UserController']);

Resourceful route users we've declared above will create multiple routes necessary for our CRUD operations.

For you to see all available actions our resource route can handle, open new CLI and run php artisan route:list command.

run php artisan route:list command to show list of routes available

Let's conduct a test using Postman app to check if our APIs working. Postman is a famous platform we can use to test APIs.

Launch Postman app.

Let's try first API for getting users and see if it's working.

testing get users API using Postman

a. Create new request.

b. Method should be GET.

c. Provide request URL (e.g. http://your-host:your-port/api/users).

d. Navigate to Headers tab and add 2 keys -- Accept and Content-Type, both values are application/json.

e. Now hit send button.

Upon clicking send button from Postman app, it'll send GET request to API route /api/users. API route /api/users will then trigger UserController's index function. The function will then return JSON response containing users.

Don't forget to save your current settings (press Ctrl + S).

Next, let's try API for creating users.

testing create user API using Postman

a. Create new request again.

b. Set method as POST since we're creating new record and will insert it into our database.

c. Provide request URL (e.g. http://your-host:your-port/api/users).

d. Headers tab settings should be the same as API for getting users.

configure Body settings key value before testing create user API

e. Provide request body (payload). Navigate to Body tab.

f. Select form to easily add keys and values of data. Add the following keys: name, email, password. Provide value for each key.

g. Hit send button.

If validation fails, user details won't be stored in our database and the response body will return JSON response containing message and error details.

If validation successes, the response body will return JSON response containing user details that have been inserted successfully.

Check users table to verify that user details have been inserted into our database.

verifying that create user API successfully inserted user details in database

Now, let's try API for updating users.

testing update user API using Postman

Duplicate API for creating user so we don't have to configure Headers tab again, then do the following:

a. Set method as PUT or PATCH.

b. From the request URL, append user id of user you want to update.

c. Provide request body (payload) (user data to patch). Navigate to Body tab.

d. Select raw to add keys and values of data you want to update.

e. Hit send button.

The response body should return JSON response containing user details we've updated.

At last, let's try API for deleting users.

testing delete user API using Postman

Duplicate API for creating user again, then follow steps below:

a. Set method as DELETE.

b. From the request URL, append user id of user you want to delete.

e. Hit send button right away.

API should return a JSON response containing user details we've deleted.

We now have our APIs for CRUD operations working and ready.

Later we'll use them after we're done creating Vue components necessary for our Laravel Vue JS CRUD SPA.

import Vue from "vue";
import VueRouter from "vue-router"; // We import /Vue router from /vue-router first.

Vue.use(VueRouter) 

import UserManagement from "./components/usermanagement";

const router = new VueRouter({ // Then we register route for User management module.
  routes: [
    {
      path:"/usermanagement",
      name: "usermanagement",
      component: UserManagement
    },
  ],
}); 

export default router // Next we create local registration of /router property, so we can import it within /app.js (our root /Vue instance).

const app = new Vue({
router, // add router property to Vue instance
el: '#app',
});

// Import /Form, /HasError, /AlertError from /vform first.
import { Form, HasError, AlertError } from 'vform'

// Then register /HasError and /AlertError as component (so we can use them as tag later in our HTML).
Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)

// Next, set /window.form as /Form so we can instantiate /Form later within our component.
window.Form = Form;

Vue.component('pagination', require('laravel-vue-pagination')); // Register /pagination as component

// Import /swal from /sweetalert2 first.
import swal from 'sweetalert2';

// Then, set /window.swal as /swal so we can instantiate /swal later within our component.
window.swal = swal;

<!-- We put our HTML code inside template tag -->
<template>
  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Users</h3>
          <div class="card-tools">
            <div class="input-group input-group-sm">
              <!-- Button "add new user". When clicked, it will call /showModal function (function to display modal pop up containing "add new user" form). -->
              <button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" @click.prevent="showModal"><i class="fas fa-user-plus"></i>Add new user</button>
            </div>
          </div>
        </div>
        <div class="card-body table-responsive p-0">
          <!-- Data-table with pagination for user list. -->
          <table class="table table-hover">
            <thead>
              <tr>
                <th>Name</th> 
                <th>Email</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              <!-- Loop through each user record and display user details -->
              <tr v-for="user in users.data" :key="user.id">
                <td class="align-middle">{{ user.name }}</td>
                <td class="align-middle">{{ user.email }}</td>
                <td class="align-middle">
                  <a href="" @click.prevent="editUser(user)">
                    <i class="fa fa-edit"></i>
                  </a>
                  <a href="" @click.prevent="deleteUser(user.id)">
                    <i class="fa fa-trash"></i>
                  </a>
                </td>                     
              </tr> 
            </tbody>
          </table>  
          <nav aria-label="Page navigation example" class="pagination-container">
            <pagination :data="users" @pagination-change-page="getUsers"></pagination>
          </nav>      
        </div>
      </div>
    </div>

    <!-- Modal containing dynamic form for adding/updating user details. -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <!-- Show/hide headings dynamically based on /isFormCreateUserMode value (true/false) -->
            <h5 v-show="isFormCreateUserMode" class="modal-title" id="exampleModalLabel">Add new user</h5>
            <h5 v-show="!isFormCreateUserMode" class="modal-title" id="exampleModalLabel">Update user</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <!-- Form for adding/updating user details. When submitted call /createUser() function if /isFormCreateUserMode value is true. Otherwise call /updateUser() function. -->
          <form @submit.prevent="isFormCreateUserMode ? createUser() : updateUser()">
            <div class="modal-body">
              <div class="form-group">
                <input v-model="form.name" type="text" name="name" placeholder="Name" 
                  class="form-control" :class="{ 'is-invalid': form.errors.has('name') }">
                  <has-error :form="form" field="name"></has-error>
              </div>
              <div class="form-group">
                <input v-model="form.email" type="email" name="name" placeholder="Email" 
                  class="form-control" :class="{ 'is-invalid': form.errors.has('email') }">
                  <has-error :form="form" field="email"></has-error>
              </div>
              <div class="form-group">
                <input v-model="form.password" type="password" name="password" placeholder="Password" 
                  class="form-control" :class="{ 'is-invalid': form.errors.has('password') }">
                  <has-error :form="form" field="password"></has-error>
              </div>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-primary" v-show="isFormCreateUserMode">Save changes</button>
              <button type="submit" class="btn btn-primary" v-show="!isFormCreateUserMode">Update</button>
            </div>
          </form>
        </div>
      </div>
    </div>  
  </div>
</template>

<!-- We put our scripts inside script tag -->
<script>
  // Declare /user-management component
  export default {
    name: 'user-management',
    // Declare users (as object), form (as /vform instance) and /isFormCreateUserMode (as boolean defaulted to 'true') inside /data() { return {} }.
    data() {
      return {
        users: {},
        form: new Form({
          id: '',
          name: '',
          email: '',
          password: ''
        }),
        isFormCreateUserMode: true
      }
    },

    methods: {
      // /getUsers() function. Function we use to get user list by calling api/users method GET. 
      getUsers(page) {
        if (typeof page === 'undefined') {
          page = 1;
        }

        axios.get('api/users', {
          params: {
            page: page
          }
        }).then(data => {
          this.users = data.data;
        });     
      },
      // /showModal() function. Function we use to 1. Set /isFormCreateUserMode to 'true', 2. Reset form data, 3. Show modal containing dynamic form for adding/updating user details.
      showModal() {
        this.isFormCreateUserMode = true;
        this.form.reset(); // v form reset
        $('#exampleModal').modal('show'); // show modal
      },
      // /createUser() function. Function we use to store user details by calling api/users method POST (carrying form input data).
      createUser() {
        // request post
        this.form.post('api/users', {
        }).then(() => {
          $('#exampleModal').modal('hide'); // hide modal

          // sweet alert 2
          swal.fire({
            icon: 'success',
            title: 'User created successfully'
          })

          this.getUsers();

        }).catch(() => {
          console.log('transaction fail');
        });
      },
      // /editUser() function. Function we use to 1. Set /isFormCreateUserMode to 'false', 2. Reset and clear form data, 3. Show modal containing dynamic form for adding/updating user details, 4. Fill form with user details.
      editUser(user){
        this.isFormCreateUserMode = false;
        this.form.reset(); // v form reset inputs
        this.form.clear(); // v form clear errors
        $('#exampleModal').modal('show'); // show modal
        this.form.fill(user);
      },
      // /updateUser() function. Function we use to update user details by calling api/users/{id} method PUT (carrying form input data).
      updateUser(){
        // request put
        this.form.put('api/users/' + this.form.id, {
        }).then(() => {
          $('#exampleModal').modal('hide'); // hide modal
          
          // sweet alert 2
          swal.fire({
            icon: 'success',
            title: 'User updated successfully'
          })

          this.getUsers();
        }).catch(() => {
          console.log('transaction fail');
        });
      },    
      // /deleteUser() function. Function we use to delete user record by calling api/users/{id} method DELETE.
      deleteUser(id) {
        // sweet alert confirmation
        swal.fire({
          title: 'Are you sure?',
          text: "You won't be able to revert this!",
          icon: 'warning',
          showCancelButton: true,
          confirmButtonColor: '#3085d6',
          cancelButtonColor: '#d33',
          confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
          // confirm delete?
          if (result.value) {
            // request delete
            this.form.delete('api/users/' + id, {
            }).then(() => {
              // sweet alert success
              swal.fire(
                'Deleted!',
                'Your file has been deleted.',
                'success'
              )   

              this.getUsers(); // reload table users
            }).catch(() => {
              // sweet alert fail
              swal.fire({
                icon: 'error',
                title: 'Oops...',
                text: 'Something went wrong!',
                footer: '<a href>Why do I have this issue?</a>'
              })
            }); 
          }
        })
      }
    },
    created() {
      // Call /getUsers() function initially. 
      this.getUsers();
    },
    mounted() {
      console.log('Component mounted.')
    }
  }
</script>

<!-- We put our custom css/scss inside style (type can be css or scss) -->
<style type="scss">
  .pagination-container {
    height: 75px;
    display: grid;
  }
  .pagination {
    margin: auto !important;
  }
</style>