Register Page Laravel Inertia, Vue 3, dan Tailwind CSS

Pada materi kali ini, kita akan melanjutkan sesi sebelumnya, yaitu melakukan slicing halaman register menggunakan komponen dari template Argon.

Silakan buka file berikut:

resources/js/pages/auth/Register.vue

Selanjutnya, kita akan mengganti seluruh isi file dengan struktur tampilan baru yang telah disesuaikan, menggunakan layout autentikasi (AuthenticatedLayout.vue).

Silakan ubah isi file Register.vue menjadi seperti berikut:

<template>
    <AuthLayout>
        <div
            class="flex flex-col w-full max-w-full px-3 mx-auto lg:mx-0 shrink-0 md:flex-0 md:w-7/12 lg:w-5/12 xl:w-4/12">
            <div
                class="relative flex flex-col min-w-0 break-words bg-transparent border-0 shadow-none lg:py4 rounded-2xl bg-clip-border">
                <div class="p-6 pb-0 mb-0">
                    <h4 class="font-bold">Register</h4>
                    <p class="mb-0">Create your account by filling the information below</p>
                </div>

                <div class="flex-auto p-6">
                    <form @submit.prevent="submit">
                        <div v-if="form.hasErrors" class="mb-4 text-sm text-red-600">
                            {{ Object.values(form.errors)[0] }}
                        </div>

                        <div class="mb-4">
                            <input v-model="form.name" type="text" placeholder="Name"
                                class="focus:shadow-primary-outline dark:bg-gray-950 dark:placeholder:text-white/80 dark:text-white/80 text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding p-3 font-normal text-gray-700 outline-none transition-all placeholder:text-gray-500 focus:border-fuchsia-300 focus:outline-none"
                                required autocomplete="name" />
                        </div>

                        <div class="mb-4">
                            <input v-model="form.email" type="email" placeholder="Email"
                                class="focus:shadow-primary-outline dark:bg-gray-950 dark:placeholder:text-white/80 dark:text-white/80 text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding p-3 font-normal text-gray-700 outline-none transition-all placeholder:text-gray-500 focus:border-fuchsia-300 focus:outline-none"
                                required autocomplete="username" />
                        </div>

                        <div class="mb-4">
                            <input v-model="form.password" type="password" placeholder="Password"
                                class="focus:shadow-primary-outline dark:bg-gray-950 dark:placeholder:text-white/80 dark:text-white/80 text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding p-3 font-normal text-gray-700 outline-none transition-all placeholder:text-gray-500 focus:border-fuchsia-300 focus:outline-none"
                                required autocomplete="new-password" />
                        </div>

                        <div class="mb-4">
                            <input v-model="form.password_confirmation" type="password" placeholder="Confirm Password"
                                class="focus:shadow-primary-outline dark:bg-gray-950 dark:placeholder:text-white/80 dark:text-white/80 text-sm leading-5.6 ease block w-full appearance-none rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding p-3 font-normal text-gray-700 outline-none transition-all placeholder:text-gray-500 focus:border-fuchsia-300 focus:outline-none"
                                required autocomplete="new-password" />
                        </div>

                        <div class="text-center">
                            <button type="submit" :disabled="form.processing"
                                :class="{ 'opacity-50 cursor-not-allowed': form.processing }"
                                class="inline-block w-full px-16 py-3.5 mt-6 mb-0 font-bold leading-normal text-center text-white align-middle transition-all bg-blue-500 border-0 rounded-lg cursor-pointer hover:-translate-y-px active:opacity-85 hover:shadow-xs text-sm ease-in tracking-tight-rem shadow-md bg-150 bg-x-25">
                                Register
                            </button>
                        </div>
                    </form>
                </div>

                <div class="text-center pt-0 px-1 sm:px-6">
                    <p class="text-sm">
                        Already have an account?
                        <Link href="/login" class="text-blue-500 font-semibold">Sign in</Link>
                    </p>
                </div>
            </div>
        </div>
    </AuthLayout>
</template>

<script setup>
import { useForm, Link } from '@inertiajs/vue3'
import AuthLayout from '@/layouts/AuthenticatedLayout.vue'

const form = useForm({
    name: '',
    email: '',
    password: '',
    password_confirmation: ''
})

function submit() {
    form.post(route('register'), {
        onFinish: () => form.reset('password', 'password_confirmation'),
    })
}
</script>

template

Struktur tampilan ditulis di dalam tag <template> dan dibungkus oleh komponen AuthLayout, yang berfungsi sebagai layout halaman otentikasi (login/register).

<AuthLayout>...</AuthLayout>

Layout ini membuat tampilan halaman login dan register tetap konsisten serta terpisah dari tampilan utama setelah user login.

Struktur Tampilan Form Register

a. Container Utama

<div class="flex flex-col w-full max-w-full px-3 mx-auto lg:mx-0 md:flex-0 md:w-7/12 lg:w-5/12 xl:w-4/12">

• Container responsif untuk membungkus form register.
• Lebar disesuaikan di berbagai ukuran layar (lg:w-5/12, xl:w-4/12).

b. Kotak Form

<div class="relative flex flex-col min-w-0 break-words bg-transparent ...">

• Ini adalah box utama form dengan gaya rounded, shadow, dan padding yang membuat tampilan modern dan rapi.

Header Form

<h4 class="font-bold">Register</h4>
<p class="mb-0">Create your account by filling the information below</p>

• Menjelaskan bahwa ini adalah halaman untuk mendaftar akun baru.

Form Input dan Validasi

<form @submit.prevent="submit">

• Form akan mengirim data menggunakan metode Inertia.js tanpa reload halaman.

a. Error Handling

<div v-if="form.hasErrors" class="mb-4 text-sm text-red-600">
    {{ Object.values(form.errors)[0] }}
</div>

• Menampilkan error pertama dari object form.errors, biasanya validasi dari backend.

b. Input Fields

<input v-model="form.name" type="text" placeholder="Name" ... />
<input v-model="form.email" type="email" placeholder="Email" ... />
<input v-model="form.password" type="password" placeholder="Password" ... />
<input v-model="form.password_confirmation" type="password" placeholder="Confirm Password" ... />

• Masing-masing field dibungkus dengan v-model agar nilai selalu sinkron ke form.
• Sudah lengkap dengan validasi HTML (required, type="email", dll).
• Styling menggunakan Tailwind dari tema Argon dengan dukungan dark mode.

c. Tombol Register

<button type="submit" :disabled="form.processing" ...>Register</button>

• Tombol ini akan mengirim form.
• Jika sedang diproses (form.processing), tombol akan disable dan ditandai dengan opacity-50.

Link ke Halaman Login

<p class="text-sm">
    Already have an account?
    <Link href="/login" class="text-blue-500 font-semibold">Sign in</Link>
</p>

• Menggunakan komponen Link dari Inertia agar navigasi antar halaman tetap cepat tanpa reload penuh.

Script Setup

import { useForm, Link } from '@inertiajs/vue3'
import AuthLayout from '@/layouts/AuthenticatedLayout.vue'

• useForm digunakan untuk mengelola data form secara reaktif dan menangani validasi serta status kirim.
• Link untuk navigasi antar halaman.
• AuthLayout digunakan sebagai layout halaman.

a. Object Form

const form = useForm({
    name: '',
    email: '',
    password: '',
    password_confirmation: ''
})

• Data yang akan dikirim saat user menekan tombol "Register".

b. Fungsi Submit

jsSalinEditfunction submit() {
    form.post(route('register'), {
        onFinish: () => form.reset('password', 'password_confirmation'),
    })
}

• Mengirim data ke route register (pastikan tersedia di web.php Laravel).
• Setelah proses selesai, field password akan dikosongkan kembali untuk keamanan.

Preview

Silakan jalankan project menggunakan perintah composer run dev, kemudian jika kita akses halaman:

http://127.0.0.1:8000/register

maka akan terlihat seperti berikut ini:

Silakan teman-teman coba terlebih dahulu untuk mendaftarkan (register) akun baru melalui halaman yang sudah kita buat tadi. Proses ini penting untuk memastikan bahwa alur autentikasi berjalan dengan baik.

Setelah proses registrasi berhasil, nantinya pengguna akan langsung diarahkan ke halaman dashboard utama. Artinya, baik setelah login maupun register, pengguna akan masuk ke area yang sama yaitu dashboard—yang akan menjadi titik awal aktivitas pengguna dalam aplikasi kita.

Pada pertemuan berikutnya, kita akan mulai melakukan slicing tampilan untuk halaman dashboard ini. Jadi pastikan proses register dan login sudah berjalan mulus di sisi kalian masing-masing.