Laravel Vue Js Form Submit With Validation Using V-form Package

Hello Artisan

In this tutorial i will guide you how to validate form data in laravel 7 with vue js using v-from. In this tutorial we will validate data before submit to the derver. If the requested data is invalid, then we will show a instant error message without page refresh. And this thing we will do using v-form packages.

v-form is a simple way to handle Laravel back-end validation in Vue. Inspired from Laravel Spark. If you don't know how to use v-form then no problem. I will guide you from step by step. 

In this tutorial we will create a register system in laravel 7 with vue js. We will submit form data without page refresh and will be showed error message if we get non validate data after submit html form.

So let's start our laravel 7 vue js form validation example. 


Step 1: Install Laravel 7

I will show you step by step from scratch. So we have to download laravel first. Run below command.

composer create-project --prefer-dist laravel/laravel blog


Step 2:  Create Migration

We need user table. So paste this below code to users table

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateUsersTable extends Migration
     * Run the migrations.
     * @return void
    public function up()
        Schema::create('users', function (Blueprint $table) {

     * Reverse the migrations.
     * @return void
    public function down()


Now run php artisan migrate to migrate our table.

php artisan migrate


We need to setup our user model. so paste this below code

namespace App;

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;

class User extends Authenticatable
    use Notifiable;
    protected $guarded = [];

    public function setPasswordAttribute($value)
        $this->attributes['password'] = \Hash::make($value);


Step 3:  Create Route

We need route to create our laravel vue js form validation example. So paste this below code.




Step 4:  Create Controller

Now we need auth controller to create those two avobe method. so create auth contoller and paste this below code.


namespace App\Http\Controllers;

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

class AuthController extends Controller
    public function __construct()

    public function show_signup_form()
        if (View::exists('auth.register')) {
            return view('auth.register');


    public function process_signup(Request $request)
        $this->validate($request, [ 
            'username' => 'required',
            'email' => 'required',
            'password' => 'required|confirmed|min:6',

        $user = new User;
        $user->username = $request->username;
        $user->email = strtolower($request->email);
        $user->password = $request->password;

        return response()->json(
                'success' => true,
                'message' => 'Registration is completed'




Step 5:   Install Vue

If you want to install vue in your laravel 7 project then install following laravel ui composer package to get it. So run below command

composer require laravel/ui


Install Vue

php artisan ui vue


Then run 

npm install


Install v-form via npm

npm i axios vform


Now our setup is completed. Now we just need to change our app.js file and our component file.



We are in the last part. Just we need to add some code to app.js file to get support v-form. So add it.



window.Vue = require('vue');

//Import v-from
import { Form, HasError, AlertError } from 'vform'
window.Form = Form;
Vue.component(, HasError)
Vue.component(, AlertError)

Vue.component('register-component', require('./components/RegisterComponent.vue').default);

const app = new Vue({
    el: '#app',


Step 6:   Create blade file

Now time to setup our blade file. open resources/layouts/app.php and paste this following code.



Now open resources/views/post/create.blade.php file and paste this code. 



Now all are set to go. Now just we have to compile our all javascript file. so run below command.

npm run dev 


Read also: Like Dislike Features in Laravel 7 using Vue Js


Now just visit the below url to see the register form. Then you will see the output of this following laravel vue js form validation tutorial with v-form. 




After completing this In tutorial, now we can use v-form in vue js project. We can validate html form data in laravel with vue js. We can store data into database with vue js in laravel using v-form. Hope you will like it.