1. Laravel Projesine Inertia.js Kurulumu
Laravel ve Inertia.js Kurulumu
Öncelikle Laravel projesini oluştur:
Laravel ve Inertia Kullanımı
Mahmut Sarıkaya 1 min read 768 Views 0
Terminal
bash · bash
composer create-project laravel/laravel inertia-app
cd inertia-appArdından Inertia.js ve gerekli paketleri yükle
Terminal
bash · bash
composer require inertiajs/inertia-laravelVue.js kullanıyorsan
Terminal
bash · bash
npm install @inertiajs/vue3React kullanıyorsan
Terminal
bash · bash
npm install @inertiajs/reactSon olarak, Inertia için middleware'i Laravel'e ekle
Terminal
bash · bash
php artisan inertia:middlewareve 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@3Sonra 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 HomeControllerController 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']);Böylece Laravel ile Vue arasında API yazmadan tam entegrasyon sağlamış olduk. Sayfa geçişleri, form gönderme işlemleri ve veri iletimi çok daha kolay hale geldi. Inertia.js sayesinde backend ve frontend arasındaki ayrımı yönetmek daha pratik olur.🚀
Tags: #Laravel #İnertia #php #JavaScript
M
Written by
Mahmut Sarıkaya
Software Developer
Related Posts
Comments
No comments yet. Be the first to share your thoughts!