Vue Inertia in Laravel 11: Why SPA and How It Works?

hello guys we continue our mission on larl daily of upgrading older courses to larl 11 and I want to present the newest edition to that is view inertia with larel 11 course it has been updated into a text form course with the latest larel 11 changes and in this video I will read the first few lessons and explain inertia to those of you who haven't tried it so why inertia and how does it work so let's take a look what's inside if you want the full course link will be in the description below so inside this course we're creating a typical crud application just with inertia and vuejs so first the lesson about inertia in general single page applications spas and why you would need that in what situations so if you have a typical RL page for example registration form in the browser network tab you will see all the assets being loaded every time you visit every new page all the CSS JS and images so if you go to login for example again everything is reloaded now with inertia with single page application this is different you visit register it's still all loaded but then you click on login and only those two assets are loaded request for the login page which actually returns Json and 1js request so the result of that login is actually returns Json with the content of the page this part that needs to be replaced with HTML all the other main page page remains unchanged with the same assets that have been loaded before so this is in general how single page applications work with or without inertia now how inertia works with larel the only change in the controller for example is that you return not the blade file but you return inertia render with vuejs component so inertia is kind of a bridge it's not a framework in itself it's a bridge between Lal for example and vue.js but it's not necessarily those too in laral you can use inertia with react for example there's also the version for swelt and on the back end not only laral there's also rails version and now to get more practical we will transform VJs component with API to inertia and this is actually one of the benefits to use inertia is you don't need to create separate laral API you still use it like regular laral controllers just return the vuejs component so the code for typical vuejs component with listing the post for example I won't get too deep into that I will just scroll down to the actual inertia part so the old version before inertia gets the post from the API with axio get and then in the controller this is the API controller that returns all the posts and in this case we also use eloquent API resources now with inertia is different we install inertia then we configure the default layout with with inertia head here and inertia in the body then we also need to configure inertia middleware and this is the part that was changed in laral 11 because in laral 11 middlewares are configured in the bootstrap app file before laral 11 it used to be in app HTTP kernel file so here you add with middleware web handle inertia requests that middleware will be used for passing some parameters and you will see that later in the course if you take the course now on the client we also need to install inertia so after vuejs we install this one and then in the main Javascript file instead of mounting the component this way we create inertia app this will be the main method a bit different syntax and then the main part laral controller instead of having a separate API controller we just return inertia render and on the vuejs side instead of using composes now we are catching the props here then the route to show the post this is not API route again and this is the actual result so the page itself didn't change but now the data is loaded without laral API with the help of inertia and then later in this course we work on building more of that application you can see the table of contents on the right so Spa with links so how to navigate between the pages how to change layout for example list of posts should be different from login and register layout then we create the crud forms and work on on login and register to actually work with inertia again the link to the full course will be in the description below what do you think about inertia do you use that and in general do you use vue.js with larl in my experience the trend is towards tall stack in laravel ecosystem so I see fewer developers using View and more developers using live wire or filament on top but maybe it's just my experience and my kind of a bubble let's discuss in the comments below that's it for this time and see you guys in other videos

Channel: Laravel Daily

Views: 3,911

Keywords:

Id: Pl1aygBWucU

Length: 5min 2sec (302 seconds)

Published: Tue May 07 2024