Build a Registration System in Vue 3 & Laravel API Using ChatGPT
By Ved Prakash N |
Jul 08, 2026 |
Laravel
This is the source code for the YouTube video.
Laravel Backend
Go to :- routes/api.php
<?php
use App\Http\Controllers\Api\AuthController;
Route::post('/register', [AuthController::class, 'register']);
Create Form Request via Command as follows:-
php artisan make:request RegisterFormRequest
open the file - app/Http/Requests/RegisterFormRequest.php and paste
<?php
namespace App\Http\Requests;
use Illuminate\Contracts\Validation\ValidationRule;
use Illuminate\Foundation\Http\FormRequest;
class RegisterFormRequest extends FormRequest
{
/**
* Determine if the user is authorized to make this request.
*/
public function authorize(): bool
{
return true;
}
/**
* Get the validation rules that apply to the request.
*
* @return array<string, ValidationRule|array<mixed>|string>
*/
public function rules(): array
{
return [
'name' => ['required','string','max:255'],
'email' => ['required','email','unique:users,email'],
'password' => ['required','confirmed','min:8'],
];
}
}
JSON Resource - generate the resource via below command
php artisan make:resource UserResource
Go to:- app/Http/Resources/UserResource.php and paste the below code.
<?php
namespace App\Http\Resources;
use Illuminate\Http\Request;
use Illuminate\Http\Resources\Json\JsonResource;
class UserResource extends JsonResource
{
/**
* Transform the resource into an array.
*
* @return array<string, mixed>
*/
public function toArray(Request $request): array
{
return [
'id' => $this->id,
'name' => $this->name,
'email' => $this->email,
'created_at' => $this->created_at,
];
}
}
Controller - generate the controller via below command
php artisan make:controller Api/V1/AuthController
go to file:- app/Http/Controllers/Api/V1/AuthController.php and paste the below code
<?php
namespace App\Http\Controllers\Api\V1;
use App\Http\Controllers\Controller;
use App\Http\Requests\RegisterFormRequest;
use App\Http\Resources\UserResource;
use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Hash;
class AuthController extends Controller
{
public function register(RegisterFormRequest $request)
{
$user = User::create([
'name' => $request->name,
'email' => $request->email,
'password' => Hash::make($request->password),
]);
return response()->json([
'message' => 'Registration successful.',
'data' => new UserResource($user),
], 201);
}
}
Vue Frontend
Go to :- src/router/index.js and add your route as per your requirement
import RegisterPage from "@/views/auth/Register.vue";
{
path: "/register",
name: "register",
component: RegisterPage,
},
Create a Register.vue page in the following path - views/auth/Register.vue and paste the below code:-
<template>
<div class="min-h-screen flex items-center justify-center bg-gray-100">
<div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
<h2 class="text-3xl font-bold mb-6 text-center">
Create Account
</h2>
<div v-if="serverError" class="bg-red-100 text-red-700 p-3 rounded mb-4">
{{ serverError }}
</div>
<form @submit.prevent="register">
<div class="mb-4">
<label>Name</label>
<input v-model="form.name" type="text" class="w-full border rounded px-3 py-2 mt-1" />
<p class="text-red-500 text-sm">
{{ errors.name }}
</p>
</div>
<div class="mb-4">
<label>Email</label>
<input v-model="form.email" type="email" class="w-full border rounded px-3 py-2 mt-1" />
<p class="text-red-500 text-sm">
{{ errors.email }}
</p>
</div>
<div class="mb-4">
<label>Password</label>
<input v-model="form.password" type="password" class="w-full border rounded px-3 py-2 mt-1" />
<p class="text-red-500 text-sm">
{{ errors.password }}
</p>
</div>
<div class="mb-6">
<label>Confirm Password</label>
<input v-model="form.password_confirmation" type="password"
class="w-full border rounded px-3 py-2 mt-1" />
</div>
<button :disabled="loading"
class="bg-blue-600 text-white w-full py-3 rounded hover:bg-blue-700 disabled:opacity-50">
<span v-if="loading">
Registering...
</span>
<span v-else>
Register
</span>
</button>
</form>
</div>
</div>
</template>
<script setup>
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";
const router = useRouter();
const loading = ref(false);
const serverError = ref("");
const form = reactive({
name: "",
email: "",
password: "",
password_confirmation: "",
});
const errors = reactive({
name: "",
email: "",
password: "",
});
const validate = () => {
errors.name = "";
errors.email = "";
errors.password = "";
let valid = true;
if (!form.name) {
errors.name = "Name is required";
valid = false;
}
if (!form.email) {
errors.email = "Email is required";
valid = false;
}
if (!form.password) {
errors.password = "Password is required";
valid = false;
}
if (form.password !== form.password_confirmation) {
errors.password = "Passwords do not match";
valid = false;
}
return valid;
};
const register = async () => {
if (!validate()) return;
loading.value = true;
serverError.value = "";
await axios.get("/sanctum/csrf-cookie");
try {
const res = await axios.post("/api/register", form);
if(res){
router.push("/login");
}
} catch (error) {
if (error.response?.status === 422) {
const validation = error.response.data.errors;
Object.keys(validation).forEach(key => {
errors[key] = validation[key][0];
});
} else {
serverError.value =
error.response?.data?.message ??
"Something went wrong.";
}
} finally {
loading.value = false;
}
};
</script>
Tailwind Install
install tailwind css via command:-
npm install tailwindcss @tailwindcss/vite
Create a style.css file in following path - src/assets/style.css and open the file and paste the below code:-
@import "tailwindcss";
Go to main.js file and paste the below code and remove the existing css file if exists.
import './assets/style.css'
Go to vite.config.js file and paste the below
import tailwindcss from '@tailwindcss/vite'
plugins: [
tailwindcss(),
],
That's it. Please continue to watch above YouTube Video to understand better.