Laravel 10 vue js form submit with v-form package example. In this tutorial you will learn simply how to create a register system in Laravel 10 with vue js. And as well as, submit data without page refresh and will be showed error message if we get non validate data after submit this form.
And this tutorial will help you step by step on how to use together laravel vue js v-form package and Laravel Vue axios validation example.
Laravel 10 Vue Js Form Submit with V-form Package
- 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, start your terminal to download or install Laravel 10 new setup. Run the following commands in it to install the new Laravel 10 app on your system:
composer create-project --prefer-dist laravel/laravel blog
Step 2: Add Database Details
In this step, open again your terminal/command line/ command prompt. And execute the following command into it to create model and migration files for your laravel applications:
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, 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:
And need to setup our user model. so paste this below code. Here you 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
You need to setup Vue and install Vue dependencies using NPM. So run the following command on command prompt:
Install all Vue dependencies:
Install v-form via npm
Step 5: Add Routes
Next step, go to routes folder and open web.php file and add the following routes into your 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 your 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 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'
]
);
}
}
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 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>
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, 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>
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 10 vue js form submit with v-form package example. In this tutorial you have learned simply how to create a register system in Laravel 10 with vue js.
