Laravel Vue Js Form Submit With V-form Package

Hello Artisan

In this brand new tutorial i will explain from scratch that vform laravel vue package how to use. That mean how we can use v-form package and and how to setup it with vue js in Laravel application. In this laravel vue js form validation tutorial i will use v-form package to validate form before submit.

Do you know that 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 that how to validate form in laravel and vue js using v-form package.

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

So after all from this following tutorial you will learn how to use together laravel vue js v-form package and Laravel Vue axios validation example we will also see. So let's see how we print vue get error message laravel application. So let's start laravel vue js form validation.

Step 1: Install Laravel 

I will show you step by step from scratch that how to submit form using vue js laravel. So you have to download laravel first. 

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

Recommended : Laravel 7.x Client Side Form Validation with jQuery Example

Step 2:  Create Migration

We have to create user table. So paste this below code to users table and create migrations

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) {
            $table->id();
            $table->string('username')->unique();
            $table->string('email',191)->unique();
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('users');
    }
}

Now run php artisan migrate to migrate our table.

php artisan migrate

We need to setup our user model. so paste this below code. Here we do accessor to create hash of user password.

App\User.php

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:  Add Route

If you want to create laravel vue js form validation, then paste this below code to your route file.

routes/web.php

Route::get('/register','AuthController@show_signup_form')->name('register');
Route::post('/register','AuthController@process_signup');

Step 4:  Create Controller

Now we need auth controller to create those two avobe method to complete laravel 7 vue js form validation example tutorial. Now you have to create auth contoller and paste this below code.

app/Https/Controller/AuthController.php

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()
    {
        $this->middleware('guest')->except('logout');
    }

    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;
        $user->save();

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

    }

}

Step 5:   Install Vue

If you would like 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

Read also : Dynamic Form Validation in Laravel 7 Using Vue Js

Now our setup is completed to do laravel form validation using vue js. Now we just need to update our app.js file and our component file.

resources/assets/js/components/RegisterComponent.vue

We are in the last part to get laravel vue js form validation example using v-form package. Just we need to update app.js file to get support v-form. So add it in this file.

resources/js/app.js

require('./bootstrap');

window.Vue = require('vue');

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

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

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

Read also : Multi Step Form Submit in Laravel 7.x with Validation

Step 6:   Create blade file

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

resources/views/layouts/app.blade.php

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

resources/views/auth/register.blade.php

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: Laravel 7.x Ajax Form Submit With jQuery Validation

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 know how to use v-form in vue js and laravel project. We can validate html form data in laravel with vue js using v-form package now. We can store data into database with vue js in laravel using v-form now after finishing this tutorial. Hope it can help you.