Laravel 8 Vue Js Form Submit with V form Package

In this tutorial you will learn about the Laravel 8 Vue Js Form Submit with V form Package and its application with practical example.

In this Laravel 8 vue js form submit with v-form package tutorial I will show you how to submit form with V form package in laravel 8 with Vue Js. In this tutorial you will learn submit form data without refreshing the page using v-form package in laravel 8 with Vue Js. Before submit we will also validate the form data and display error message if validation fails.

Table Of Contents−

Laravel 8 Vue Js Form Submit with V form Package

In this step by step tutorial I will demonstrate you how to use laravel vue js v-form package and Laravel Vue axios validation example. Please follow the instruction given below:

Step 1: Download Laravel Fresh App
Step 2: Add Database Detail
Step 3: Add On Migration File

Step 4: NPM Configuration
Step 5: Add Routes
Step 6: Create Controller By Command

Step 7: Create Vue Component
Step 8: Register Vue App
Step 9: Run Development Server

Step 1: Download Laravel Fresh App

First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command

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

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

Step 2: Add Database Details

Now, lets create a MySQL database and connect it with laravel application. After creating database we need to set database credential in application’s .env file.

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=here your database name here
DB_USERNAME=here database username here
DB_PASSWORD=here database password here

DB_CONNECTION=mysql

DB_HOST=127.0.0.1

DB_PORT=3306

DB_DATABASE=here your database name here

DB_USERNAME=here database username here

DB_PASSWORD=here database password here

Step 3: Add On Migration File

In this step, you need to open create_users_table.php migration file from database>migrations and replace up() function with following code:

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');
    }
}

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 following command to migrate database schema.

php artisan migrate

1	php artisan migrate

Now, you need to update user model. Please put the following code in it.

App\Models\User.php

namespace App/Models;
 
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);
    }
}

namespace App/Models;

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 4: NPM Configuration

You need to setup Vue and install Vue dependencies using NPM. So run the following command on command prompt:

php artisan preset vue

1	php artisan preset vue

Install all Vue dependencies:

npm install

1	npm install

Install v-form via npm

npm i axios vform

1	npm i axios vform

Step 5: Add Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

use App\Http\Controllers\AuthController;
 
Route::get('register', [AuthController::class, 'show_signup_form']->name('register');
Route::post('register', [AuthController::class, 'process_signup']);

use App\Http\Controllers\AuthController;

Route::get('register', [AuthController::class, 'show_signup_form']->name('register');

Route::post('register', [AuthController::class, 'process_signup']);

Step 6: Create Controller By Command

Now, lets create a controller named AuthController using command given below –

php artisan make:controller AuthController

1	php artisan make:controller AuthController

Now, go to app\Http\Controllers and open AuthController.php file. Then put the following code into your AuthController.php file:

<?php
namespace App\Http\Controllers;
 
use App\Models\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'
            ]
        );
 
    }
 
}

<?php

namespace App\Http\Controllers;

use App\Models\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 7: Create Vue Component

Now, we will create a Vue compoent. Go to resources/assets/js/components folder and create a filed called FileUpload.vue. And put the following code into your RegisterComponent.vue components file:

<template>
<div class="container">
<div class="post">
<div class="postinfotop">
<h2>Create New Account</h2>
<p id="text" style="color:green; margin-left:100px;"></p>
</div>
<form action="#" class="form newtopic" @submit.prevent="register">
<div class="accsection">
<div class="topwrap">
<div class="userinfo pull-left">
</div>
<div class="posttext pull-left">
<div>
<input v-model="form.username" type="text" placeholder="Username" class="form-control" :class="{ 'is-invalid': form.errors.has('username') }" name="username">
<has-error :form="form" field="username"></has-error>
</div>
<div>
<input v-model="form.email" type="text" placeholder="Email" class="form-control" :class="{ 'is-invalid': form.errors.has('email') }" name="email">
<has-error :form="form" field="email"></has-error>
</div>
<div class="row">
<div class="col-lg-6 col-md-6">
<input v-model="form.password" type="text" placeholder="password" class="form-control" :class="{ 'is-invalid': form.errors.has('password') }" name="password">
<has-error :form="form" field="password"></has-error>
</div>
<div class="col-lg-6 col-md-6">
<input v-model="form.password_confirmation" type="text" placeholder="Confirm password" class="form-control" :class="{ 'is-invalid': form.errors.has('password_confirmation') }" name="password_confirmation">
<has-error :form="form" field="password_confirmation"></has-error>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>  
</div>
<button type="submit" class="btn btn-primary">Sign Up</button>
</form>
</div>
</div>
</template>
<script>
export default {
data () {
return {
form: new Form({
username: '',
email: '',
password: '',
password_confirmation: '',
})
}
},
methods: {
register () {
this.form.post('/register')
.then(( response ) => { 
var attr = document.getElementById("text");
attr.innerHTML = response.data.message;  
this.form.reset();
})
},
}       
}
</script>

<h2>Create New Account</h2>

</div>

</div>

<div>

<has-error :form="form" field="username"></has-error>

</div>

<div>

<has-error :form="form" field="email"></has-error>

</div>

<has-error :form="form" field="password"></has-error>

</div>

<has-error :form="form" field="password_confirmation"></has-error>

</div>

</div>

</form>

</div>

</template>

export default {

data () {

return {

form: new Form({

username: '',

email: '',

password: '',

password_confirmation: '',

})

}

methods: {

this.form.post('/register')

.then(( response ) => {

var attr = document.getElementById("text");

attr.innerHTML = response.data.message;

this.form.reset();

})

}

</script>

Now open resources/assets/js/app.js and include the RegisterComponent.vue component like this: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',
});

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',

});

Step 8: Register Vue App

In this step, you will create a blade view file to define Vue’s app. Go to resources/views folder and make a file named app.blade.php. Then update the following code into app.blade.php as follow:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div id="app">
<div class="py-4">
@yield('content')
</div>
</div>
<script src="{{ mix('js/app.js') }}" defer></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>{{ config('app.name', 'Laravel') }}</title>

<title>Document</title>

</head>

<body>

@yield('content')

</div>

</body>

</html>

Now go to resources/views/auth/register.blade.php file and paste this code.

resources/views/auth/register.blade.php

@extends('layouts.app')
@section('content')
<register-component></register-component>
@endsection

@extends('layouts.app')

@section('content')

<register-component></register-component>

@endsection

Step 9: Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

npm run dev
or 
npm run watch

npm run dev

npm run watch

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 8 Vue Js Form Submit with V form Package