This tutorial will show you how to create a simple crud application using Laravel 5.7, VueJS, and AdminLTE . I assume that you already know how to install Laravel 5 on your system. If you don’t, please refer to the official website. If you have laravel 5 already in your system. Then we’re good to go.

Environment and Layout Preparations

Install NPM Dependencies

The first thing we need to do is to install the node package manager dependencies. Open your terminal command, go to your app directory, and type the command :

Install AdminLTE

For our backend purpose, we will use AdminLTE for the theme. Install it by this command:

Enable Laravel Login and Register

To enable registration and login, create the auth from the Laravel system:

Click Register on the upper right corner, and register your username and password.

Migrate your database to create the users table :

Master Layout AdminLTE

Create a new file as our master layout. Master.blade.php inside resource/views/layouts folder. And use the starter AdminLTE3 :

Create Master Layout

Add your own logo.png and profile.png and put them inside /public/img folder.

master.blade.php

Modify home.blade.php to extends the layouts master

Modify bootstrap.js

Add adminlte to app.scss

Open resources/sass/app.scss and add the path from node_modules folder to adminlte:

Run the npm from the terminal :

If you encounter any vue mismatch error, run the following command :

Installing Font Awesome

Linking fontawesome to app.scss :

Run php artisan serve and login:

Installing Vue Router

Next up we will install the Vue Router :

When the installation has finished, open js/app.js and add the routes and router and the Profile and Dashboard components :

Create Profile.vue and Dashboard.vue component inside resources/js/components :

Add <router-view> to our master template at the main-content section :

Update the href link

Next up is to update our href link.

Run npm run watch, try to click the dashboard and profile url.

Detecting Active Menu

To avoid 404 not found error for every path, let’s add a new route for routes/web.php:

Modify master.blade.php to delete the active class on Management menu.

If we inspect element, there’s a class whenever we click the active menu. The router-link-exact-active menu. Add this class styling to resources/sass/app.scss :

Customizing User Table

Add Attributes to users table

Attribute type, bio, photo to users table migration :

Run the migration

User Management CRUD

User Component

Now we are getting closer into the main topic of this tutorial, the CRUD on users. First of all, we will create the user component.

Create User Component

Create the users.vue component inside resources/js/components folder :

Users.vue component already has modal. It will pop up whenever we click the Add User button.

Register the users component inside app.js :

Using V-Form

V-Form is a simple way to handle laravel back-end validation in Vue 2. Install it by typing this command :

Import the form to app.js

Bootstrap Modal and Form

Next, modify Users.vue to add the data method and HTML form for the modal :

API Resource Controller

First, let’s create a UserController inside API folder :

Add the api resources to routes/api.php

Insert User Data To Database

First, we need to enable the mass insertion on User model :

Store the User

Open the API\UserController and modify the use and store method :

Now fill in the form and push Create User :

Check your database, the new user will be available :

V-Form Server Validation

To create validate is quite straightforward. You need to add the validation rule on the controller method :

Displaying Users using /GET

Install vue-progressbar and sweetalert2

Add the public function index() inside UserController :

Modify the Users.vue component to add the loadUsers method when the page has been loaded. Add a users variable as an empty object.

Loop through users by modifying the table body :

Run the app :

Vue Filter and Moment.JS

Vue has a filter method to return output for the attribute as we want. For example, we want to capitalize first letter of user type.

Open app.js and add these lines :

Use this filter to Users component :

Next for the Registered At column, let’s create this filter :

However, we need to install moment.js and sweet alert2 :

Use this filter to Users component :

DELETE User Route

We will use sweetalert2 to delete a user. Previously, we need to add event when the trash icon is clicked is Users.vue component :

Add delete user method :

Modify UserController and add the destroy method :

Try to click the trash icon :