Installing Inertia from Scratch
This episode is for members only

Sign up to access "Installing Inertia from Scratch" right now.

Get started
Already a member? Sign in to continue
Playing
06. Using Ziggy for better routing support

Episodes

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

Transcript

00:00
At the moment on our home component, we are referencing the dashboard by its URL.
00:05
Now, most of the time within an app, what you'll actually do is give each of your routes a name. So, for example, we would name these something that's solid and probably won't change even if the URL changes. And then we'd reference these inside of here by the route name. So if the URL does change, we don't have an issue.
00:26
It just makes it a little bit shorter as well to reference it by a name. Then you at least have a consistent standard. Now, how are we going to do this within Inertia? Well, we're actually going to go ahead and use a plugin called Ziggy,
00:39
which, as you can see here, allows you to use your Laravel named routes in JavaScript. And of course, because we are working with Inertia with Vue, we are working with JavaScript. So we're going to get started on this and just see how we're going to pull this all together. The first thing that we want to do is go ahead and actually pull in the package here.
00:57
So let's go ahead and find the name for this. Here we go. Compose require Titan Co and Ziggy. And let's go ahead and pull that in. Now, the way that this works is Ziggy will be able to collect up all of your
01:09
route names and information about each of these routes. And then you can just do something with them. Now, a lot of the time within Ziggy, you'll dump these out to a file, which you will then read. But in our case, because we have a really tight connection between our
01:23
Laravel backend and our components, what we could actually do is over in handle Inertia request, we could share all of our route information via this share method that we looked at a little bit earlier. Now, before we do that, we're going to go ahead and dump out what we get
01:38
output from Ziggy before we start to share it out through all of our components. So to use Ziggy, what we do, and if we just die dump this at the same time, we go ahead and we create a new Ziggy instance. Let's just re-index our workspace here.
01:52
So we create a new Ziggy instance. And then from this, we're just going to go ahead and use the toArray method. And that will give us out all of the routes in our app with all the named routes in our app. So if we just give any of our pages a refresh here,
02:07
you can see that we get this output here. And this routes array is what we're after. We've got a couple that were included by default within Laravel for Ignition and Sanctum. But we've got our home and our dashboard route in here
02:19
with all of the information about this. So the available methods for each of these and, of course, the URI for each of these as well. So now that we've got that information, really, we could just pass this down and share this between all of our components.
02:33
And then we could read this in later to actually do something with it. So we'll go ahead and do this lazily, which means we're only going to get this data when we request it. And we're going to do that by just wrapping this inside of a function here.
02:46
And we're going to go ahead and return new Ziggy to array. What you might also want to do is also grab the current location that you are on. That might be helpful. So we could even go ahead and array merge this in with the current location of our page.
03:05
So we could use our request for that. Let's just go ahead and pull in request into scope here. And we're just going to say URL. So that might help a little bit later.
03:15
So now all of this data is potentially being shared with all of our components when we need it. Now we're going to go ahead and install the client side version of Ziggy. So we're going to do an npm install on Ziggy JS. And we're just going to run that and wait for that to finish.
03:31
Now, the way that we are going to use this is configure this over in our Vite config with an alias just so it's a little bit easier to pull in. It's not exposed in the way that we can just import it really nicely. So what we're going to do is go ahead and create out a resolve option inside of our Vite config.
03:50
And we're going to set an alias for Ziggy. So when we import it in our other files, we can just import it from Ziggy like this, rather than having to go into the vendor folder and grabbing everything out that we need. So we're going to go ahead and call this alias Ziggy.
04:08
And we are going to need to do a path resolve on this, which we haven't pulled in. So let's go up to the top here and import path here. And that's just from path. And let's go back down, path resolve.
04:21
Now we need to go into vendor, TitanCo, Ziggy, dist, and view.es. And that is it. So now anywhere we need to import this, we can just import it from Ziggy rather than doing this over and over again.
04:37
So now what we want to do is expose globally our routes from Ziggy. So we're going to go and head over to app.blade.php. And in here, we're going to go ahead and use the routes directive. Let's just see what that has done on the page here.
04:54
And if we go ahead and just pull up our element inspector here, script section just here with all of this information and this Ziggy instance as well that we can make use of. So now we need to do is really just pull this into app.js and we should be good to go.
05:10
So at the top here, let's go ahead and import Ziggy view because we want to expose the functions as well that we can use to reference our routes. So that's going to be from Ziggy. And now down here, we just want to use that plugin.
05:26
So use Ziggy view. And we also want to use Ziggy, which is that global that we just saw over here. If we just remind ourselves here, we've got this global, which will contain all of that information that we need.
05:39
And that will kind of match the two up. So we can use that function to read from any of the data that we've got. So that should be enough to get this working. If we go over to our dashboard page here,
05:49
or let's go over to the home page and click on dashboard. We know that works. We've got this awful delay on it at the moment, which isn't great. So let's just comment that out for now.
05:59
And let's just give this a refresh, hit dashboard. And there we go. OK, so now what we can do is over on our home page, we can go ahead and change this around to use the global route function.
06:12
And we can pass in the name of the page that we want to reference rather than the URL. So let's just see the difference here when I click on this. Yeah, we got 404 not found. So let's just bind that in.
06:24
That would help. And let's try that again. And there we go. We're over to our dashboard page.
06:29
So now, even if the dashboard route changes, we just head over to routes and web and just say my dashboard, for example. And we go over to our home page. It doesn't matter because we're referencing it now by its name rather than its URL.

Episode summary

In this episode, we take a look at how to improve our routing in a Laravel + Inertia + Vue setup using Ziggy. At the start, we've been referencing our routes by their actual URLs in the frontend, which can become a mess if those URLs ever change. Instead, the better way is to use named routes, and reference everything by those—so if a URL changes, your code isn't full of broken links.

We introduce Ziggy, a package that lets you access your Laravel named routes right from JavaScript. First, we pull in the package with Composer, then see how Ziggy grabs all our route info. We explore how to dump and share this data from the backend to our JavaScript components, making it easily accessible across our app. We walk through the setup—installing Ziggy JS on the frontend, configuring Vite with an alias for smoother imports, and globally exposing the named routes.

You'll see how to connect the Ziggy-generated routes to your Vue components and swap out hardcoded URLs for the global route function—making your links much more maintainable. Plus, we check that this keeps working nicely even if we rename or restructure our URLs—no more hunting down old links! This is all about making your app's routing more robust and developer-friendly.

Episode discussion

No comments, yet. Be the first!