Laravel 11 Vue Js Form Submit with V-Form Example

Laravel 11 vue js form submit with v-form library example; Through this tutorial, i am going to show you how to create a register system in Laravel 11 with vue js.

Laravel 11 Vue Js Form Submit with V-Form Library

Follow the below given steps to submit form using v form in Laravel 11 vue js apps:

  • 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

Run the following command on command prompt to install laravel fresh app:

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

Step 2: Add Database Details

Visit to your project .env file and set up database credential and move next step:

 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

Visit to database/migration directory and open create_users_table.php migration file. Then 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) {
     * Reverse the migrations.
     * @return void
    public function down()

Next, migrate the table using the below command:

php artisan migrate

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

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

Run the following command on command prompt to install Vue and install Vue dependencies using NPM:

php artisan preset vue

Install all Vue dependencies:

npm install

Install v-form via npm

npm i axios vform

Step 5: Add Routes

Visit to routes folder and open web.php file and add the following routes into your file:

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

Run the following command on command prompt to create a controller by an artisan:

php artisan make:controller AuthController

Visit to app\Http\Controllers and open AuthController.php file. Then update the following code into your AuthController.php file:

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()
    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 7: Create Vue Component

Visit to resources/assets/js/components folder and create a filed called RegisterComponent.vue.

And update the following code into your RegisterComponent.vue components file:

    <div class="container">
    <div class="post">
    <div class="postinfotop">
       <h2>Create New Account</h2>
        <p id="text" style="color:green; margin-left:100px;"></p>
    <form action="#" class="form newtopic" @submit.prevent="register">
        <div class="accsection">
            <div class="topwrap">
                <div class="userinfo pull-left">
                <div class="posttext pull-left">
                        <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>
                       <input v-model="" 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 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 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 class="clearfix"></div>
       <button type="submit" class="btn btn-primary">Sign Up</button>
    export default {
        data () {
            return {
            form: new Form({
                username: '',
                email: '',
                password: '',
                password_confirmation: '',
        methods: {
            register () {
                    .then(( response ) => { 
                        var attr = document.getElementById("text");
                        attr.innerHTML =;  

Now open resources/assets/js/app.js and include the RegisterComponent.vue component like this:app.js

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 8: Register Vue App

To 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">
    <meta charset="UTF-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('', 'Laravel') }}</title>
    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
    <div id="app">
    <div class="py-4">
    <script src="{{ mix('js/app.js') }}" defer></script>

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


Step 9: Run Development Server

Run the following command on command prompt to start development server:

npm run dev
npm run watch


In this tutorial, you have learned simply how to create a register system in laravel 8 with vue js.

Recommended Laravel Tutorials

Leave a Comment