Hello dev, Today we are going to learn Laravel 9 Vue JS Form Validation Example. This tutorial will cover on laravel 9 vue js form validation with example.
What is Vue JS?
Vue.js is an open-source model–view–view model front end JavaScript framework for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members.
Steps for Laravel 9 Vue JS Form Validation Example:
- Step 1: Installing Fresh new Laravel 9 Application
- Step 2: Creating Database and Configuration
- Step 3: Creating Auth with Breeze
- Step 4: Creating Migration and Model
- Step 5: Creating Routes
- Step 6: Creating Controller
- Step 7: Creating vue Pages
- Step 7: Testing
- Step 7: Conclusion
Also Read: Laravel 9 Vue JS CRUD App using Vite Example
Step 1: Installing Fresh new Laravel 9 Application
First, we are installing a fresh new laravel 9 application. To install a laravel application run the following command in terminal.
composer create-project laravel/laravel vuejs-validation
cd vuejs-validation
Note: “vuejs-validation” is our laravel application name.

Step 2: Creating Database and Configuration
Now, we will create a database. First open phpmyadmin and create a database with name “vuejs-validation” (you may use anything you like).

Now we are going to add the database details to the laravel application. Open .env file and enter the database details.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=vuejs-validation
DB_USERNAME=root
DB_PASSWORD=

Also Read: Laravel 9 Livewire Multi Step Form Wizard Tutorial
Step 3: Creating Auth with Breeze
Now we are going to create auth with breeze. Run the following command in terminal to install breeze library.
composer require laravel/breeze --dev
create authentication with the following command.
php artisan breeze:install vue
Install Node JS package.
npm install
Now run the vite command and make it keep running.
npm run dev
Note: If error occurs then updated node to v16.16.0 and it worked
Now open new terminal and run the migration.
php artisan migrate
Also Read: Laravel 9 Livewire Datatables Example
Step 4: Creating Migration and Model
Here, We are going to create a migration for Posts table. To create a posts migration run the following command.
php artisan make:migration create_posts_table
add the following fields to files migration file.
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('posts', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->text('body');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('posts');
}
};

Run the migration again to create posts table.
php artisan migrate
So now, We will create Post model. To create a Post model run the following command in terminal.
php artisan make:model Post
And add the following code to Post.php model.
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
use HasFactory;
/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'title', 'body'
];
}

Also Read: Install NextUI with React Js in Laravel 9
Step 5: Creating Routes
Now, We are going to create a routes for our application. Add the following two routes to routes/web.php
<?php
use Illuminate\Foundation\Application;
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
use App\Http\Controllers\PostController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('/', function () {
return Inertia::render('Welcome', [
'canLogin' => Route::has('login'),
'canRegister' => Route::has('register'),
'laravelVersion' => Application::VERSION,
'phpVersion' => PHP_VERSION,
]);
});
Route::get('/dashboard', function () {
return Inertia::render('Dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');
require __DIR__.'/auth.php';
Route::get('posts/create', [PostController::class, 'create'])->name('posts.create');
Route::post('posts/store', [PostController::class, 'store'])->name('posts.store');

Step 6: Creating Controller
In this step, we are going to create a File Controller. Create a new file PostController.php in app/Http/Controllers folder and add the following code inside.
app/Http/Controllers/PostController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Inertia\Inertia;
use App\Models\Post;
use Illuminate\Support\Facades\Validator;
class PostController extends Controller
{
/**
* Write code on Method
*
* @return response()
*/
public function create()
{
return Inertia::render('Posts/Create', [
'message' => session('message'),
]);
}
/**
* Show the form for creating a new resource.
*
* @return Response
*/
public function store(Request $request)
{
Validator::make($request->all(), [
'title' => ['required'],
'body' => ['required'],
])->validate();
Post::create($request->all());
return redirect()->route('posts.create')
->with('message', 'Post created successfully.');
}
}

Also Read: Laravel 9 Install Vue JS Example
Step 7: Creating vue Pages
In this last step we are create a Vue Js Pages for File Upload.
Create a new file Create.vue inside resources/js/Pages/Posts and add the following code.
resources/js/Pages/Posts/Create.vue
<script setup>
import BreezeAuthenticatedLayout from '@/Layouts/Authenticated.vue';
import BreezeLabel from '@/Components/Label.vue';
import BreezeInput from '@/Components/Input.vue';
import BreezeTextArea from '@/Components/Textarea.vue';
import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
defineProps({
message: String,
});
const form = useForm({
title: '',
body: ''
});
const submit = () => {
form.post(route('posts.store'));
form.title = '';
form.body = '';
};
</script>
<template>
<Head title="Dashboard" />
<BreezeAuthenticatedLayout>
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Laravel 9 Vue JS Form Validation Example - LaravelTuts.com
</h2>
</template>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div class="p-6 bg-white border-b border-gray-200">
<div v-if="message" class="bg-teal-100 border-t-4 border-teal-500 rounded-b text-teal-900 px-4 py-3 shadow-md my-3" role="alert" >
<div class="flex">
<div>
<p class="text-sm">{{ message }}</p>
</div>
</div>
</div>
<form name="createForm" @submit.prevent="submit">
<div className="flex flex-col">
<div className="mb-4">
<BreezeLabel for="title" value="Title" />
<BreezeInput
id="title"
type="text"
class="mt-1 block w-full"
v-model="form.title"
autofocus />
<span className="text-red-600" v-if="form.errors.title">
{{ form.errors.title }}
</span>
</div>
<div className="mb-4">
<BreezeLabel for="body" value="Body" />
<BreezeTextArea
id="body"
class="mt-1 block w-full"
v-model="form.body"
autofocus />
<span className="text-red-600" v-if="form.errors.body">
{{ form.errors.body }}
</span>
</div>
</div>
<div className="mt-4">
<button
type="submit"
className="px-6 py-2 font-bold text-white bg-green-500 rounded"
>
Save
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</BreezeAuthenticatedLayout>
</template>

Create a new file Textarea.vue inside resources/js/Pages/Components
resources/js/Pages/Components/Textarea.vue
<script setup>
import { onMounted, ref } from 'vue';
defineProps(['modelValue']);
defineEmits(['update:modelValue']);
const input = ref(null);
onMounted(() => {
if (input.value.hasAttribute('autofocus')) {
input.value.focus();
}
});
</script>
<template>
<textarea class="border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" ref="input"></textarea>
</template>

Also Read: How to Remove a Specific Element From an Array in PHP
Step 7: Testing
Now let’s test our Laravel 9 Vue JS CRUD App using Vite Example. Run the following command to start laravel server.
php artisan serve
Also run Vite in new terminal and keep it running.
npm run dev
or build.
npm run build
Now open any web browser and enter the following link to test the application.
http://127.0.0.1:8000
Note: Register a new user and then click posts from navigation.
After Login Open following URL:
http://127.0.0.1:8000/posts/create
Preview:

Step 7: Conclusion
Today, We had learn Laravel 9 Vue JS Form Validation Example. Hope this tutorial helped you with learning Laravel 9. If you have any question you can ask us at comment section below. If you like the tutorial please subscribe our YouTube Channel and follow us on social network Facebook and Instagram.
Also Read: Laravel Vue 3 File Uploading with Progress Bar using Vite Example
[…] Also Read: Laravel 9 Vue JS Form Validation Example […]
[…] Also Read: Laravel 9 Vue JS Form Validation Example […]
[…] Also Read: Laravel 9 Vue JS Form Validation Example […]
[…] Also Read: Laravel 9 Vue JS Form Validation Example […]
[…] Also Read: Laravel 9 Vue JS Form Validation Example […]