Laravel 9 Vue Js Form Submit using V-form Example

Laravel 9 Vue Js Form Submit using V-form Example

Laravel 9 vue js form submit with v-form; In this tutorial, we will learn simply how to create a registration system in laravel 9 with vue js.

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

In this step, we need to install laravel latest application setup, So open terminal OR command prompt and run the following command:

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

Step 2: Add Database Details

After successfully install laravel Application, Go to project .env file and set up database credential and move next step:

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

Step 3: Add On 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: NPM Configuration

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: Add 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 By Command

Next step, open command prompt and run the following command to create a controller by an artisan:

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

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
or 
npm run watch

Conclusion

Laravel 9 vue js form submitted with v-form package example. In this tutorial, we have learned simply how to create a registration system in laravel 9 with vue js.

Recommended Laravel Tutorials

Recommended:-Laravel Try Catch

AuthorAdmin

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including PHP, Python, JavaScript, jQuery, Laravel, Livewire, CodeIgniter, Node.js, Express.js, Vue.js, Angular.js, React.js, MySQL, MongoDB, REST APIs, Windows, XAMPP, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL, and Bootstrap. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

Your email address will not be published. Required fields are marked *