Laravel + Inertia + Vue 3: Formlar, Doğrulama ve Dosya Yüklemeleri Doğru Şekilde Yapma

İlk Kısmı – Hızlı Kurulum

Yeni bir Laravel projesine başlamak için Inertia ve Vue 3 ile yapılandırın:

laravel new my-app --using=laravel/vue-starter-kit
cd my-app
npm install

Her şey hazır. Laravel, Inertia ve Vue 3 kutudan çıkmış bir şekilde yapılandırıldı. İki sunucuyu çalıştırın:

php artisan serve        # Laravel :8000'de
npm run dev              # Vite :5173'de

http://localhost:8000 adresine gidin – varsayılan kimlik doğrulama şablonunu görmelisiniz. Inertia çalışıyor.

💡 Zaten bir projeniz var mı? Eğer Inertia’yı mevcut bir Laravel uygulamasına ekliyorsanız, resmi kurulum kılavuzuna göz atın – bu işlem yaklaşık 10 dakika sürüyor. Bir Vue sayfasının render edildiğinden emin olduktan sonra geri dönün.

Bir Kullanıcı Profili özelliği etrafında her şeyi oluşturacağız; adınızı, e-posta adresinizi ve avatarınızı güncelleyeceğiz. İzlemesi kolay, öğrenmek açısından gerçek bir uygulama.

Öncelikle, rota ve denetleyiciyi oluşturalım:

php artisan make:controller ProfileController

// routes/web.php
Route::middleware('auth')->group(function () {
    Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');
    Route::post('/profile', [ProfileController::class, 'update'])->name('profile.update');
});

// app/Http/Controllers/ProfileController.php
public function edit(): Response
{
    return Inertia::render('Profile/Edit', [
        'user' => auth()->user()->only('name', 'email', 'avatar')
    ]);
}

Inertia::render() kullanarak yanıt döndürdüğümüzü unutmayın – bu, normal bir Laravel denetleyicisinden tek farkımızdır. Diğer her şey aynı kalır.

Vue bileşenini oluşturalım:

mkdir resources/js/Pages/Profile
touch resources/js/Pages/Profile/Edit.vue

script setup>
const props = defineProps({
    user: Object
})
const form = useForm({
    name: props.user.name,
    email: props.user.email,
    avatar: null,
})

function submit() {
    form.post(route('profile.update'))
}
script>

template>
    
template>

İki önemli nokta:

• v-model="form.name" – girişi doğrudan useForm() durumuna bağlar, ek bir ref() gerekli değildir.
• form.errors.name – sunucu tarafı doğrulama hataları burada otomatik olarak görünür, haritalama kodu yok.

Laravel Tarafı

FormRequest oluşturun:

php artisan make:request UpdateProfileRequest

// app/Http/Requests/UpdateProfileRequest.php
public function rules(): array
{
    return [
        'name'  => ['required', 'string', 'max:255'],
        'email' => ['required', 'email', 'unique:users,email,' . auth()->id()],
    ];
}

Denetleyiciyi güncelleyin:

// app/Http/Controllers/ProfileController.php
public function update(UpdateProfileRequest $request): RedirectResponse
{
    auth()->user()->update($request->validated());
    return back()->with('success', 'Profil başarıyla güncellendi.');
}

Bu kadar – $request->validate() yok, manuel hata döndürme yok, JSON yanıtları yok. Laravel doğrulamayı halleder, Inertia hata taşır, useForm() görüntülemeyi ele alır. Tüm zincir çalışır.

Sonraki Adımlar

• Manuel axios form yönetiminin gereksiz şablonlar oluşturduğunu anlamak
• useForm() ile kutudan çıkan her şeyi ve bunun Laravel ile nasıl iletişim kurduğunu öğrenmek
• Gerçek bir form oluşturmak, sunucu tarafı doğrulama ve otomatik hata görüntüleme ile
• Önceden doldurulması gereken formlar, kirli durum takibi, sıfırlama ve iptal etme işlevleri
• Dosya yükleme ile gerçek bir ilerleme çubuğu ve uygun sunucu tarafı doğrulaması
• Tüm kenar durumları – eski dosya temizleme, sunucu sınırları, başarıdan sonra girdi sıfırlama