Learn Inertia
This episode is for members only

Sign up to access "Learn Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
18. Making use of Ziggy

Episodes

0%
Your progress
  • Total: 2h 20m
  • Played: 0m
  • Remaining: 2h 20m
Join or sign in to track your progress

Transcript

00:00
Before we talk about what Ziggy is, let's just take a look at some of the requests that we're making from our index page and look at how we're defining these URLs. So we know that when we create posts, which we did a while back, we are posting through to slash comments.
00:16
That is the URL. That's part of the URL. The same down here when we made a manual request to fetch post, we do this to comments.
00:26
And even over when we use links, like when we link through to the user, we are forwarding the user over to slash users and then manually passing in the post ID into this part of the URL. Now, that's absolutely fine.
00:39
There's nothing wrong with doing this. It's not going to work any differently in terms of how Inertia handles the request, because it's still going to make a request through to the same place.
00:49
But wouldn't it be good if we could use a root helper like we have in Laravel within JavaScript? So Ziggy is nothing specifically to do with Inertia, but in the Breeze starter kit, it's utilized to allow you to
01:06
reference your named routes within Laravel. So as you can see here under the About section, very simply, use your Laravel named routes in JavaScript. So nothing to do with Inertia,
01:17
but you can use it to clear up where you're linking through to. So just a reminder, over in Roots and Web, we have named every single one of the routes that we've created, but we're not referencing them anywhere just yet.
01:30
So before we go ahead and switch these over, let's take a look at how this works within an Inertia built app. So we're going to start over in app.js. Now, if we come down here, you can see that as well as using the Inertia plugin,
01:46
we're also using this Ziggy View plugin. So that's being imported up here and used within our view application. What this is doing is it's registering a route function that we can use globally throughout any of our pages.
01:59
And the second argument to this is a global window object which gets put into the top of our page. So let's go ahead and inspect this. And let's have a look at the top in the head here. And you can see in one of these script
02:14
sections, we've got a constant in here called Ziggy, which contains all of the URLs in our application, the names and the location or the URI. So what this does is it sends over using this global window object all of the root names and URIs in our application
02:34
and then allows us to use that within our templates using that root helper. Now, this is specific to Breeze. But how is this if we just head back over to that script here, how is this getting into the head of our page?
02:50
Well, remember over in app.blade.php, when we looked at how Inertia gets the main wrapper built up with the Inertia directive, what we also have here is the roots directive. If we get rid of this and come back over,
03:04
you can see that sure enough, it doesn't actually work because Laravel Breeze uses these roots. But that is how that is getting put into our page. Inertia head is how the titles are getting rendered and all that metadata.
03:17
So all of these things are absolutely vital. But the main thing to realize is Ziggy is not part of Inertia, but it works and pairs really nicely with it. So what we're going to do now is switch
03:28
over some of the roots that we are referencing to use the named roots instead. So we'll start over in index.view. And let's start out with our link here through to the users page. So if we go and swap this out, we're still going to bind this in because
03:45
we are making a function call here, so it's not just a string literal. We're going to give the name of the root. Let's just remind ourselves what that is, users.show. So we're going to put users.show in there.
03:56
But the key thing with this is we need to actually pass the user ID in. Now, we can either pass just the user ID in or we can give the entire user object and Ziggy will work out what it needs, so we can just say post.user.id. Let's just check that's still working.
04:14
Sure enough, it is. It's going through to the right user or we can just pass through the user object like we're used to doing within Laravel. We don't have to, when we reference a root
04:25
using the Laravel root helper, give the specific ID. We can just give the entire object and it will work it out for us. And sure enough, you can see it still works. Let's go down to one of these other posts
04:35
by this fake user and you can see that that works as well. So how do we use this root helper when we're doing things like this, posting forms or doing anything else within the script section of our app? Well, it works in exactly the same way.
04:50
So we have comments.index here and comments.store. So to create a post, we're going to use that root helper and say comments.store. And for refreshing the comments,
05:02
we're making a request through to the comments index. So we're going to say root and comments.index. Now, just by doing this, actually, this has given us a good idea as to actually what route this is going
05:13
through to rather than the URI that looks the same. The names for each of these routes are unique. So we know that we're posting through to this store route. And here we're just requesting the index again with just the post.
05:26
So that really helps tidy things up nicely. I don't think we have any of the hrefs around here that we can switch up apart from this link that we demoed earlier. But that's going to work in exactly the same way.
05:36
Again, you just want to bind in the route. So that is an overview of Ziggy and how we can use this within Inertia, although it's not part of Inertia, to render out route URIs based on the name of our routes.

Episode summary

In this episode, we dive into what Ziggy is and how it helps manage your route URLs in JavaScript, especially when working with Laravel and Inertia.js (though Ziggy isn't specific to Inertia!).

We start by looking at how we've been hardcoding our URLs in various places, like making POST requests to /comments or linking to users by building the URL manually. That's fine, but it can get messy and hard to maintain, especially if your routes ever change.

Then, we introduce Ziggy. Ziggy lets you use your Laravel named routes directly in your JavaScript or Vue files. This means if you have a route named users.show, you can use Ziggy's route() function to generate the URL, passing in whatever parameters you need, just like you do in your backend Blade templates.

We look at how Breeze sets Ziggy up, pushing all your route data onto the global window object and registering the helper so you can use route('users.show', user.id) in your Vue components. This keeps your JS in sync with your backend routes, cutting down on bugs and manual changes.

To wrap up, we refactor some links and form actions in our Inertia app to use Ziggy's route helper. It's straightforward and instantly makes our code cleaner and more robust, since we're now referencing named routes rather than relying on hardcoded paths. If you're using Laravel and writing any frontend code, Ziggy is a super handy tool to have in your stack!

Episode discussion

No comments, yet. Be the first!