So far, we've been using JetStream with the Livewire stack. You also have the option to use the Inertia stack as well. So if you're not familiar with Inertia, its tagline is JavaScript apps the monolith way. So in a nutshell, it replaces all of your Blade views and Blade components with JavaScript components in either Vue, React, or Svelte. So JetStream makes use of Vue components for the JavaScript framework. The user experience feels a lot like a single-page app and is very snappy. Your routes and controllers remain mostly the same as how you would build typical Laravel apps. So I have a JetStream app here with Inertia and the Auth views.

apps. So I have a JetStream app here with Inertia and the Auth views. So for example, this view, the login and register, for example, these views still use Blade. So if we go into the project here, go to Resources, Views, Auth, you'll see all of these typical Blade views here. And these views use Blade components, for example, this one. And if you want to modify them, then go ahead and php artisan vendor:publish, like we did before. And then we can pick JetStream views, and that should create a new folder with all of the Blade components.

And then we can pick Jetstream views, and that should create a new folder with all of the Blade components. So you can modify them as you please. So it should be in the Vendor folder. However, if we log in, so let's go ahead and make a new User. Let me just go to the register route. Make one for myself. Then these routes are making use of Inertia. So if we go between these pages, you'll see that, well, you can't really see it, but it's very snappy.

So if we go between these pages, you'll see that, well, you can't really see it, but it's very snappy. Not to say that Livewire was slow, but you can definitely notice how quick it is with Inertia. And all of these pages and components are in view. So if you look at the folder structure here, go into js, we'll see pages which correspond to the different pages and layouts for the main app layout and Jetstream for all the components. So for example, let's take a look at the app layout first. Here is the main app layout.

So for example, let's take a look at the app layout first. Here is the main app layout. And let's take a look at the dashboard, which is this component here on the main page. So if you want to change this, we'd have to change this view component. And since we're now working in view and JavaScript, we have to run either npm run dev every time we make a change or npm run watch. So it watches for changes. So let me just run this. Okay, that's done. And now if we make any changes here, say, for example, the dashboard, actually, there

Okay, that's done. And now if we make any changes here, say, for example, the dashboard, actually, there is a component here called welcome, and that should be within the JetStream folder. Let's make a change in here. There are JetStream with Inertia. And that should compile down and does. And this should reflect that change. There we go. Let's take a look at one more change and how you would modify that. So let's go to the profile page.

Let's take a look at one more change and how you would modify that. So let's go to the profile page. So that would correspond to pages/profile/show. And we can just make any modifications here. Profile with Inertia. Okay, pretty straightforward compiles. And there it is. And this works exactly the same as it did in Livewire. So if I were to change my name here, again, it looks exactly the same. But we are now making use of view.

So if I were to change my name here, again, it looks exactly the same. But we are now making use of view. Let's also add a new menu item here. So that would go in the app layout, I believe. So here app layout dashboard here with the JetNav link view component. So let's just change this to say members will make that new route in a second. Let's name it members. And let's go to our routes file. Duplicate this. Let's call it members.

Duplicate this. Let's call it members. And we have to make a new view component called members. And let's put that next to the dashboard. Or we can just duplicate this and name it members.view. And let's change this to members. Let's remove this welcome component. And let's just put our own here. Make some padding in here, P6. Members only.

So if you look at the docs, there's one use case that you might want to take a look at. And that's custom rendering. So if you need to pass additional data to any of these pages or any of these view components, then you can do it using this whenRendering method. So this goes in the Jetstream service provider boot method. So for example, profileShow, let me show you that first. So for profileShow, I think we're on that page, no we're not. So this is profileShow. Let me open up DevTools here. And let me open up the view DevTools.

Let me open up DevTools here. And let me open up the view DevTools. So right now we have the show view. And the only thing we're getting in here is the sessions array, which has some session information. So if you wanted to pass additional data here, like it says in the docs, you can't do it directly. Oops, sorry. Yeah, you can't do it directly. So you have to do it through this method.

Yeah, you can't do it directly. So you have to do it through this method. So let's go ahead and do that. So let's go to JetstreamServiceProvider, the boot method down here, just paste that in here. Let's import request. And let's add some data here to pass to this profileShow view. So let's just say foo bar. Okay. Okay.

Okay. Okay. And now that should pass through to the profile show page. And we also have to accept that in our component. So in our props array here, where is it here, let's say foo. And if I did this correctly, that should compile. And now let me just refresh this. And let's take a look at our show. And there is foo bar. So yeah, definitely check out Inertia.

And there is foo bar. So yeah, definitely check out Inertia. If you haven't done so yet, everything I showed you in the Livewire stack should still work in terms of customizations, except the view part, which I showed you here.