Vee Validate show errors by REST API server messages Laravel + Vue.js

In your Laravel + Vue Application, you have to do two validations to make error-free application

  • 1 Client side validation
  • 2 Server side validation

We are using popular Vee Validate Vue.js package for the client-side validation.

In this article, I am going to show you how you can do the server-side validation and show the error message in your Vue.js code.

Laravel is our backend, and I am going to create a new user by calling Rest API endpoint /api/user.

This endpoint will execute the following located in your UserController.php file.

You can see that I am validating two things here.
1 Checking the email is already exists in users table
2 Fist name is required

If I send the post request from my Vue.js application I should receive the error message to my catch block of the axios promise

Important
You have to add the following code to your Vue complement to make this work otherwise you can not see this error messages