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.
