Laravel ve Inertia Kullanımı
1. Laravel Projesine Inertia.js Kurulumu
Laravel ve Inertia.js Kurulumu
Öncelikle Laravel projesini oluştur:
Terminal
bash
bash
composer create-project laravel/laravel inertia-app
cd inertia-app Ardından Inertia.js ve gerekli paketleri yükle
Terminal
bash
bash
composer require inertiajs/inertia-laravel Vue.js kullanıyorsan
Terminal
bash
bash
npm install @inertiajs/vue3 React kullanıyorsan
Terminal
bash
bash
npm install @inertiajs/react Son olarak, Inertia için middleware'i Laravel'e ekle
Terminal
bash
bash
php artisan inertia:middleware ve app/Http/Kernel.phpdosyasına middleware'i dahil et
Kernel
Kernel.php
php
protected $middlewareGroups = [
'web' => [
\App\Http\Middleware\HandleInertiaRequests::class,
],
]; 2. Vue ve Inertia.js Entegrasyonu
Vue.js kullanıyorsan, Vue ve Inertia'yı projeye dahil et
Terminal
bash
bash
npm install vue@3 Sonra resources/js/app.js dosyanı oluştur veya düzenle
App Js Dosyası
app.js
js
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/vue3'
createInertiaApp({
resolve: name => import(`./Pages/${name}.vue`),
setup({ el, App, props, plugin }) {
createApp({ render: () => h(App, props) })
.use(plugin)
.mount(el)
},
}) Ve resources/views/app.blade.php dosyanı oluştur
Blade Dosyası
app.blade.php
php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Inertia.js Laravel</title>
@vite(['resources/js/app.js'])
</head>
<body>
@inertia
</body>
</html> 3. İlk Sayfa ve Controller
Bir Inertia sayfası oluşturalım:
resources/js/Pages/Home.vue
Ve bir controller oluşturalım
bash
bash
php artisan make:controller HomeController Controller içeriği
HomeController
HomeController.php
php
namespace App\Http\Controllers;
use Inertia\Inertia;
use Inertia\Response;
class HomeController extends Controller
{
public function index(): Response
{
return Inertia::render('Home', [
'message' => 'Laravel ve Inertia ile çalışıyor!'
]);
}
} Rota tanımlaması
HomeController
wep.php
php
use App\Http\Controllers\HomeController;
Route::get('/', [HomeController::class, 'index']); 4. Sayfalar Arası Geçiş ve Form Gönderme
Sayfalar Arası Geçiş
Inertia'nın Link bileşeni ile yönlendirme yapabilirsin
Inertia
Header.vue
js
<template>
<div>
<h1>Ana Sayfa</h1>
<inertia-link href="/about">Hakkında</inertia-link>
</div>
</template>
<script setup>
import { Link as InertiaLink } from '@inertiajs/vue3'
</script> Form Gönderme
Laravel'e form gönderirken Inertia.post() kullanılabilir:
Vue Sayfası (Contact.vue)
Inertia
Header.vue
js
<script setup>
import { ref } from 'vue'
import { useForm } from '@inertiajs/vue3'
const form = useForm({
name: '',
email: '',
message: ''
})
const submit = () => {
form.post('/contact')
}
</script>
<template>
<form @submit.prevent="submit">
<input v-model="form.name" placeholder="Adınız" />
<input v-model="form.email" type="email" placeholder="E-posta" />
<textarea v-model="form.message" placeholder="Mesajınız"></textarea>
<button type="submit">Gönder</button>
</form>
</template> Laravel Controller (ContactController.php)
Controller
ContactController.php
php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Inertia\Inertia;
class ContactController extends Controller
{
public function store(Request $request)
{
$request->validate([
'name' => 'required',
'email' => 'required|email',
'message' => 'required',
]);
// Burada verileri kaydedebilir veya e-posta gönderebilirsin
return redirect()->back()->with('success', 'Mesajınız gönderildi!');
}
} Rota Tanımlaması (web.php)
Rota
web.php
php
use App\Http\Controllers\ContactController;
Route::post('/contact', [ContactController::class, 'store']);