laravel vue intertia manuel login, policy

https://github.com/alicancanpolat/vueManuel/commit/8ccf6866361ec07b121c9e1c50ff8160eab777f8

ş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

laravel vue intertia form example, validation, form helper and throttle beonce

evet basit bir örnek.

https://github.com/alicancanpolat/vueManuel/commit/c0c8d59249ddda37e5a2ac19ceab2fe4ed5cf8f7

aşağıda da onun validation kısmı yer almaktadır.

https://github.com/alicancanpolat/vueManuel/commit/26908b2f9bc87e8e87d9bfe43a98e5ea11b69a65

en son form için bunu kullan 🙂 bunda submit tuşuna abanma vs yok. otomatik hepsini form içine alıyor bakınca anlayacaksın zaten.

https://github.com/alicancanpolat/vueManuel/commit/5e6032bd5a991931e3fa9a99eb1441827b5135e0

better performance with throttle and deboundce

lodash yüklü değilse lodash yükle. buna package.json dosyasından bakabilirsiniz. yoksa hemen

npm install lodash –save-dev

gerisi zaten aşağıda yer almakta.

https://github.com/alicancanpolat/vueManuel/commit/3f001cdb8d5510ff86b0943d843d8a6bbd1bc25d

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.

laravel vue dynamic head and meta tag, spa security

dynamic head: https://github.com/alicancanpolat/vueManuel/commit/9b93169322fd58f58d52a5612cb9a4b1d9d22fc1

security dediği öyle gözünüze büyük bişi gelmesin. zaten yapmamız gereken. üyeleri çekerken sadece isimlerini kullanmamız gerekirken mailler gelmesin

https://github.com/alicancanpolat/vueManuel/commit/ceb52196c8fbfc4b5dbc0a971cb5be899ca8739f

laravel vue intertia layout,shared data, persistent layouts and global component registration

https://github.com/alicancanpolat/vueManuel/commit/049384c7ba8223c1f5cff968e4a3d0ac1eb60320

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.

shared data #1

https://github.com/alicancanpolat/vueManuel/commit/4c7ddd6632c80e89cc809b5232020ac97363cc64

basit bir örnek sadece eksikleri mevcut.

shared data #2

burada handleInertiaRequest üzerinden gelen bir datayı okuduk ve yazdık.

https://github.com/alicancanpolat/vueManuel/commit/6bb01ad55cb41f32212493ef2cb75cc22a8d7186

ş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.

global component – https://github.com/alicancanpolat/vueManuel/commit/e929e92415c0d19ff21da76045d7de724ede51bb
script setup – https://github.com/alicancanpolat/vueManuel/commit/6e38a11c3f08e09c8a1f6851b7aa912840e52e6b (ŞİMDİLİK BOKTAN)
persistent layouts – https://github.com/alicancanpolat/vueManuel/commit/2c22b52b55b97ca83203d74f258c17ce7161c02e (ŞİMDİLİK BOKTAN AŞAĞIDAKİ DAHA İYİ)
persistent layoutsv2 – https://github.com/alicancanpolat/vueManuel/commit/0644ab7dab5fffdf27a0add92d64aeda9238ed26

laravel vue intertia menüde aktif linke class atama

üç tane yöntemi var. en kötüsünden başlayarak anlatıyorum. dördüncü yöntemi uygula dırdır yapma.

birinci yöntem, herhangi bir get parametresi aldığında nanay. tavsiye edilmez.

ikinci yöntem;

üçüncü yöntem direkt component isimleriyle.

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.

Menulerin olduğu vue dosyamız şu şekilde.

NavLink dosyamız da şu şekilde.

laravel inertiajs progress indicators

yukarıda bir sayfa yüklenene kadar bir progress bar çıkarıyor. basit bir şey bizler için ama kullanıcı için değerli.

https://inertiajs.com/progress-indicators sitesinden devam.

npm install @inertiajs/progress

sonra app.js dosyamızı açıyoruz.

sayfanın en altına

hepsi bu kadar.

Laravel 11 + Inertia + Vuejs 3 CRUD #1

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.

https://medium.com/@jogarcia/laravel-inertia-vuejs-crud-ebc44bba168f

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.

  1. Install Inertia on Laravel.
  2. Base setup the files we are going to use for the CRUD.
  3. 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:

  1. Read.
  2. Create.
  3. Delete.
  4. 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:

 

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:

public function index() { $posts = Post::all(); return Inertia::render(‘Post/Index’, [‘posts’ => $posts]); }

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:

<Link href=“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:

public function create() { return Inertia::render(‘Post/Create’); }

This controller now will try to redirect us to a new nonexistent view. The view to insert new posts.

In the same folder you made Index.vue component, make a new Create.vue component. In there throw the following code:

 

Something important here is the useForm helper from Inertia. When we use Inertia, we use this helper for every interaction with the BEOnly 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.

<script setup> import { Link, useForm } from “@inertiajs/vue3”; defineProps({ posts: { type: Array, default: () => [], }, }); const headers = [“title”, “body”, “actions”]; const form = useForm({}); const deletePost = (id) => { form.delete(posts/${id}); }; </script>

Yes, we will use the useForm helper to also delete. (Inertia best practices).

Not the most intuitive move by the Inertia guys I agree.

Now, on the template we need to add the delete action. Something simple like this suffices:

<tr v-for=“post in posts” :key=“post.id”> <td>{{ post.title }}</td> <td>{{ post.body }}</td> <td> <button @click=“deletePost(post.id)”>Delete</button> </td> </tr>

Of course, we need to add the deletion logic on the controller now.

Search for the destroy method and add the following:

public function destroy(Post $post) { $post->delete(); return redirect()->back(); }

And that’s that. We are missing the update functionality.

Update

Last but not least we have the update action.

The begin we need to add the Update action link to the table. Inside the Index.vue page, in the same row as the Delete button, add the following:

<td> <button @click=“deletePost(post.id)”>Delete</button> <Link :href=posts/${post.id}/edit></Link> </td>

This will redirect to one of our last unused controller methods “edit”.

Go to the edit method inside PostController.php.

We can make the update view in 2 different ways.

  1. Make a new view and add the logic.
  2. Use the old Create.vue view.

I will use the 2nd way here.

Inside of edit add:

public function edit(Post $post) { return Inertia::render(‘Post/Create’, [‘post’ => $post, ‘isUpdating’ => true]); }

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:

import { onMounted } from “vue”; import { useForm } from “@inertiajs/vue3”; const props = defineProps({ post: { type: Object, default: null, }, isUpdating: { type: Boolean, default: false, }, }); const form = useForm({ title: “”, body: “”, }); const submit = () => (props.isUpdating ? updatePost() : addPost()); const addPost = () => form.post(“/posts”); const updatePost = () => form.put(/posts/${props.post.id}); onMounted(() => { form.title = props.post.title; form.body = props.post.body; });

The only novelty is the put method in form.put. As you may have guessed, it updates.

Take a look at the onMounted method. I am filling it with the post prop.

Finally, we need to add the logic for updating. Find the update method inside PostController and add:

public function update(Request $request, Post $post) { $post->update($request->all()); return redirect()->route(‘posts.index’); }

And with that, we finished our CRUD.

Conclusions

If you are here, congrats! This was a long one. Let’s go over what we covered.

  • We touched on how to install Inertia on Laravel.
  • We did a simple setup to prepare for our CRUD.
  • And finally, we got our CRUD (create, read, update, and delete).

I hope this article is instructive for you. Go with luck.