Laravel 9 Vue.js Form Submit using v-form Example

Throughout this Laravel 9 vue js form submit using v-form example tutorial, we are going to share step by step guide for how to create a registration system in laravel 9 with vue js using v-form package.

Laravel 9 Vue Js Form Submit using V-form Example

Follow the following steps to create and submit form using v form in laravel 9 vue js app:

  • Step 1: Download Laravel App
  • Step 2: Connect Database to App
  • Step 3: Update Migration File
  • Step 4: Configure NPM Package
  • Step 5: Make Routes
  • Step 6: Create Controller
  • Step 7: Create Vue Component
  • Step 8: Register Vue App
  • Step 9: Run Development Server

Step 1: Download Laravel App

On the console, screen type the following command and hit enter to generate a new laravel project. You can ignore this step if the app is already installed:

composer create-project laravel/laravel laravel-vue-form-sumbit --prefer-dist

Step 2: Connect Database to App

After successfully install laravel new application, Go to project root directory and open .env file. Then set up database credential in .env file as follow:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=db
DB_USERNAME=root
DB_PASSWORD=

Step 3: Update Migration File

In this step, 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');
    }
}

Next, migrate the table using the below command:

php artisan migrate

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

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

Step 4: Configuration NPM Packages

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

php artisan preset vue

Install all Vue dependencies:

npm install

Install v-form via npm

npm i axios vform

Step 5: Make Routes

Next step, go to routes folder and open web.php file and add the following routes into file:

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

Step 6: Create Controller

php artisan make:controller AuthController

After that, go to app\Http\Controllers and open AuthController.php file. Then update the following code into 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'
            ]
        );
 
    }
 
}

Step 7: Create Vue Component

Next step, go to resources/assets/js/components folder and create a filed called RegisterComponent.vue.

And update the following code into 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>

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

Step 8: Configure Vue with Blade

In this step, we 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>   

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 

Step 9: Run Development Server

Run the following command to start development server:

npm run dev 
npm run watch

Finally, Laravel and Vue.js form submit example tutorial is over. In this tutorial, you have learned how to create a registration system in laravel and vuejs.