şimdi burada bir çok detay var. policy biraz eski usül onu düzeltmeyi unutma. app.js içinde yer alan undefined ve login.vue’deki layout null kısmı önemli. diğerlerini bakarak anlarsın diye düşünüyorum. bundan sonraki yazdıklarım breeze kullanarak laravelin bize sağladığı kısım olacak. 3-4 farklı eğitimi tekrar alıp en kullanışlı olanı en sonunda sunacağım. sıkıldım
dikkat etmen gereken yer. örneğin bir autocomplete var get ile çalışıyor. cemal yazarken her harfte get isteği atmasını istemiyorsan throttle kullanacaksınız. bunu belli aralıkla yapacaktır. örneğin hızlı bir cemal yazdın. c ve cemal için ayrı örnek veriyorum istek atacaktır. arada tabi hıza göre cem içinde atabilir. belli aralıklarla. ama throttle yazan yerlere bounce yazarsan işlem finalindeki yazıyı sadece istek atar.
burada layout, nav ve navlink gibi temel taslak ve menü ikilisinden oluşan basic bir layout örneği mevcut. burada sizden beklenen copy paste yapmanız değil mantığı kendi temanıza göre uyarlayıp güzel bir iskelet oluşturmanız.
şimdi gelelim bir tane componentimiz var. bunu her yerde kullanıyoruz. her yere ayrı ayrı tanımlamak istemiyoruz. ayrıca onunda dışında setup kısmı var. componentleri ekstra tanımlamaya gerek kalmıyor.
dördüncü yöntem en iyisi. Farklı bir component kullanıyorsun. Nav diye bir componentin olduğunu düşünüyorum. Menu de olabilir ismi her neyse. Burada menü linklerin var.
Makale buradan alıntılanmıştır. öyle uzun uzun anlatmaktansa yenilikleri, basite indirgenmiş şekilde öğrenmeniz daha iyi. bazı kodlar copy pasteden ötürü alt alta çıktı diğer yerden bakabilirsiniz.
Inertia is a tool that bridges the gap between Backend (BE) and Frontend (FE). It allows you to use some of your favorite FE frameworks on Laravel like React and Vue. It is useful in situations where you want to have a monolith. All your code base works in harmony, in one code base.
When I started using Inertia, I had some issues getting used to it. The communication with the Backend is different from what I am used to. That inspired this tutorial.
In this article, I make a CRUD (Create + Read + Update + Delete) with Laravel, Inertia, and Vuejs.
I divided this tutorial into two parts.
Install Inertia on Laravel.
Base setup the files we are going to use for the CRUD.
CRUD. I go over each part of what makes the CRUD. Touching on both BE and FE.
In this tutorial, I assume you have:
Basic knowledge of Laravel.
Basic knowledge of Vuejs.
A simple Laravel installation.
I used the following versions to make this tutorial:
Laravel 10
Vue 3
Inertia 1
Enough of foreplay. Let us begin.
Context
We are going with a classic for this: A CRUD of a simple blog.
We are going to assume that a blog only needs posts.
Every one of our posts has a title and body. Both are strings.
Install
In this section, I install Inertia on a Laravel project. Feel free to skip if you know how to get this done. You should have a Laravel install by this point.
I am going to use the Breeze starter kit. This starter kit has everything we need to kick-start any Inertia project.
Inside of your project run:
composer require laravel/breeze –dev
After that, you should have the new artisan command:
php artisan breeze:install
That will display the different flavors of breeze. Select Vue with Inertia:
In the next steps, I am not selecting anything to keep this simple.
After that, you need to install the node dependencies, run:
npm install
To start the client-side server to run the old usual:
npm run dev
Done and done. Let us get to the files set up.
Base set up
We need to set up the base of our little project. For simplicity’s sake, I am going to skip validation and authentication.
We are focusing on:
Routes.
Migration.
Model.
Controller.
We will make the Vue views and edit the Laravel controllers in the CRUD section.
Model
One nit trick is to use Laravel’s commands to generate everything we need. Run:
php artisan make:model Post -mc
That will generate your model, controller, and migration for you.
Next, throw in the resource routes in your web.php file.
Route::resource(‘posts’, PostController::class);
Get into your new model. In there, set the fillable attribute with the name and body fields to mass assign.
protected$fillable = [‘title’, ‘body’];
Migration
Search for the create posts migration. In the up method add:
$table->string(‘title’); $table->string(‘body’);
With that, we have our basic setup. Now, let’s get to the meat of this article. Let’s build our CRUD.
CRUD
We are here, the point of this article. No more fluff.
This section has the following order:
Read.
Create.
Delete.
Update.
Let’s begin.
Read
In /resources/js/Pages/ make a new folder called Post. In the folder, make an Index.vue component. Add this to it:
1
<template><div><h1>My Inrertia CRUD</h1><table><thead><tr><thv-for="header in headers":key="header">{{header}}</th></tr></thead><tbody><trv-for="post in posts":key="post.id"><td>{{post.title}}</td><td>{{post.body}}</td></tr></tbody></table></div></template><script setup>defineProps({posts:{type:Array,default:()=>[],},}});constheaders=["posts","body"];</script>
This is our Posts’ principal page.
Something to notice here is the props. You’ll notice that there is a “posts” prop there. Inertia injects data thru the props of the “page components”. Page components are the components you render using Inertia’s API on Laravel. More on that on the controller code.
Inside PostController, search for the index function. Put this in there:
We are getting all the posts of the database with $posts = Post::all(). When we pass them to the view with return Inertia::render(‘Post/Index’, [‘posts’ => $posts]); . Very similar to traditional rendering on a Laravel app.
Notice that data sent with Inertia::render is accessible through the components’ props.
Something else to notice is that you don’t need to define the extension of the view.
Create
Before creating we need a button that fdirects us to the create form.
Inside the <script setup> import Inertia’s Link component like so:
import { Link } from“@inertiajs/vue3”;
To create links to other pages within an Inertia app, you will typically use the Inertia <Link> component. This component is a light wrapper around a standard anchor <a> link that intercepts click events and prevents full page reloads. This is how Inertia provides a single-page app experience once your application has been loaded.
See the rest of the article on Inertia’s page on the Link component.
You can use this component exactly how you would use the <a> tag:
<Linkhref=“posts/create”>Create new Post</Link>
This will call the create method inside our PostController.php. Laravel gives you that method is render the view to make new posts. The form view. In the create method put:
Something important here is the useForm helper from Inertia. When we use Inertia, we use this helper for every interaction with the BE. Only GET requests are not made from the form helper.
In the PostController.php file search for the create function and add the following:
Back to the controller search for the store method. This method is in charge of the inserting. In there add:
Notice that I am using the redirect method. This method helps you do redirects. In this case, I am redirecting back to the index method.
The route sub-method allows you to pass the name of the route to the redirect instead of the complete route. If you want to see all your routes and their names run on the root of your project:
php artisan route:list
You should see something like the following:
You can see the name of each route at the right of your terminal.
Delete
Delete is one of the easiest actions. We won’t be making new views for this one. So, head to the Index.vue component. We will make a few additions here.
First on your component’s <script>, we need to make the logic for deletion.
Notice that I am using the same view but I am also passing the post we want to edit. Since we are using the same view, we need to tell it that it’s updating. Hence the ‘isUpdating’ => true part.
Since we are using the same view we need to make a few changes to accommodate the edit part. In the Create.vue view add:
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ımbe burdayım</h1>
</template>
hemen web.phpyi aç.
1
2
3
4
5
useInertia\Inertia;
Route::get('/',function(){
returninertia::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.