All right, so now let's figure out a solution for managing named routes on our front end. And here's what I mean. Let's access any of these new view components that we created. Yeah, maybe this one right here. Well, of course we recognize this as Blade syntax for echoing a named route, but of course, within a JavaScript or a view component, this is not going to work, right? So if we were to actually read this from the browser,

or a view component, this is not going to work, right? So if we were to actually read this from the browser, let's open up depth tools, scan the image or the anchor tag, and sure enough, yeah, we're just gonna get the, the literal string { { route() } }, not what we want obviously, but nonetheless, it wouldn't be cool, right? If in our JavaScript we had access to a similar route function that worked identically. And as it turns out, there's a tool called Ziggy that,

to a similar route function that worked identically. And as it turns out, there's a tool called Ziggy that, that provides this for us. It's very cool. Let show you If you're working along, we're gonna visit github.com/titan/ziggy, and sure enough, it allows us to use our Laravel routes in our JavaScript. So if we take a look at usage real quick, if we have a Laravel route with the name of postIndex, and I think we actually do in our case,

if we have a Laravel route with the name of postIndex, and I think we actually do in our case, well then we can access that URI using route('post.index') exactly the way you're used to, uh, on the backend. So cool. Alright, so let's go ahead and pull it in through Composer and I'll paste that in. All right, next you'll see, uh, where is it? Yeah, we need to add a route display directive to our layout.blade.php file and this will then give us a global Ziggy

Yeah, we need to add a route display directive to our layout file and this will then give us a global Ziggy object, uh, and also a routes function that we can again, reference globally. So let's do that. I will open up our layout file and before the JavaScript we will echo our routes directive. Okay? So let's have a look at what that does. Let's once again open up our inspector for the elements head. And here is what that routes directive does.

for the elements head. And here is what that routes directive does. It creates a Ziggy constant. So if we take a look at that, sure enough it has a list of all of the routes for our application. So notice, there we go. So let's say we want Ziggy Routes post index. Well, this is gonna give me all of the routing information for that particular URI, right? And the URI just happens to be home in this case.

for that particular URI, right? And the URI just happens to be home in this case. However, we should also have a route global function we can use. So once again, if I were to say route for post index, well that's gonna give me the full URI. So cool, right? Okay, but one quick thing, if I switch back and return to our Post view component, well, you may know that even if we have a global function, we can't just bind to it, uh, within our view component.

that even if we have a global function, we can't just bind to it, uh, within our view component. So if I did something like this, now we call the JavaScript function and then let's swap this out with postProfile. Uh, this is actually not going to work. So if we take a look, I bet if I refresh, there we go. Yeah, we get a black screen of death. So if we open up the console, sure enough, route is not a function, okay?

So if we open up the console, sure enough, route is not a function, okay? So we expect it as much, and as it turns out, Ziggy includes a, um, a plugin for view that, that just makes this work flawlessly. So let's see how, if I return to the documentation, let's find view, and sure enough we can import Ziggy view from a package called Ziggy.js and then I render it, or I I register it as a plugin.

called ziggy-js and then I render it, or I register it as a plugin. Alright, so let's install that npm install ziggy-js, okay? Next, within our JavaScript entry point, we import it like so, and then we use it or register it as a plugin, use Ziggy. And with any luck, that should solve our problem. So let's switch back, give our project a hard refresh. And there we go. So now once again, if I take a look here,

So let's switch back, give our project a hard refresh. And there we go. So now once again, if I take a look here, we should see the proper, uh, HAF and we do excellent. Okay? So now at this point you understand the general workflow. So I'm gonna switch to full screen and yeah, going forward, I'm basically behind the scenes going to scan for any reference to this old, uh, Blade echo. And I'm instead going to bind it

to this old, uh, Blade echo. And I'm instead going to bind it to the JavaScript expression or equivalent just like that. And then of course, if I still have a lingering, uh, php variable that's not gonna work here, I will swap it out with the, uh, the relevant object on the JavaScript end. And now we'd end up with something just like this. All right? So next I'm gonna snap my fingers, and when I'm done like magic, the entire code base is gonna be updated and we're done.

and when I'm done like magic, the entire code base is gonna be updated and we're done. So now if I, uh, if I visit any of our components, if we happen to reference the route function, it is now being properly referenced, which of course is a good thing. And what I like most of all is this was wildly easy to implement. All right, so onward in the next episode.

All right, so onward in the next episode.