Alright, let's have a look around. Now, whenever I'm learning a new web app, like most people I'd imagine, I start with the home page. And luckily, because we have server-side routing, it's very simple. It'll be right here in my routes file. Okay, so there's the login route. Here we go. So when the user visits the home page, it'll hit the DashboardController. However, you have to be signed in to see that. Which is why, if I visit ping.test, yeah, it redirects me to login.

However, you have to be signed in to see that. Which is why, if I visit ping.test, yeah, it redirects me to login. But if I sign in, there's the home page. Okay, let's skip authentication for a minute and just look around the dashboard. Now, so we notice the difference here. Traditionally, you'd have something like vue.make, or even the helper function vue. And this might say something like dashboard.index, right? And this would correspond to the name of a Blade file. However, Inertia is a little different. You're not going to work with Blade at all.

However, Inertia is a little different. You're not going to work with Blade at all. Remember, you're building an SPA here, which means all of your pages, if you're using Vue, will be stored as Vue components. Which means, I bet if we go into resources, views, yeah, the only Blade file you have here is the layout file. And we'll talk about this more in a moment. Anyways, if we go on back to the DashboardController, let's bring this back. Yeah, this is about as much as I know. So Inertia::render will expect the name of a Vue component in this case.

Yeah, this is about as much as I know. So InertiaRender will expect the name of a Vue component in this case. So an important thing to understand is that Inertia is not locked to Laravel or Vue. Instead, it has adapters for Laravel or Ruby on Rails and maybe something else. And then on the client side, it also has adapters for Vue or React or Svelte or anything else. So in this case, we are using Vue. So I would expect to find a dashboard/index file, shared/pages. Okay, so here I can see some basic layout information, which is actually really helpful. We often want to know, well, where do I put my shared components? A shared component would be, excuse me, a component that is a component that could be

We often want to know, well, where do I put my shared components? A shared component would be, excuse me, a component that is a component that could be referenced anywhere, like an input or a button or a logo. That's not linked to a specific page. But it looks like the convention is to put all of your page-specific components within a pages directory. And then I said dashboard/index. Okay, so notice we had a DashboardController. When you visit the homepage, it hits this action. This action tells Inertia to render this Vue component.

When you visit the homepage, it hits this action. This action tells Inertia to render this Vue component. That Vue component is right here. It looks like it has a layout file. And then here's the contents. So we have dashboard, a paragraph, two links. Now notice Inertia Link. I'd expect to see something like this. This is how we can intercept the click of a traditional anchor tag and instead make the AJAX request.

This is how we can intercept the click of a traditional anchor tag and instead make the AJAX request. So whether you're using Inertia or maybe Turbolinks or Vue Router, this is pretty common. Okay, so let's have a look. We come on back. Yep, there's the dashboard. Hey there. So yeah, if you wanted to tweak this, we could say, hello there. But of course, I've changed a Vue file, which means if I come back and refresh, nothing updates.

But of course, I've changed a Vue file, which means if I come back and refresh, nothing updates. You would need to recompile, right? We could do npm run watch. Well, let's have a look real quick. These npm commands will always be defined in your package.json file. So yeah, you can say npm run and then the name of one of these keys or just reference mix directly. So for example, here I could say npm run watch or npx mix watch. npx just gives us a quick way to access an executable in our bin directory.

So for example, here I could say npm run watch or npx mix watch. npx just gives us a quick way to access an executable in our bin directory. So either one works. There we go. So now it's going to keep an eye on our project for changes and recompile automatically. OK, give it a refresh. And now it says, hello there. Great. So it might be fun to figure out how does a button here work. So let's see what this is.

And again, notice how it's wrapped in inertia-link. So for example, if this were just a standard anchor tag, we come on back that recompiles. If I click on it, it's going to do a full page reload, right? That's how the web works. But when you wrap it within inertia-link, this component should intercept. Oh, there's a lot going on here. But yeah, you can kind of get the gist of it. It will intercept the click event and instead make that request as an HX call, which means if I come on back and now I click on it, the page doesn't reload. We fetch that response.

if I come on back and now I click on it, the page doesn't reload. We fetch that response. And then I guess it detects if there's an error and display it in a modal. Anyways, now I can see that we use standard layer of Controllers. And each action should return a call to Inertia::render. Or I believe there's even a helper function called inertia. And notice that basically does the same thing there. So I assume that will still work. And it does. Anyways, these actions need to pass the name of the view component in this case.

And it does. Anyways, these actions need to pass the name of the view component in this case. And then we can also pass the props that will be sent to the view component. So for example, I believe if I say foo bar, then... Oh, that's cool. I can just click right through. I wonder how it knows that I can click on that. Either way, that's cool that PHPStorm offers that. But I think I can just say props... And what did I call it?

View two. Okay, so this isn't using view three. And I know that's slightly different. So that's something to be aware of. You know, I wonder if I come on back, is there a branch for view three? view three hacking. Okay, we'll just keep that in mind and stick with view two for now. It's probably more familiar to you anyways. So we're accepting foo here. And I have the Chrome DevTools extension installed.

And props, props off. Yeah, so yeah, this is kind of interesting, right? Because from your DashboardController, we're only passing foo. So let's see if I can find that. There it is right there. So if I did another one, buzz, I don't know what the others are. buzz, give it a refresh. Now that will be so it looks like we're gonna have this page prop or page object with a prop. And then there's foo and there's badge. But then it also includes auth errors and flash.

Are they signed in at all? What's their username? These are things many of your components will need to reference. So you don't want to have to make every single action pass through the user. You don't want to do that. It should be shared across all of them. So somewhere he's doing that. Yeah, notice auth user, email, account. Anyways, we'll need to figure out how that's done. But the important thing is we do have access to badge and foo.

Dashboard index? Yeah. So we have an index component. And there, let's give that a refresh. Shouldn't that receive foo? Oh, of course you want. So if I go back to DashboardController, we're passing through foo and baz. This is important. Notice we're passing it through. But again, we only accepted foo.

Notice we're passing it through. But again, we only accepted foo. So let's add that. Is baz one? I don't know. Yeah, and now we can reference those anywhere in your component. Foo is just, you know, to make sure it echoes out. Come on back. Foo is bar. Cool.

So now if I come on back, I want to take a look at this layout. So meta information, I want to figure out how this is being applied as the title. So let's see, title. Let's see, dashboard. Dashboard ping crm. Yeah, we need to figure out how that's being said. It's probably a package that I'm not familiar with. And then normally I would expect something like this, like you have your layout component. This would just be a standard view component if you've worked with view before. Very common.

This would just be a standard view component if you've worked with view before. Very common. I'm trying to figure out why that's being referenced here or what the benefit is, which I'm sure there is. But if we take a look at shared layout, here is the full layout file. So where are those links? Is that in main menu? Let's see, main menu. Yeah, so dashboard, organization, contact, reports. That corresponds to this.

Yeah, so dashboard organization contact reports. That corresponds to this. Okay, so I just want to practice. I will often do things like this. Like if I wanted to create my own again, we're going to add another one here. That will go to route. We're just going to call this testing. We're going to delete it all. I just want to see, can I create a new link that uses Inertia to fetch and display the data? So is URL, I'm already answering one of my questions.

I just want to see, can I create a new link that uses Inertia to fetch and display the data? So is URL, I'm already answering one of my questions. Remember earlier, maybe in the last episode, I wanted to figure out how you check for an active link. Because if you're doing it normally with php, you might read request full URL and check if it starts with a particular string. But again, on the client side, you don't have access to that. So you have to reproduce it. So I would expect there to be something built into Inertia link, but I guess not. There's just a little helper function.

So I would expect there to be something built into Inertia link, but I guess not. There's just a little helper function. Yeah, it's about what I'd expect. But we'll save that for another lesson to go over it. Okay, so let's have a look here. Does that show... Oh, there it goes. I must have screwed up. Route testing is not found in the route list. Yeah, this is a...

Route testing is not found in the route list. Yeah, this is a... I wonder if Ziggy is built into ping or if that's pulled in. Ziggy just provides a... I'm familiar with this. Ziggy provides a way to take your server-side routes and make them available on the client side. So you don't have to reproduce the routing, which can be annoying. But anyways, let's go ahead and create the link. So let's just grab that. So if I were to add a new one here, let's return inertia testing index.

So let's just grab that. So if I were to add a new one here, let's return inertia testing index. Is that right? Let's see what happens if I keep it like that. Oh, and I also have to give it a name. We call it testing. And then let's say you have to be signed in for this. Okay, give it a refresh. Unknown custom element layout. Oh, I left that.

And when I click on it, when I click on it, obviously, I don't have a view component set up for that. But does it give me? There we go. Cannot find module testing/index. So then you would need to create a new page. We'll add a new directory. I called it testing. And then index, right? All right, does that work?

There we go. This is what I want to see. So dashboard, organizations, contact, reports, testing. All right, now I'm getting a little more comfortable. So I would create the route like I normally would. As part of the route, I would return an inertia call passing the view component and any props it requires. I would then create that view component it references. And this is starting to make sense. This is the only thing I need to figure this out because my brain just wants to do this,