Alright, let's figure out routing. So if I go to layout.vue, yeah, right here we have this dropdown, my profile, manage users, logout, that would correspond to this right here. And you'll see, of course, each one of those is an Inertia link, which means when I click on one of them, the page isn't going to reload. Well, in this case. Let me sign back in. But yeah, if I click on a page, it'll make the AJAX request, which is great. But if we switch on back, you'll see the href, or the href, is using this route function, which is very similar to what we would do within a Blade view.

But if we switch on back, you'll see the href, or the href, is using this route function, which is very similar to what we would do within a Blade view. So I'd like to figure out how that's working. And I don't think it's anything Inertia provides out of the box. If we go to our composer.json file, you'll see this pulls in Tighten's ziggy app that Daniel made. And if we have a look at that, use your Laravel routes in JavaScript. So clearly, that's what's going on here. It exposes a route helper. And sure enough, if I switch back, there it is.

It exposes a route helper. And sure enough, if I switch back, there it is. So it's intended to simulate the route helper that Laravel provides. So notice how in this case, users.edit, of course, is going to be a named route. So if we go to route('web.users.edit'), there we go. Create a route to this endpoint. And of course, notice we have a user wildcard. Well, that can be passed in as the second argument. In this case, we're giving the ID of the currently signed in user. The alternative would be to do something like this, and I'm sure you've done it, as have

In this case, we're giving the ID of the currently signed in User. The alternative would be to do something like this, and I'm sure you've done it, as have I. But we'd have users plus the current ID plus edit, right? So if we were to come back and refresh, yes, of course, I can still edit the User's profile. But the problem ends up being you repeat the routing in two different places. So this is what Ziggy is intended to solve. Because again, think about it, if we changed it to dashboard, well, you'd also have to search everywhere on your front end and update this as well. And that ends up being kind of brittle.

So I'd like to figure out how exactly we install this so I can use it in my own projects. Okay. So you run ziggy through Composer, and then you add this routes Blade directive to your main layout. And we saw that earlier, didn't we? Here's our main layout. And then we have routes. And that seems like all there is to it. So let's have a look. View source.

So let's have a look. View source. And yeah, it creates the Ziggy object with a list of named routes. So I assume it's global. Can I just say Ziggy? Yep. Named routes. And here's a list of all of the named routes in our system. So if we said users.edit, we get an object. And there we go.

So if we said users.edit, we get an object. And there we go. Okay. Let's see what we got here. So we have a route helper function. And again, if you're familiar with Laravel's route helper, the entire point is it's going to resemble it as closely as possible. So we can pass in params. You can pass in query params. Let's see.

Great. So think about it. If in your routes/web.php file we had some kind of Route::get('foo'). And this just returns 'hello there'. We can now give it a name of 'foo'. And let's try to link to that endpoint foo. And this should work. And it does. But now we're going to link there.

And it does. But now we're going to link there. So we'll go back to, how about layout.blade.php. And why don't we just add a temporary one here. foo. Okay. So I want to round to foo. And yeah, this is a good way to learn. Just play around. Make sure you understand the basic workflow.

What would happen now? Let's come back and give it a refresh. Oh, it doesn't load at all. Let's see. Yeah. Ziggy. ID key is required to route foo. Okay. That makes sense. So we're now going to say foo.

That makes sense. So we're now going to say foo. And I think we can pass it as a single param or as an array or as an object. So let's give that a shot. Yeah. So will that work? Yes, it does. What about like that? Same thing? Yep.

Same thing? Yep. And then I think we can also do it as an object. So you say the wildcard named id. We'll set to 2 this time. We're not doing anything with that, but it should still work. So great. I think I understand this. If we're using Laravel with Vue and we need to communicate our server side routes over to the client side, of course, Vue and Inertia don't provide any of that functionality out.

If we're using Laravel with Vue and we need to communicate our server side routes over to the client side, of course, Vue and Inertia don't provide any of that functionality out of the box. So instead we can pull in Ziggy through Composer. We then add the routes directive to your layout file or your master page, and you're all set to go. I like it.