Inertia v3 Deep Dive w/ Pascal Baljet
Chapters9
Hosts introduce Inertia V3 and set the stage for a deep dive into its new features and release timing.
Pascal Baljet walks through Inertia v3’s big upgrades, including a built-in HTTP client, SSR improvements in development, optimistic updates, instant visits, and a slimmer core—plus practical demos and upgrade tips.
Summary
Laravel’s Inertia v3 deep dive with Leah Thompson and Pascal Baljet unpacks a sweeping set of improvements designed to streamline how you build modern full‑stack apps. Pascal explains that InertiaJS is a lightweight protocol layer between back end routing (Laravel) and front end frameworks like React or Vue, designed to keep everything in one repo without the typical API-first split. A major shift in v3 is a slimmer core: Axios is removed by default in favor of a built‑in useHTTP helper that mirrors the familiar useForm API, with optional Optix for Axios users. The team also unveils server-side rendering in development, making it possible to fetch and view raw HTML for easier debugging and SEO validation. Other standout features include optimistic updates—immediately reflecting UI changes while the server processes the request with automatic rollback on failure—and instant visits, which render the target component right away while props arrive in the background. Pascal demos a brand‑new Inertia demo app and the kitchen sink demo that showcases every feature, including deferred props, layout props, and a richer error/exception handling path that preserves shared data. The session also covers upgrade logistics, starter kits timing, and how to report issues on GitHub as v3 heads toward stable release. The live chat moments with Joe Tannenbomb and the Laracon EU aftermath give context to the community momentum around Inertia v3 and its broader ecosystem in Laravel and beyond.
Key Takeaways
- Inertia v3 introduces a built‑in useHTTP client, replacing Axios by default and enabling JSON responses without a navigation, while still allowing custom Axios usage if needed.
- SSR in development now renders the full HTML output on the dev server, enabling better debugging and making it easier for search engines and AI agents to fetch content.
- Optimistic updates automatically update UI props before the server response and roll back if the request fails, improving perceived responsiveness for actions like toggling favorites.
- Instant visits allow you to render a component immediately while the server loads the actual props, useful for fast navigation on pages with known prop shapes.
- Layout props and setLayoutProps provide a clean way to push data into nested layouts, improving consistency when you have complex nested layouts.
- The demo app and 'kitchen sink' showcase the full feature set, including deferred props, client/server side rendering, and new error handling flows, in a real‑world CRM scenario.
- Upgrade paths from Inertia v2 are documented with a dedicated guide; v3 also drops older stacks (e.g., SpEL4) in favor of modern setups (Tailwind, React 18+ or Vue 3).
Who Is This For?
Essential viewing for Laravel developers evaluating Inertia v3 for production, and for teams upgrading from Inertia v2 who want a clear picture of new features, demo coverage, and practical migration tips.
Notable Quotes
"InertiaJS is actually just a little layer between the back end and the front end."
—Pascal frames Inertia as a protocol that glues backend routes to frontend views.
"We swapped Axios with a custom HTTP implementation and everything just works."
—Highlighting the move to a lighter HTTP client in v3.
"Optimistic updates gives you the current props and then you get the server response; if it fails, it rolls back."
—Explaining how immediate UI feedback improves UX.
"Instant visits show the component directly that you’re navigating to, even before props arrive from the server."
—Demonstrating a new navigation nicety in v3.
"SSR in development now works out of the box, so you can see HTML output without having to deploy."
—Emphasizing improved debugging and SEO/testing workflows.
Questions This Video Answers
- How does useHTTP in Inertia v3 differ from Axios and when should I use it?
- What are optimistic updates in Inertia v3 and how do they affect UX?
- Can I enable server-side rendering during development with Inertia v3, and what does it look like in practice?
- How do instant visits work in Inertia v3 and what are the best use cases?
- What’s new in the Inertia v3 upgrade path from v2, and where can I find the upgrade guide?
InertiaJSInertia v3LaravelSSR developmentuseHTTPoptimistic updatesinstant visitslayout propserror handlingstarter kits
Full Transcript
I see chat. Hi everyone. We should be live now. Uh very sorry about the slight delay. Um I'm trying a different streaming uh network this time or multireaming platform. It was some user error. Let me double check. View channel. Are we live? Yeah, we should be live. Okay. Yeah, I see it on YouTube. Okay, we are so live. Let them sleep, Florian. If only we were sleeping. [laughter] We already have inertia for the world. We have some excitement about Inertia. Welcome in K John. Hi Joel. Uh Picoli, how are you doing? Yeah. Hopefully everyone's excited for V3, which has already been out in beta for what, like two weeks now?
Yeah, it's been two weeks now. Yeah. So, I think we tacked it like two days after Laron, something like that. Mhm. Um, and we had another beta last week, so we'll probably do one more maybe this week or early next week. Sounds good. See? Yeah, Florian. I'm in Florida, so I'm in a different state. This is my mom's office. Um, you might see the nice TV behind me. That's has a uh VHS player built into it. I could play a lot of Smash Bros. on that TV right there. That's like the TV they use for the comps.
[snorts] Let's see. Yeah, welcome in everyone. Sorry for the delay. Um, I'm here today with Pascal and we're going to be talking about Inertia V3 like some of you have already said. Um, doing a deep dive into Inertia V3 which is already out uh for public beta and kind of showing a demo of the different new features. But I'll wait um maybe another minute to let people right trickle in. said, "The V3 beta seems very smooth. Soon to be launching it in prod. Had a few tests the app and feels completely fine." Nice. That's what we want to hear.
We also want to hear the feedback, but this is also nice. [laughter] Good feedback first and then other feedback. Yeah, exactly. Hi Ashley, how are you? Hey man. Yeah. LFG, HYB. We need all the acronyms. All the acronyms in chat. Ah, yeah. Hi, Patricio. Yes, use HTTP. We have a new fan. [laughter] That's something I'm assuming we'll be talking about with the the demo app. Definitely. Yeah. Um, Dale, not the villages, but just Florida. Just just in Florida. Uh, okay. Let's go ahead and kind of jump in. Um, so hi everyone. Like I said, today we'll be talking about Inertia V3.
Um, it is in public beta now as of like Pascal said earlier, two weeks ago, I believe. So, it's available to test now and we'll be doing a deep dive on it. Pascal worked and spent a lot of time on Inertia V3. So, he'll be giving us um like a closer look at the new features that came out with V3. But first, let's do some quick intros. So, my name is Leah Thompson. I'm a deval engineer at Laravel and I'm here today with Pascal. Pascal, would you like to do like a little quick intro? Uh yeah.
So, I'm Pascal Boyette. Uh I also work at Larafl at the open source team and uh I mainly work on inertiajs. So from the first day it was uh inertia for me. Um sometimes I work on like on something else but uh it's mostly inertiajs. Yeah. Which we love it. I know um Joe Tannon Bomb gave a talk at Laracon EU and his talk focused a lot on InertiaJS um V3 and in his talk he was like if you enjoy this stuff go hug Pascal. Yeah. And I totally missed that. So I I I didn't I didn't understand it like for the first hour why everybody was hugging me [laughter] also because this was yeah it was like the second day of Larcon in the first day this was not the case and then Joe's talk was the first one on the second day and then for the first hour I thought what's happening here [laughter] I think you were at the artisan booth too so I think like some people couldn't find you so then they just went to Joe and started hugging [laughter] Nice.
Which is so funny. Yeah. No, that that was a great talk. Yeah. No, it was really good. It got me really excited about Inertia 2 because before his talk, he was like, you already know about Inertia V3, right? And I was like, I have no idea. Like I I didn't know anything that was going to be in it. So, it was all new to me. Oh, nice. Yeah. So I guess before we start getting into Inertia V3, let's kind of just cover um Inertia itself really quickly. So what exactly is InertiaJS? So InertiaJS is actually just a little layer between the back end and the front end.
Uh it's like a glue between a backend framework like Laravel and a frame a front end framework like React or Vue.js or spelt. Um, so in the past you might have split up your front end and your back end in separate repositories. So maybe you've built an API with LARL and you've like coupled it with a front end uh fue.js application uh and then you have to make all these API calls from your from your front end application to your back end have to deal with authentication authorization all that stuff and inertia takes that all away.
So uh it's you now have just a monor repo uh one repository with both your back end and your front end and from your back end you just gather all your uh your information for your pages. So routing happens in the back end. So just like a regular LAFL app you have your web.php PHP with your routes with your controllers and uh in the controllers instead of returning a blade view or returning JSON uh you're essentially saying hey I want inertia to render this frontland page with this set of data and um that's actually it's like in essence it's more like a a protocol.
Um, so we we've built some magic around it, but in essence it's it's it's a protocol of how the back end talks to the front end and and the other way around. Um, and I've I've been using it since the like the first day. So when it when it came out uh like maybe seven years ago now, something like that. Um because I was I was building like the old school kind of app with a separate API and a separate front end and when this came out I I immediately thought this is it like this is the magic that we've been waiting for and everybody should should start using it.
It's so good. Um so before working at Laravel I was already like huge Inertia fan and a massive user of it. You were already building things for inertia right? Or kind of like around inertia too. Yeah. Yeah. Exactly. Yeah. So, um um like I've got an open source package that that does modals. Um that's that's actually quite hard to do. So, that's one of the reasons why we're not building it into Inertia itself because there are so many ways you could do it. Um so, kind of leave that open to the developer itself. But, um I've got a yeah, I've built a package for that.
um if you want to do it in that specific way. I mean you can do it in a thousand ways but uh yeah I've been pretty active in the open source space with Laravel packages and later on inertia packages. Love it. Um so you just explained in a great way what inertia is. How would you explain who inertia is for? Like just inertia in general. Um I think inertia can is like can be used within really small teams but also like in really big teams doesn't it it's not really uh like specific for uh a specific size of of team I I guess um because you can still be very strict in what's happening in the back end and what's happening in the front end um And it's even more perfect for like a single developer because now you have, you know, if you're if you're on your own or maybe with two, then you don't have these big teams that one team does back end, one team does front end.
Um, it's it's like a lot of overhead if you have one project with two or more repos to maintain. Mh. And inertia is perfect for that because you never have to worry about it. Everything lives in the same repository. And now even with uh with Lar Wavefinder, it's even better because that like connects all the information that you have on the back end to the front end. So now your front end even knows about routes and about controllers and about what's in your form requests. And I mean it's it's crazy. I get really excited about it.
Yeah, that wayfinder is so great. Everybody should use it. That and inertia to me are really exciting because I started as a JavaScript developer. That's how I got into development. So I'd really say that anyone who wants to use JavaScript with Laravel like inertiajs would be perfect for you as long as like you're okay with like a mono mono repo basically like it taking away the separate API layer. But you could also still have that API layer if you want to um with inertia.js. But I just feel like using InertiaJS when you're going to use JavaScript on the front end like something like React view or spelt inertia.js just makes it so easy to like tie those two things together your JavaScript front end and Laravel back Yeah, that's that's another great thing about Inertia that it gives you a lot of freedom.
So even inertia itself is not bound to Laravel or to a specific front-end framework. M um so yeah of course we use it with Larafel and I think everybody too it's a bit fine tuned for Larafal but there's also like a very active Rails community u that's maintaining an inertia adapter um and there's a lot of community adapters too I don't know how active the other ones are but I think there's like a spring boot one there's a Golang one yeah there's a Django one yeah Yeah. So, yeah, like you said, you can um you can just use like the inertia protocol uh but you can also like um use something like actions in your app where you reuse actions for your API and for your inertia pages that works really well.
Um also in the front end like you [snorts] don't have to do routing in the front end at all with inertia which is a big win if you ask me because Laravel has this has this fantastic routing system. So I would always use that. Uh but if you really want to somehow Yeah. You you you could do some routing on the front end. Yeah. So it gives you a lot of freedom. Also, um I don't think we're seeing the LinkedIn chats through Riverside currently, but I went to LinkedIn and Chip said, "Just relaunched Laravel.com with Inertia V3." So Oh, that's nice.
I didn't know that, but that's that's brave. I think it like went live like the full site re uh rewrite of using React and Inertia I think was like finished last night or something, right? Yeah, I I I saw the message about that but I didn't know it was using F3. That's that's amazing. Yeah, which I sorry I unmuted something which I think is a great segue to into talking about V3. Um, but we did get some good chats about it already before even like showing off the features. We have V3 is awesome. Big shout out for the new HTTP client.
We rolled our out our own and we can replace it finally. Nice. Yeah, that's what we want to hear. And then also just a couple more chats. Ashley said, "I've been saving up my Pascal hugs for when we next meet. Probably up to 28 or so banks so far. So, you better get ready." Ah, yeah. Always ready for Ashley's hugs. [laughter] And I guess there's one question already. Will the starter kits take a while to update to V3? I tried it with the spelt starter kit and had some issues. It's probably me. Uh yeah. So actually Wendell is working on uh Inertia V3 upgrades for the starter kits.
So once once Inertia 3 is launched, we probably also at the same time release the starter kits or maybe a day or a few days after. Um, I don't know the specifics about the release dates, but it's probably it's probably not going to take weeks because I know he's already working on it. Yeah, that sounds right. I guess let's go ahead and jump into what's new in V3 then. Yeah. Okay, I'm gonna move this screen over to the other screen and then share. Also, Chip said 4:00 a.m. 4:00 a.m. is when the site was done being rewritten in React in Inertia V3.
So, that's wild chip. Does this work? Seems it does. Yeah, I can see your screen. Let's move this thing out of the way. So, this is the uh new Inertia demo application. So, if you've been a Inertia user before, uh we've had this demo app online which was Ping CRM and this was built around uh built in the Inertia version one days probably. I think it it was not really upgraded to version two at a time. Um, so we decided to completely write a new one. Um, so that's that's this one. And it's still a CRM.
So we still have some like real life uh application pages like a dashboard and like a list of organizations and contacts. Uh, but we also wanted to like showcase each and every feature that Inertia has. So we also have a kitchen sync um where you can like discover the features and check out the APIs. So this thing is actually online this one is on my local machine but uh if you go to demo um-v3.injs.com you can actually play around with it and it's also open source. So for example, if you check out this use form page, uh there's a link to the view page.
So this takes you to uh GitHub and you can check out uh this page and that also works for the controller. Uh so if you want to like play along and check out the source code, you can uh you can do that. It's hosted on GitHub, of course. So um yeah I think the first thing I want to show is actually not something here in this uh [laughter] in this demo application but it's uh already in the code itself. So uh up until now if you go to your main application um your main JavaScript app file it was always a little bit cluttered.
So we have this create inertia app. Uh but before v3 it also had like a resolve call back that you had to uh pass and it had a setup call back and this was always a little bit like noisy. Um you had to do it for every inertia app that you that you worked on but it's more or less the same for every app. Uh so we decided to get rid of it completely so you don't have to do that anymore. Um, let me see if I have like uh yeah, here's the few starter kits so you can see it.
Um, it's this stuff right here. So, we have like resolve uh resolve page components. This this um this club here where it you know finds all the uh few pages um this stuff where you create your React or F.JS application and mount it all this stuff is not needed anymore. So, I think that's much better and that's actually driven by a new feed plugin that comes with V3. So, um I'll show you that in a minute. Another thing that's not needed anymore is this separate SSR entry point. So, if you wanted to do SSR with V F V2, you had to do a separate SSR entry point with more or less like the same code again, the same boiler plate, then wrapped in a create server.
So, in F3, this is all not needed anymore. So, it's just um it's just this cleaned up app.ts or JS, whatever you're using. Uh and you don't have to write that SSR entry point anymore. And then in your feed config file in here, uh we have this inertia plugin. That's the only thing you have to include and then it all works. Um so that's nice. Yeah, that's that looks so much better. And this is I mean this is now set up for this specific application but uh you can just do it like this and then it works.
So yeah that's uh huge cleanup I I think. Oh yeah I agree. Yeah. So one thing that now works that didn't work before in V2 was SSR in development. So all your I mean in general your inertia application is client side rendered right? So react or fugue.js renders your applications which requires javascript. So when you use something like gurl you're not going to get the actual html of your inertia application. So for that we have serverside rendering which is a separate demon that runs that renders all all the HTML and that worked mostly in production only.
Uh you could run it locally but was not so great to debug. So now if you run npm rundev uh like in here let's make this a little bit bigger. You can already see that we here have uh inertia SSR defaf endpoint. So this feed plugin now also takes care of SSR in development. So if I open a network tools uh again let's make this a little bit bigger. Uh let's do HTML and refresh this page. Then if I go to response you can see that it actually rendered the application uh as raw HTML. So yeah, of course this is not formatted at all.
So it's just a massive string of HTML. Uh but this works great. So now like um search engines and AI bots can actually fetch your content without having to execute the JavaScript. So this already worked in production, but it's now much better in development as well. You don't have to set up anything for it. It just works out of the box. And it's also much easier to debug. So for example, if you do something like um let's open the dashboard component and let's do something like uh window alert. Hey, so this works uh yeah this works in the browser that's that's not a problem.
Uh but this this doesn't work with serverside rendering because this this process here that's running now in development or in production this SSR server that doesn't have it doesn't have that window object because it's actually a node process. So in feed 2 this would crash your SSR server it would just shut down and you have to restart it or you or you would um I mean you would probably use something like supervisor to restart it but in general it would crash. So the first improvement is that that it doesn't crash anymore. So now it just keeps running.
Uh but it has much better error output. So um let me refresh this npm rundev and let's try it again. If I do a hard refresh. Um so now we have here an SSR error and we can actually see what happens. So before there was like a massive red block of errors uh that was hardly readable. So now you can just see windows not defined. Um this was the URL and this is the source code with the actual line where everything went wrong. Um oh that's so nice to do. So this much easier to debug.
And another thing that's uh really cool is that actually this this error is emitted back to the LARL back end. So what you can do is in your uh we have this SSR throw on error which is now false. Uh but I could also set it to true. And if I refresh then I get a 500 error. And you probably you're probably thinking why would I ever want this? Um because people won't notice if the SSR server crashes. But this is kind of annoying. Um, so mostly you want to set this to false, right? You just want to the the the client application to work and have the SS SSR error on the back end.
Uh, but if you use like browser testing with past um let's check out dashboard test uh not the feature test but the browser test uh this one. So here we have it displays dashboard with stats card. So let's chain only and first let's uh let's try it with this flag on false. Yeah, we have that now. So let's do vandor bin past and this should be green. Yeah, this is green. So, this is screen, but it actually and it works in the browser, but it's actually throwing an error on your SSR server. So, if you now set this to true for your tests.
Uh, not sure if I need to restart npm, but let's see. Let's try again. Um, now it's probably going to fail. Yeah. So this is great because now if I scroll up you can see that we have SS SSR render failed for components and you have more or less the same error. So window not defined but now it's on your back end. So this is really cool because now in CI you can run the SSR server and uh run all your browser test against this SSR server and see if anything crashes. So you um you're alerted much earlier about errors in your in your uh in your components in your pages.
So yeah, overall this is a huge improvement No, I definitely think so too. And someone said um I think it's when you were showing the other stuff such as like the more detailed errors. Um they said, "Wow, this is good for AI agent." Yeah, that's this um Yeah, this one. Uh yeah, this is much easier to like copy into uh into some kind of agent. Yeah. And um I haven't I haven't tested this, but you probably can also like um if you use nightw watch, then you can probably I mean, yeah, this this is like a regular PHP error.
So this is going to end up in nightw watch and you can u uh you know track it from there. So now even nightw watch knows about your SSR errors which is definitely great context to have. Also for the demo app what link did you say people can go to to play around with it? Ah that's that's um demo-v3.injs inertiajs.com. So, yeah, this is a little small probably. So, let's do this. I think I got it. I also went and looked at Joe's tweet. I just wanted to make sure it was still the same one.
Yeah, it's the it's the same one. So, it should be this one. This one. Yeah. Nice. Yes. So, it should be this one. Oh, you're still there. Uh oh. Yeah. You still there? Yes. Oh, okay. Right. Can you hear me? Yeah, I can hear you. Okay. You dropped out for like 10 seconds. That's so weird cuz on me I didn't. But I wonder if I did for everyone else. It looks like we stayed live the whole time, though. Oh, we did we or did we drop? Um, let's see. I'm going to open the YouTube link.
No, it still seems online. Okay, I think we're good. I still say the 27 minutes. Okay, false alarm, everyone. We're good. [laughter] Um so yeah one last thing about SSR um nothing has changed for production. So um no now in development we have this uh this SSR dev server but in development it's still the same. So you're building your SSR bundle and then you're running um PHP artisan inertia start SSR and everything works. So nothing has changed on that side. Um all right. Shall we move on to the next thing? Yeah. Um real quick before we do though someone had asked which you did answer too about the starter kits.
though. And I did get a message from Wendell. So, the plan is for um Okay. Also, Wendell said the stream didn't drop. So, that was also confirmation there. Um but he said the plan is to have the starter kits released alongside the Inertia V3 stable release. Ah, cool. Yeah. So, they should hopefully be updated to V3 whenever Inertia V3 is released for stable release, right? That's good. And we got the confirmation of that that that's the plan. Okay, cool. And now we can proceed. All right. So, um we did uh make the app app entry point a little bit uh simpler.
Um but we also made inertia itself uh like slimmer. So we um removed some dependencies. And the biggest one that we've removed is Axios. So Axios is this massive HTTP library that's used to make uh HTTP calls. And um it's it's a code base that's like used for both browser applications as well as node applications. So, it's got a massive amount of features and um it's quite big overall, but we swapped it with a custom implementation and everything just works. So, we decided to drop it. Um now, some people might be using like some very specific Exios um options or some, you know, some Exio features.
So, [cough] I'm sorry. Um, so you can still like opt into Exio. So you can uh use the HTTP option here. And then it's uh Exio's adapter. I think I think that comes from the core library. Yeah. So you can still do this. Uh you can even like pass in an an a custom access instance if you want. Uh but by default we are not bundling exios anymore. So yeah, that saves like a 100 kilobytes or something from the from the build size. Uh which is quite a lot because inertia is not that big. Um and because uh you know we we removed axios and we thought what what can we do better here with HTTP and then we introduced the use HTTP helper.
So this has been a big request I think for a while from the community. Um, if you make a request with inertia, it's also a navigation request. So, you don't uh you don't usually return JSON from your controllers. There's always this inertia page with data. Um, uh, but now you can. So, up until now, if you wanted to do this, you would use something like Exio yourself in your in your pages or use fetch. But now, we have a built-in HTTP client. Um, so that's quite nice I think. Um, let's see. I think it's here in the bottom.
I think someone already earlier in chat mentioned it too, right? Yeah, this uh I think this is one of the more popular V3 features. So, uh, we're still on use form. Let's do use HTTP. So, this is quite cool because it has the same API as use form. So you can still like pass in an object with default data. It has this reactive state so you can see if the request is processing, if it was successful. Uh it handles your validation errors. So uh let's open this page. Uh not from here but from my own application.
I need to refer this. One second. No worries. Every time you said drop it earlier, I just kept thinking of Ashley's drop it like it's hot comment. [laughter] Uh let's see few page. So uh yeah, now we have use HTTP which and yeah, like I said, it's more or less the same APIs used form that that we're all used to. So you can pass in some default data. uh you can you know pass the the type of the of that data and the response that you're expecting and then you can make an HTTP request. So you can do like post or get or or patch or whatever you need.
Uh pass in the URL. So here I'm using wayfinder to resolve the the URL. And then we have that same like onsuccess on error on finish all these callbacks they just work and um in your controller let's see or in your um sorry in your template uh you can like do two-way binding with the data itself. So you can use v model and then http.name uh you can use processing uh what more do we have uh is dirty. So all the stuff that you that you're used to with use form, that all works with use HTTP.
Um I did that right away. I was like this looks like use form. Yeah, it's it's exactly the same. The the only big difference is that this doesn't make a a navigation or this doesn't like uh result in a navigation. So every time you use use form or you use the router, it's it's always a navigation. And you can use flags like preserve scroll or preserve state. Uh but you always get this inertia response back. And now it's just a JSON response. So um let's take a look here in the Um we're just returning some JSON with a message then hello.
And then we're like appending the thing that we are uh that we're requesting that we're sending as data. So um we can just do what does it default to worlds? Yeah, let's not do world. Um let's do uh hello Laravel and then send request and then here you can see the response which is just like a plain JSON response and you can do whatever you want with it. So this is great for like toggle small things or uh you know check a status of some API or um another thing that's a great usage that I saw is like uh if you have something like a search bar in here uh like a quick search it's great for stuff like that because actually that that shouldn't trigger navigation right in your inertia application uh you just want the search results to come back as JSON and then render it on your page.
So, it's great for stuff like that. I feel like stuff like this is added and then it's just like, how was this not here before, you know? Like you see like this is so nice. Yeah. Um Yeah. I think I mean you could just use aos for this or fetch, but people just want to use something from inertia. And we're all used to the use form API. Which is really great, you know, for with the processing and the validation stuff. So um yeah, people just want that without without the navigation part. So yeah, this is a I guess a big thing in V3.
I think it's also the syntax switching, which like I know it's not like that crazy, but like going like if you're using inertia, you're used to like use form and kind of that syntax. Axios, I always forget the syntax and I have to look it up again. Yeah, it's it's it's a bit annoying. You want that to be more um consistent throughout your codebase. Um yeah, I mean that's essentially it for the use form. Um let's see if I didn't forget anything. No, not really. Someone already said um it was Dan M. Hi Dan. He said, "We're currently refactoring our whole site from spelt 4 to Vue3.
So, we're going to have to fort the Inertia V2 repository so we can pull it in and keep using it on our legacy pages." And he's like, "I want V3 that bad." [laughter] Let's see. Ah, yeah, because Yeah, that's another thing in V3. So, um, we've, um, uh, we've dropped spelt 4, uh, because spelt 5 has been out for a while. And, um, some of the newer stuff like the feed plugin was really hard to do with both spelt 4 and spelt 5. So, we dropped spelt 4 for that reason. Also, don't think it's maintained anymore.
Um, everybody just has moved to spelt five or to view three or view three like Dan. Yeah. Yeah. Um, that's so funny. Um, yeah. So, I think we also dropped like Lar 10 at this point. Lar 10 was still supported by F2, but uh, it hasn't been supported for a while. So, we dropped Larl 10, SW 4, and also uh, now requires React 19, which also like everybody's using. So, Yeah, most people are probably fine. Yeah. And Chaz said, "Use HTTP is a big reason for me upgrading. Axio felt very hacky when using it. Use HTTP now almost feels native." Yeah.
Yeah. Exactly. I mean, you you um you could achieve the same result with Axios and with fetch, but it just it just feels nicer now with use HTTP. Um Yeah. Should we move on to the next one? Yeah. Let's keep going. So the next one uh is one of my favorites I think from V3 maybe my favorite one and that's optimistic updates. Yes. Yeah. Same. Um so in inertia you know if you try to do something like this like a favorite toggle you usually use something like use form or the router uh to make this HTTP call and then update the props right.
Um, actually you don't have to update the props. They just come back from the from the back end and then your page is updated. But there's always this slight delay once your app is deployed. Like it doesn't matter if it's like 100 milliseconds or even 70 milliseconds. It still feels a little bit weird that you click this icon and it just it's just this little delay before it turns red. Um so we've um we've integrated optim optimistic updates for that. What you're actually telling inertia is hey if everything goes right this is what the props is going to be.
So um we build it in into the router use form into the form component. And so what it does there's there's a slight delay on this HTTP call to demonstrate. Um once you click it like it it turns red immediately but you can see the progress bar uh on the top that it's still like making of the actual request going through. Exactly. Yeah. So the request is still running but you're already updating the props. Um let me go to this page. Let's see view page. so that would be here. So you just have router.post post and before post you just call optimistic.
So let's let's comment this out and let's see what it looks like then. Um let's refresh. So now you can see that it's this is just weird, right? You you click here, you have to wait and boom, there it is. Um when stuff like that happens, I find myself spamming it because then I'm like, "Oh, it's not updating. It didn't go through." And then you're spamming it and then once it does load, then it's loading and it's taking it away and then you get mad. Exactly. You're just expecting it to to immediately do the thing that you that you want, right?
Um, so now we have uh optimistic that gives you the current props and then you just give an object back with the props that you want to update. So in this case, it's the contacts. Um, it just loops over them. If it's the contact that we're updating, then we then we like flip the is favorite toggle. And otherwise, we just return the contact as it was. Um, and the cool thing about this is that it automatically rolls back if this fails. So, uh, we have a toggle here to simulate an error. So, let's, uh, let's check out the controller.
Um, optimistic updates. Where is it? Maybe favorite. Ah, here's it. Simulate error. So, if the boolean has this uh if this request has this boolean sim simulate error, we're just throwing a validation exception. And let me show you. If I now toggle this, I need to save this. See if it works. Yeah, it works again. So, I'm now gonna hit the checkbox um do this and then if it fails, it just rolls back the props. That's nice. So, you don't have to do this manually. Um it just takes snapshots of the props before the request is sent.
And this actually just works for multiple requests as well. So, if you do multiple, you just see them coming back. Um there's nothing you have to do about this for the roll back part. all works under the hood and I think the the API is quite nice. Um you just prepend the the post method with optimistic tell it what it's going to be like and that's it. And one thing to mention is like that like the server always wins. So if somehow like the server returns another prop. So if if you submit um if you want to toggle this contact but somehow on the back end it toggled another then the back end wins.
So this is just for the time being. So as as long as the request is running we're showing this and as the request uh is if the request is finished and response come in then we're using the props from the server response. so yeah that's uh that's it for optimistic updates. Um, I think this is a big one because it's it's easy to implement for the developer and it makes a huge huge impact for the end user. I think so too. And I think um I know at Larconu we were talking about kind of different use cases for it too.
Um because like the demo is like you clicking the like button, but we were talking about like how you could use it for something like a chat bot too. Yeah. Exactly. Like um Yeah. I I remember that we talked about this. So if you have like a massive chat or interface with like a massive list of chat messages um usually now when you implement this in inertia you have like a text area below with a button submit and once you click that submit button you clear out the text area and then you wait from the from the for the back end for the new props to come in with that new message.
But now you can already like show that message in the chat interface before it's even saved to the database. So that's like yeah way better experience for the end user. Yeah, because it feels like immed like you immediately see that update. So then you're like okay this is working. Otherwise you're just like waiting and then you're like what's going what's going on? Is my internet down? Like you just start worrying. Exactly. And and you know even if you have like a super speedy server and your like your whole infrastructure is super fast like it could also be on the user side or you know sometimes requests are just slow like not not second slow but like 200 300 milliseconds slow uh and then this is a way better experience.
Um yeah, I think that's it for optimistic updates. We can keep going. Yeah. Uh let's do um let's see instant visits. So let me close all of this stuff. So this was actually um bigger than we thought. We thought it was this was maybe like a minor new feature, but uh people were really really uh happy about it. So let me open instant visits. so with instant visits you can like show the component directly that you're navigating to. So usually you would do something like router.visisit um with the URL that you want to visit or you use the link component.
Um but now you can also specify the the actual component that you're navigating to. So this shows that component before the props come in from the server. So this is something else than client side Um client side visits were introduced in version two. And client side visits allow you to do something similar but without a server request. So with client side visits you can um you can say I want to go to this URL with this component and these props and it would never make a server request. But instant vis is something different. So in this case it makes a server request but it just already shows you the component that you're navigating to.
So in this example um we are visiting a page that has like a two second delay on the props. So if we click visit it immediately immediately goes to that page but the props come in later. Uh so this is a bit tricky to implement. You shouldn't do this for all your pages I think. But if you have some pages that are like I think there are two use there are two use case for this. So if you know exactly what the prop is going to be on your target page then this is great. So, for example, if you have like um if you have like an list of organizations like this, and if you click on one of them, it takes you to some kind of show page or detail page.
Then you probably already know what's what's on here. So, this one has members, but if you take the members away, you already know like the name of the organization. You probably already know the number of contacts. So from here you can you can instead of like um waiting for the surf request you can already load that page with that specific organization because you already have this information on the index page. So that's one use case I guess. Um the other one is uh if you're navigating a page where you have really slow props. So we already have deferred props for that.
Um this sits a little bit in between. So now you can immediately show the component page and then just wait for the props to come in. So um let's go back to that um demo page instant visits. I'm going to open the network inspector there. You can see that the uh if I click on this that it actually makes like a network request. I should have set it to XHR. Let's try again. I love how I was like nodding and I was like, "Oh, it just must be delayed. Uh let let's try again. Yeah. So it the the the surf request is fired immediately as well, but we're also immediately navigating to the page.
So now the the the props come in. So here you can see uh what is it like the greeting is hello from the server. um so that the page updates when the response come in and you can you can actually tweak what what props are like carried over from the previous page to the target page. So by default we're now tracking shared props. So in your uh inertia middleware uh you usually have some shared props like this. So you have your like your app name and your user and these usually don't change between page navigations.
So with instant visits by default we just carry these over from one page to the next. Uh but you can customize this. So uh let's open a few page again here. So like this is the like the default behavior where you specify the component. we carry over the shared props and the rest of the props come in as the surf response comes in. Uh but we also have a page props callback. So this gives you the current props of the page. So the page that you're leaving. Um and this is like page props and shared props combined.
But we also have like um an argument just for shared props if you want that. So in this case, we're like returning a new object with just the shared props. Uh and we're already like prefilling some stuff that's coming from the server. So um let's change this. Uh let's let's see if this works. Um let's do still waiting. That should be this one. Yeah. So now you can see still waiting. [clears throat] and then hello from the server as the response comes in. Um yeah, you should this you should use this a little bit careful uh because your page should be able to render without these props.
Um so I mean for strings this mostly is not a problem but if you're like expecting an object um something like that then you should you should like build your template in a way that it can render without that object. So, yeah, it's a cool feature, but you should use it a little bit careful, I guess. Um, let's see. Did I miss anything? So, we're starting to come up on an hour. Do you want to start wrapping up or do you want to keep going with the demo? Um, yeah. I mean, I have time. If you're fine, we can still we can stuff.
Yeah. Yeah, we can do some more stuff. Um um let's see. Let's save layout props. Maybe let's uh do the custom uh custom exception handling. That's also like a thing that was uh much improved from V2. So let's check it out. Um we have HTTP exceptions. So let's uh let's first show the F2 behavior. So I'm going to app service provider. Uh let's see. We now have this inertia handle exceptions using this callback. And I'm just going to do return here because in FT V2 we didn't have this. So if you click a link or you submit a form and there's a 500 error then usually you have this right within inertia.
Which is not super great because this this does nothing and the only way to get rid of this is to like click away outside of this model. And of course you you can you could already customize this but only on the like you could do it on the server side and the client side but what's both not so great. So on the client side, you could like do router on HTTP exception and this was called invalid on on v2. We renamed it to HTTP exception. Um you could do uh event prevent default and this would prevent the model from rendering and there you could like um customize the behavior.
So you could like show a toast or show an alert or whatever you want. Um and this was only possible on router level but now so now we can also do it like on form level and on link level as well. So this HTTP exception is now available everywhere. Um that's one improvement that we made. And then on the surface side you could use Laravel's exception handler and you know return like a custom inertia page. So that would give you uh something like this. uh where you like show a custom error page that was still rendered in the front end.
The problem with this in the past is that it doesn't run your inertia middleware. So it doesn't know about your root template and it doesn't know about your shared props. So if your error page has like a reference to your application name. So go back to uh middleware like if you if you would use something like your app name or you have this 500 error but you still have like this top navigation bar with the current user stuff like that that that didn't work. You had to manually pass that in uh within the exception. So that was not super great.
Uh so now we have this handle exceptions using where you can pass in a call back and specify exactly like in an inertia way how you want to render this error. Uh and the cool thing is that we now have this with shared data. So uh this is going to run your inertia middleware and gather all that shared data and pass it to the front end. So this is optional. You don't you don't have to do this. Uh but in a lot of cases you probably want to do this. So yeah, I guess this is much better than before.
Um, it definitely sounds like it, especially with the stuff you're like in V2, this wasn't really possible, but now it is. Yeah, I I mean it it it it was possible in some way in V2, but was just uh not so easy and also it was a bit uh unexpected. So um you expect that shared props are always around even if you have like a 500 error or I mean even with 404s um that just they just if you use something like model route binding then you don't even like get to the get to the point where it runs the middleware stack like it just bails out quite early in the in the in the middleware stack.
Mh. So you would never hit this inertia middleware. And now uh this is like much better. I think much much less uh digging why it doesn't have this shared prop. Yeah, definitely seems more intuitive. And then hey Chaza had said that error page drove me crazy with the logged in user not showing. So I think you just made their life so much better. Yeah, it's exactly that. And this was from the optimistic updates, but they said, "I've been building a travel booking platform, and the APIs are always very slow. I can see this optimistic being great for instantly showing get selected in the UI, too." Yeah, that's that's a good use case.
Yeah. Um so yeah one more thing on the exception part is that even if you're using this this new server side thing uh you can still intercept it on the client side. So um here we have a uh like a 418 error that's not in this array of error codes. So if I hit this, I still get the modal uh with the whole with exception trace and um but you can still use like the interception. So you can do on HTTP exception and then you can handle it from there. So now it just locks this error and doesn't show the model anymore.
So now you can just again show a toast or an alert if you want. Yeah. So in this case like the client side uh the client side takes over to say so um let's see yeah let's let's show layout Let's go then actually always I had also said I've rebuilt optimistic so many times in different projects. So glad to see this. Oh yeah. [laughter] Yeah. I think it's it's something um you know you notice this less in development because then everything is fast but once you deploy your app and you're clicking around and then you think yeah this is maybe not such a great experience [laughter] and then you need to work around it and like build your own uh solution for it.
Um it's nice that it's now just built in. All right. Um, we now have a better way to pass props and data from your page component to your layout. So, let's open this page. And for example, [clears throat] we are passing here like breadcrumbs from this page to the app layout. Um, you can now do that with layout props. So, in this case, we're also having a subtitle. Uh let me check where this is rendered. So this is the app layout and here we're using use layout props. So this has a subtitle which is an empty string by default.
And here we're just rendering that subtitle but now you can update it from the component from the page component itself. So we have um set layout props and there you can pass in like the props that you want to update in the layout. So here's a yeah here's a little demo. So if I do like welcome back then you can see that that subtitle is rendered. Um this is just a simple example but if you have like nested layouts uh you can even target like specific layouts. So we have set layout props but we also have uh set layout props for and there you can do something like um like shell and then target a specific uh specific layout or like um yeah for app or like for content or something like that if you're doing if you're doing stuff like uh app and then content and you know so Dary can uh be very specific about where this where this prop should go.
You I mean you could also do something like app subtitle and content subtitle, but it's this is this could become messy quite fast, I guess. Uh so this is a nice way to organize that a little bit better. It feels nicer. The other way. Yeah. And I feel like it's a little bit clearer possibly, especially if you have a lot that you're putting in there. Yeah. Yeah. Now, now in this case, it's it's um it's like using an object, but you have there's also like the more like Larl way where you can do it like this.
I'm not sure why it's erroring, but they should work. Um, so you don't have to like pass an object with each and every prop that you want to update or that you want to keep. You can also do it like this. That should work as well. yeah, I think that that's like the what is it like five or six most important features in F3. Uh we have some smaller stuff like um like form the form component now supports um uh generics which is quite nice. Uh I don't think we have a demo for this but let's try um let's see use uh no form component.
So yeah, here's our uh our for component and we have like a name and email and this stuff right here. This this is not uh type hinted. So if I do errors dot then then there's nothing. And even if I you know make a mistake there's there's not a red line. There's no way of knowing that that this actually works. Uh so we now have generics which works a little bit different in React in F.JS. uh but in F.JS you can use the create form helper. So you can do something like uh user form equals create form like this probably import it and then you can pass in a type.
So in here you can do like name. Yeah ex exactly this. and then you can replace the form like uh you can do this and then you have type t type hinting here like this and also when you make a mistake then you already know. So yeah it's a great improvement. Yeah. As someone who started with just JavaScript before like going TypeScript or anything, I love type hinting now. I run into so many problems with not having that. And there's really, you know, with Wayfinder, there's really not an excuse to not use type um TypeScript anymore.
Like um when you had to kind of rewrite all the types from the back end to the front end, that could be annoying. And there were tools for that as well, but it was still a little bit annoying. But now it's just all automatic. So yeah, I don't see a reason to not use TypeScript anymore. Um, of course you can tweak it like uh it it can get in your way a little bit sometimes, but you can just tweak it to not do that and just use it for stuff like this. Um, actually in this is a fugue.js, but in in in React you don't have to use that create form helper.
So in React you have this syntax um where you can do like user type uh yeah like this. So this is actually valid syntax in React. Um so that gives you the type in automatically. And is that using the form component then? Yeah. In React. Yeah. Yeah. Yeah. So this is the inertia form component. Gotcha. Um, another thing that we're now supporting is, uh, enums in the back end to render a page. So, um, ah, yeah, still works. [laughter] So, let's go to the controller. Uh, you know, if you if you really want to, you can use enums for pages.
So if you have like a form page enum um you can do something like uh use form equals features that and then you can do uh form page use form like this and you don't have to do value anymore. Uh you can just use it like this. So, if you're, you know, if you're using enums in, you like this, this is now supported out of the box. that's nice to have. I don't know if it's something I would use, but it's nice to have it. Yeah. I mean, it I'm not sure either. Like, I think I would still use the string, but it looks nice.
It does. ah, another thing that is worth showing is uh like the deferred component. So yeah, this should still work. Um, let's see. That should be in data loading, I Yeah. So here we have deferred props. So deferred props are like loaded after the initial page load. So even if you do it like this, if you do a hard refresh, you can already see the page and then inertia makes a subsequent request to load the the f props. And you can see this like this skeleton here while it while the props come in. So this would only like um it would only show the skeleton once.
Um there wasn't really a way if you were reloading these props. But now if you if you are reloading props that are deferred. So if you're like reloading stats then there is actually a reloading indicator. So um let's go to the view page. Let's see where that's used. Yeah. So here we have slow stats the deferred component and now in a default template we have this reloading prop. So you can like change the opacity or show some loading indicator. So, it's just a nice little helper because previously you had to track this yourself within the router.
So, you had to like uh listen for events and check if your prop was being loaded. And so, this is much easier now. It's just uh this little boolean. yeah, another thing that now is supported is like nested um nested deferred props and uh nested optional props. So if you do something like uh let's say this you do inertia defer uh it doesn't really matter. Uh but now you can also do it like this and that works as well. So this wasn't support in V2 but that now also works. And even if you do it as a call back, so if you would do it like this, I guess that that still works.
Um, so the way props are resolved on the back end has completely been rewritten to support this kind of stuff and also to support um the shared props thing for instance visits. Very nice. Um, yeah, I think that's it mostly. That's that's like the major major new F3 features. Um, let me scroll to my notes if I didn't forget like big things. I think that's it. You said when I think that was like what, like 45 50 minutes or more of like a solid demo of just like constant non-stop stuff. [laughter] Like you added so much with Inertia V3.
Ah, yeah. Yeah. I've been I've been working on this pretty uh intensely for the last few months. So, you could it's it's great to show it. Um, instant visits. Yeah. I mean, these are the There are probably even more minor stuff, but these are like the big features. Yeah. Are all of them in the demo app or are those still kind of like the highlighted ones? No, they're actually um so the demo app actually showcases like every inertia feature also V2 stuff or V1 stuff. So for example in 2 one or 2.2 I don't remember we we added infinite scrolling.
Um so you can play around with that as well in this demo app or something like um the when visible component. So this was added in V2. Um yeah that's all that's all included in this in this kitchen sync. So again it's like two separate it's more or less two demos. So it's a CRM demo so that you have kind of a real real world application with a dashboard and some forms and uh some search um some favorite toggling you name it validation uh so that you can see what it looks like in a in in a real world application and then we have this kitchen sync with all these separate pages um to showcase each and every feature.
So this is uh I mean most of it is F1 and F2 stuff but um I've added a little little batch for F3 specific stuff. Gotcha. And I linked this again the link to get to it is demo-b.injs.com. To go to the actual deployed um like kitchen sync website. So you can play around with these and look at all of them as well. Yeah. And actually, so um I already showed this few page and controller thing, but it also takes you to the documentation for that specific feature. So if like if you want to play around with optimistic updates, you can just click on the docs and it takes you to that specific page.
Um so it's also a great way to Yeah. So it's also a great way to like discover these new things. Yeah. It makes it really easy to get started with it because like you see it in the demo app, you're like, "Oh, I want to implement this." And then you can go straight to the docs. Yeah, exactly. Yeah, you can go to the docs, you can uh go to the controller of view page, see how it's actually implemented in this kitchen sync. Um, yeah, we uh we are resetting like the data I think every hour.
[clears throat] So, you can submit forms and you can change data, but it's all it's all reset uh every hour. [laughter] That's probably a good call. Let me see. I don't think we've missed any questions. I know we did get um well done. So, Haza said or hey Chaza said well done Pascal and team V3 has been so awesome so far. I'm confident to be shipping it in prod this week. Nice. [laughter] I mean at Laravel we do apparently. Yeah. Our whole our whole website now the larval.com website is using React and Inertia and Inertia is the V3 version.
We found out live on stream. Yeah. No, that that's super awesome. See, and then there were some comments earlier like someone said um I hope Boost and Easy upgrade Inertia V2 to Inertia V3 like the Laravel 12 to 13 upgrade, right? Yeah, it's already there. Actually, someone said that right after. Okay. Yeah. Yeah, it's it's already there. If you're using um I think you have to upgrade the Larafell the Laravel adapter itself and then you then you get the upgrade command I guess or the the skill. Um yeah, but it's already there. I' I've actually used it yesterday.
It's quite good. Is it I think with the Laravel one um you have to have boost updated right in the boost installer updated or something and then you can use slashupgrade. Is it the same way with the inertia one or no? Uh yeah I think so. Yeah. Yeah. I think you have to like use boost 2.2 or 2.3 like a recent version and that has the upgrade skill. That's so nice. I want to test that out now. I want to revive one of my like dead projects and upgrade the Laravel version from 12 to 13 and then upgrade inertia.
Ah yeah I I tried it yesterday and didn't make any mistake uh within cloud code. So I mean in general I I found out that AI is pretty awesome with Larafell. Um but also I'm I'm using Fugue a lot. So of course inertia supports Fugjs, React and Mhm. Um, but for my own projects, I use like FUG.js a lot historically and it's it's been great like this combination of Flarell and Fuggs in Inertia with AI. It's uh it works so great. Yeah, even more with Boost. That's absolutely uh recommended. Yeah, for sure. I actually deployed um I think one of my first Vue apps and it was like I I kind of vibe coded it because I right like React I've never used Vue.
I was like let me just like vibe code a Vue app. I do plan on actually learning Vue and not just vibe coding it but I'll use like Boost to get started. Um I think I use cloud code and it's out there. It's deployed. It works. In Inertia of course. Yeah. And also I really recommend like the best for browser testing for So you can of course do feature testing uh where you like test your controllers and your whole your whole like data layer of your inertia app. Um and on the front end you could you could use something like playright or you know the other tools that are out there.
Uh but pass for browser testing is really a game changer because it's still your your tests are still in PHP. Uh you can interact with your Larafl application but still like have all the um all the stuff that playright uh delivers so that it's it's just wonderful. I would really recommend pass for browser testing for inertia apps and it's super fast like really fast. I need to try that. I know Nuno constantly updates pest and whenever he announced I was really excited about it, but I still haven't tried it. [laughter] You should. I will. I will after this.
Um, Lawrence Stev said, "If we have some custom logic in the resolve or setup blocks of the app file of V2, how would we deal with that on V3?" Uh, yeah. So, it's fully backwards compatible. So you can still use setup and resolve in uh in your app and SSR file. That all works out of the box. Um so even yesterday when I tried the boost upgrade, it didn't remove the resolve and setup blocks. It just left it there. It it it showed me um a note on it like I if you want we can remove it, but it still works.
So you don't have to um uh in the latest beta or maybe this not released, I'm not sure. Um I think it's in the latest beta. You can do with app on create inertia app. So um uh let me see this gives you the fug.js application. So if you have like an um a few plug-in that you want to install, you can do app do use and then like use your some kind of plugin or I don't know your toast plugin and this also works for react um if you want to wrap providers. So I think most apps can like can um migrate by either removing the setup and resolve block completely or use this with app callback.
Um and if that's not enough then you can still use setup and resolve without a problem. Great to know. There was one more question. This one is about the um your inertia modal package but well done Pascal. Will your inertia modal package be moved as a first party package? Uh we don't have plans for that at the moment and um I think like in this model package I have like very strong opinions about how to do uh like how to do modals in general. So I mean it comes with UI. You can do it. You can provide your own UI.
It it has a headless uh mode. Um but it has mostly on the back end like very strong opinions about how to render that model and I don't think it's in this form it's suitable for the inertia codebase. Because it really forces you to do it in a specific way and that's not the inertia way. So inertia gives you a lot of freedom to [laughter] to do it however you want to do it. Um and also I'm not sure if we can you know I if we want to do models in inertia jets we also need to take care I mean we don't have to take care of other backend platforms but we we certainly need to like uh guide them on the protocol.
So if we make this very Larafell specific then that's not a good thing for inertia because inertia is framework agnostic. So there are like lots of little things that keep keeps us from implementing that specific model implementation. that's fair. Yeah, I think if we find a way to make it super generic and super customizable and cross like cross framework compatible, then it's a good call to to do it. yeah, I think that that's it for the model package. Yeah. Yeah. Sorry, I'm like trying to get a link, too. Um, I was going to share the link for the upgrade guide for upgrade.
I don't know if it went on YouTube. I see it on the mine. I can maybe show this. I don't know if it went through on the Laravel account, but onjs.comdoccksv3-started slashupgrade dash guide. This link um is when you can copy and paste to get to the upgrade guide for upgrading from inertia v2 to v3. Um like Pascal and I were talking about though, you can also use a boost skill. So like the upgrade skill for Laravel boost to upgrade to inertia v3 as well. is there anything like I guess for people to be aware of when upgrading to V3?
there are some things removed that were already deprecated. Mhm. So in in inertia one we had uh lacy So we had this um and that was renamed to optional in F2. Uh but lacy still worked. It's the same thing under the hood. I think the one just extends the other but now it's removed from F3. So this is just optional. Um but yeah that's like a minor search and replace. Um, gotcha. So, yeah, another thing is like Axios and another dependency, uh, QS has been removed. So, if you're using that in your own codebase, then you should either migrate to use HTTP uh or like reinstall Xios again.
Just include it in your package.json and then you're fine. Um, and you don't have to migrate it. Yeah, that's because probably I don't know if Exxios was in the like in in the Larafile starter kits as a direct dependency or that we just relied on it being a dependency of inertia. I'm not sure. I don't know either because I always used it with inertia. Exactly. And I don't think I checked for the blade cuz I obviously last year used a lot of the um starter kit where it's like not the react one where it's just the one with blade in it, but I don't know if that has Axio or not.
Yeah, I think um maybe Yeah, I think Larafl has shipped with Exio for years like uh I think like in the Larafl six or seven days it was something like window.exio Exio is exio something like this was included in like a bootstrap.js but I'm not sure how this has changed in the starter kits and like the thing we had in between with breeze and jetream. Um so yeah that's definitely something to check out if you're using axios manually. We um we had two event renames. So we have um we had router dot on invalid. So that's that is now HTTP exception and we had exception um which is like for network errors but this is confusing because um like if you think of exception you're probably thinking of a server exception or like a backend exception.
So we renamed that to network error. So this um this actually quite cool. Uh you can like um check if the network fails. So if your if your client goes offline for some reason. I think we even have a test for this. Yeah. So, um, let me check if this I remember there was a thing that's not working in Firefox but only in Chrome, but we're just going to try it. The browsers every time every time I like try to do something, I'll like find a specific a browser specific bug will drive me crazy. Let's see if this works.
So, so now we have this enabled. Let's go to dashboard. Ah yeah there there you can see it like network error intercepted. So now you can show like a nice toast with hey your internet connection is down. Something happened. that's nice. Yeah. So that's that's now renamed from um what did I say? Invalid. No from exception to network error. Yeah. I don't think there's I need Yeah, you need to republish your backend config. So we have this inertia.php config file with like some options on SSR. Uh some some um options on testing. We changed this a little bit.
It's not much, but we grouped some things together. Um, so yeah, this is something to check out and I think that's mostly it. Mhm. And I'm sure all of this is in the upgrade guide as well, right? Everything is Yeah, exactly. So, let me open the upgrade guide. yeah, of course, in the other browser. So yeah, we have a like a little section on what's new, um, how to upgrade your dependencies, and then we just have a list of breaking changes. Um, which is it looks like a lot, but it's like just a few few lines per breaking change.
So yeah, it's not Yeah, it's just mostly small things like um we tested Inertia 3 against some bigger apps and it works fine mostly like we didn't uh we didn't have like huge breaking changes. Gotcha. Very nice. And I mean we have it on the homepage now but I don't we weren't using inertia on the homepage before. Ah, yeah. So, we don't have the upgrade story there. It was um I believe Blade Blade and Alpine. Yeah. Yeah. So, that's um it's not so it's not a big deal to upgrade to inertia 3, I [clears throat] And then someone asked um Justin Toorta asked when will V3 be released, which V3 is actually already in public beta um but we will.
Yeah, V3 is in public beta currently. I guess Pascal, um, have we said like when we're expecting a stable release of V3 to be? Um, no, we didn't, uh, publish any date yet. Okay. But it is in public beta, so you can go ahead play around with it. And I think there will be like another beta release this week or early next week. Um, but probably tomorrow or Friday. And then we'll go ahead and start wrapping up. So if anyone finds any um like issues or different things with Inertia V3, where is the best place for them to go to report that?
Yeah, the be the best way is definitely GitHub. So, um, if you find an issue or something that doesn't work or that's annoying or an API that could be better, like now now's the time to, uh, make breaking changes for F3. Um, so definitely open an issue or a PR uh, on the GitHub repository. Um, and I linked this here, github.com/inertiajs uminertia, and then I did the link for the 3.x version. Yeah, perfect. Yeah. So you can open an issue. Um they can also open PRs on it, right? You can open an issue or PR there on the GitHub.
Um and where is the best place to reach you if they would like if they can't hug you in person, right? But they want to like [laughter] I don't know, hug you over Twitter. Uh yeah, exactly. Yeah, I'm I'm mostly active on Twitter. So, um I also have blue sky, but I I don't check that very often. I I usually post on blue sky, but I'm not like very active in that community. Um so, it's mostly Twitter. And I will link your Twitter here. Yes, Pascal. Twitter is linked here. I'll pin it real quick. x.com/pascal.
Um how do you say your last name? Uh Balette. So, Balette. Is that kind of close? Okay. Yeah. [laughter] I'm really bad at names. I try really hard. But yeah, like most Dutch people pronounce it like in a very French way because it probably originally was French like 400 years ago or something like that. So um they they pronounce it like very uh like a very like expensive name like B or something like that. But uh we just we just say Bett. Yeah. cuz I read it and I think like Belette and then I'm like that's there's no way that's it.
So I was like let me have him pronounce it first. [snorts] Uh someone said this stuff was fire. Someone earlier said upgrading tonight. So I think that's a great way. Instream. So hi and glorious pancake. Right near the end but hi. And then Lawrence has said very happy to see that V3 comes with built-in features for which we probably resorted to custom implementations until now. Thank you for the amazing work. Nice. So, yeah, let's all clap for Pascal. We can't hug him, but we'll we'll clap. But yeah, thank you all for being here um and learning more about Inertia V3 with us.
Thank you, Pascal, for the great deep dive into Inertia V3 and showing us all like not even all but a lot of the amazing features. And you did a huge demo and that's not even all of them, which is so exciting to me. Is there any kind of like I don't know closing words or things you want to say about Inertia or just anything? I mean, if you're already using Inertia to definitely uh like if you have a spare minute, definitely upgrade to V3 because it probably takes you if you do it manually, it probably takes you like 15 minutes at most.
If you're using AI, it's probably more like three minutes. Uh, and check if everything works, if you find strange things. um um that would help the F3 release. Um and it's also a great way to like explore new stuff in F3. And if you're not an Inertia user yet, then definitely try one of our starter kits to play around with it. So at Laravel, we have a React uh Vue.js and a spelt starter kit that all all powered by InertiaJS. So that's also like a great way to discover Inertia. I agree. And then if you're using cloud as well, um you can just like easily deploy one of the starter kits which I think is really cool that you can um just deploy one of the starter kits and it will fork it on your GitHub.
So then you can like bring that down um create a local copy and then you can just start cooking with Inertia and using one of the starter kits to create your own app and then it's already on cloud. Exactly. Yeah. And it it also um uh it like it works great with SSR as well. Like in cloud you have this little SSR toggle and it just works. So you don't have to set up anything manually. So it that's really great. I love showing people that because I'm like oh you might be thinking how hard is it to enable SSR and you click the toggle and they're just like I love showing that.
It's like magic. Yeah. Yeah. And then yeah, thank you all for being here today. The next live stream is going to be this Friday. Um it is a cloud office hour stream with Devon. So one of our recurring um office hour streams where you can ask any questions about Laravel Cloud and I'll be posting a Slido for you to put in questions there. Um but everyone make sure you go follow Pascal on Twitter so that you can thank him socially like over Twitter for all the work he put into Inertia V3 and Inertia in general because he's been cooking on Inertia since he joined Laravel.
Um, also we are doing a like little road show in Atlanta, I think it is. So, it's like a Laravel meetup. It's in Atlanta and it is March 26th. Um, so it's coming up. If anyone is going to be in that area on that day and wants to sign up for it, you can sign up here um, using this aluma.com link that I have pinned. There's going to be some cool guest and speakers there. Matt Ster from Titan. Um Joe Tannenbomb on the open source team at Laravel will be there. So you can hug him for inertia since Pascal won't be there and since he sent everyone to hug Pascal at Laru is payback.
Of course, introduce yourself first, please. But then feel free to hug Joe and you can blame me. Um but yeah, thank you all for being here and I will see you Friday for cloud office hours. Thanks Leah and thanks everybody watching. Yeah, thank you for being here. Yes, thanks. Thanks for having me. And yeah, let's stream. Bye.
More from Laravel
Get daily recaps from
Laravel
AI-powered summaries delivered to your inbox. Save hours every week while staying fully informed.









