Diğer değerlerden farklı bir şekilde devam edeceğiz.
https://inertiajs.com/server-side-setup
burada kurulum mevcut. ilk önce composer kodumuzu yazalım.
composer require inertiajs/inertia-laravel
sonra aynı sitede aşağıdaki kodu göreceksiniz. app.blade.php dosyası oluşturup içine o kodu giriniz.
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> @vite('resources/js/app.js') @inertiaHead </head> <body> @inertia </body> </html> |
bootstrap kullanacağım için hemen bootstrap cdn linklerini head tag arasına alıyorum.
bak sitedekinden farklı hiçbişi yapmıyorum. şimdi bize diyor middleware oluştur. hay hay
php artisan inertia:middleware
bunu da oluşturduk.
şimdi hemen altında bu middleware’ı ekleyeceğimiz yer var. eskiden kernel kullanıyorduk şimdi bootstrap/app.php dosyasını kullanacağız.
1 2 3 4 5 6 7 |
use App\Http\Middleware\HandleInertiaRequests; ->withMiddleware(function (Middleware $middleware) { $middleware->web(append: [ HandleInertiaRequests::class, ]); }) |
ekledik.
şimdi server-side kısmını tamamladık. şimdi client-side tarafını yapacağız. artık burada vue.js kuracağız.
https://inertiajs.com/client-side-setup burada sırayla hepsi var.
npm install @inertiajs/vue3
npm install vue
vite ile derleyeceğimiz hemen onu da kuralım.
npm install @vitejs/plugin-vue
hemen arkasından vite.config.js dosyasını aç.
import vue from ‘@vitejs/plugin-vue’;
bu kodu tepeye importların içine ekle. sonra vue ile başlayan kodu ekle. son hali aşağıda oradan o kodu bulabilirsin.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ plugins: [ laravel({ input: ['resources/css/app.css', 'resources/js/app.js'], refresh: true, }), vue({ template:{ transformAssetUrls:{ base:null, includeAbsolute:false, } } }) ], }); |
az işimiz kaldı. resources/js/app.js dosyasını aç. client-side linkindeki Initialize the Inertia app başlığı altındaki kodu oraya komple yapıştır.
orada bir kod var. return pages[./Pages/${name}.vue
] diye. yani js klasör altında Pages altında tüm vue dosyalarımız olacak. bunun için js içine Pages ve onun içine create.vue diye bir dosya oluşturuyoruz. içine merhaba yazalım.
1 2 3 4 5 6 |
<script setup> </script> <template> <h1>burdayım be burdayım</h1> </template> |
hemen web.phpyi aç.
1 2 3 4 5 |
use Inertia\Inertia; Route::get('/', function () { return inertia::render('create'); }); |
bak ne oldu? view yerine inertiayı koyduk. create oluşturduğumuz dosyanın adı. nerede arıyor bunu? pages içinde.
hemen terminalden npm install komutunu çalıştır. sonra npm run dev yap seriden. derlesin.