NEW Inertia 3 Beta: Main Things You Need to Know (Project Example)

Hello guys, last week the official Laravel core team released inertia 3 in beta version presented it at Laracon EU. In this video, I will show you the demo example with new features what has changed between inertia 2 and inertia 3 beta. On this example of Laravel starter kit view inertia project. So in this demo project I have two branches v3 and v2 and let me show you the difference. So here you see resources js app ts typescript and this is all you need to write to initialize inertia. If we take a look at git changes and we can see appts see this is gone const create inertia app all of that is gone and only create inertia app is still present so much shorter and this is now handled by the new if we go to package json by the new inertia vit package. So now there is not just inertia view but also inertia vit both in beta.2 at the moment but version three and also I want to show you vit configt ts for that. import inertia from inertia v and inertia here. That's it. And also another change is as you can see SSR is not required here anymore. Why? Because according to the official announcement blog article SSR without a separate server now SSR works automatically during development and that also comes with a new vit plugin. So now in the get changes we can see that SSRTs which looked like this now it is gone it can be deleted. The next new feature I want to show you is called optimistic updates. So first let me show you the inertia 2 version. Imagine you are on the page of bookmarks and you want to hit a star and deliberately there is a sleep three in the controller of that. So while the sleep is in progress for 3 seconds, that star doesn't change until the action is finished. So in the bookmark controller, there's sleep three in the toggle favorite. And that star in the view code looks like this. So button spinner and at click handle toggle favorite which looks like this. Router post. So this is the code. Now how does it look in inertia 3 with optimistic updates. Now in version three I've commented out the older code with spinner. So in V3 we have button and we have star and all we have is is favorite and then we have yellow star or not yellow star right. So we don't have any spinners or loading indicators here although in the controller still the same sleep three. So in the handle toggle favorite which is also changed now. So we had this code which is commented out also. Now we have router optimistic added before post. So we had just router post. Now we have router optimistic. How does that work now? So we reload the page and we click the star and as you can see it's immediately updated although on top sleep hasn't finished. So the essence of optimistic update. This is in the name. It updates the state on the page visually optimistically thinking that it will succeed on the server. But what if it doesn't? For example, if controller fails for whatever reason, die. Let's try it out. Refresh the page and click the star. Oh, it will actually die. But anyway, the idea is that it would roll back. So now if we refresh, the star isn't changed. As you saw, it was for a second, but if we go back, it still is back. So look at that. For fraction of a second, it was white, but now it was rolled back. The next thing to notice is Axio removed. Here's a quote from the official announcement. No longer ships or depends on Axios. The builtin XHR client handles HTTP. For example, we have use HTTP here. And let me show you that in action. So on top we import use HTTP here. And then what it allows us to do. So let's say on the website we have search for bookmarks and if I enter daily it will be found or if I enter gibberish. No bookmarks found. So in the code here we have that search input v model http query input handle search and that would be the search commented out in v2 something similar like import axias and then axias get then finally which was okay but now in v3 it's a bit shorter with use http as you can see the code in handle search we do http query http get and then on success we have search results filled in again. Compare that to axius get then finally and then this a bit longer code in a way kind of similar. So this code is longer horizontally so to speak but basically there is no dependency on axios anymore. Another kind of a small but interesting new feature is use layout props. For example, you have properties for global components for the whole layout and then you want to override something on specific page like for example title. So this is the example from the official documentation. Now let's see in my example. So we have app sidebar layout that comes with starter kit and we define use layout props with page title empty and show sidebar true by default and we use them right away in the same sidebar layout loading sidebar only if we want to show it maybe on some pages you don't and also there's sidebar header where we pass the page title and then if we open that app sidebar header we have this so we accept the page title which is empty by default But then we have this again if page title we show that and that page title is shown on the right side. So we navigate between bookmarks where the title is empty and favorites where we have the title my favorites. So on the page where you do want to set the page title or override that default value you have this set layout props in the favorites view. then it becomes my favorites here. And in the for example bookmarks index not favorites. We don't have that things overriding the default values. So that's why the title here stays empty. Also for example we may define in the favorites that for example want show sidebar to be false. And now if I navigate dashboard bookmarks favorites see no sidebar. So yeah, kind of a small feature but pretty important if you want to override some layout properties, layout props in some of your pages. And the final thing I want to demonstrate is exception handling which is now different. If your exception happens before Vue.js, before inertia middleware. So in version two, as it is said in the documentation, it required workarounds. So for example, if someone enters the URL that doesn't exist, you would get 404 not found Laravel page not Vue.js. In inertia v3 in the app service provider of Laravel, you may define this inertia handle exceptions using and then a callback function with your custom behavior. But basically you're rendering whatever view.js component you want. So now if I refresh that I have Vue.js page, not Laravel. So we have render error page and if we navigate to that error page view this is how it looks with button component and other stuff typical to view.js and also the important part with shared data according to the documentation it includes your shared props in the error page. So yeah now if something like that happens some error you may have more customization capabilities. So that's all functionality I wanted to show you visually, probably the most important ones. But maybe I missed something. Then share in the comments below what else do you want to see. And also I will link in the description below the official article which is on the blog of Laravel. Pretty detailed actually with similar examples that I showed you in this video. And also keep in mind inertia 3 is in beta at the moment. So there may be hiccups. Please test and report to the team what else they need to fix or improve. And also I will be waiting for the official release of Inertia 3 because I got this comment from Anjanesh on Twitter. So people are waiting for my updated courses for Laravel 13. And with that I will try to cover inertia 3 as well with starter kits. Starter kits are not upgraded at the moment. They use inertia 2 for a reason. Inertia 3 is still in beta. So all of that should come together roughly in April and I will have more videos about that including courses on Laraveville daily shortened. I have a few ideas how to make it more compelling in the age of AI. So it won't be like 2hour courses. It will be something new. Just wait for it. But for now what do you think about inertia 3? Let's discuss in the comments below. That's it for this time and see you guys in other