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.
28 episodes•2 hrs 20 mins

Overview

Single-page applications are great, but they come with the challenge of maintaining two separate projects — the client and the API.

Inertia serves as the solution, seamlessly connecting these two components and enabling you to build everything in one application (a monolith) while achieving the same outcome. The best part? You won't have to create an API.

To be honest, when I first started working with Inertia, I was a little confused about how everything worked. If that sounds familiar, then this course is made for you. I'll guide you through everything you need to know to kickstart your journey in building single-page applications using Laravel, Inertia, and Vue.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Comments

No comments, yet. Be the first to leave a comment.