Laravel 11, Vue 3, and Inertia Js / Sanctum #5 Vue ve Inertia Kurulumu

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.

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.

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.

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.

hemen web.phpyi aç.

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.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir