This episode is for members only

Sign up to access "Learn Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
23. Shorthand routes

Transcript

00:00
Inertia supports shorthand routes, which are routes where you don't necessarily want a controller to be used, but you still want to render out a component, a page component, and you still want to pass maybe a tiny amount of data through to that. And I mean tiny, we'll talk about that in a second. So let's create out in
00:22
our app overall an about page, just to give an overview of what our app does. Now I don't want to create a controller for this, I just want a load of text in a page inside our app. So let's go over to our pages section and let's create about.view, and we'll grab the dashboard template here and paste it over, and
00:41
let's go ahead and change the title to about, and let's just say about X. Now X is going to be the name of our app, we'll look at how we pass that down in a second. Let's change the head over, and we should be good. So how do we register this without using a controller to do something like inertia and render? Well
01:02
over in our route list we're just going to go ahead and say route, but this time we're going to say inertia. Then we're going to give the URL to the page, then as the second argument we're going to give the page component directly to render. So that is about, that exists within pages, but you can still, if you
01:20
had a subdirectory here, you could still go into the subdirectory. So let's just take a look at what this does. We have now to create a controller, super easy, and you can see that this still renders our page out really nicely. So it's really convenient for more static pages that you just don't need to create a
01:37
controller and pass loads of data down to. So what if we do want to pass a small amount of data down to this? Well let's take our app name as an example. If you are unaware what you can do is access via the config the app name. That exists within config and app and if we look for it you can see that this comes from our
01:58
environment file or has a default of Laravel. So if we just give that a refresh we just get the string Laravel output. So let's say that we did want to pass this down, you can actually pass a third argument to this to give any data that you want to send down. What I would say is before we do anything be really
02:15
careful about the amount of data you're passing down directly from your roots file. For example you wouldn't want to start building up a list of posts here, it can get really messy really quickly. It's a lot better just to build out a controller and have all of that functionality exist within the
02:31
controller. So I'm going to go ahead and pass down the app name here from config which I think is perfectly acceptable and we can go ahead and accept this in in the way that we normally would. So over and about let's define out our props here, let's define out the app name prop which we know is going to be a
02:48
string and we can go ahead and replace this in our page very very easily. So let's put that in there now, head over and there we go we have an about page created with no need for a controller and we've passed a small amount of data down.

Episode summary

In this episode, we dive into shorthand routes with Inertia. Sometimes you just want to set up a simple page—like an About page for your app—without having to go through the hassle of creating a dedicated controller. We walk through how to add a new About page by just making a Vue component, copying over a template, and updating it for our needs.

Instead of registering this page the "normal" controller way, we use Inertia’s route::inertia() function. This lets you directly specify the URL and which Vue component to render, all from your routes file. We talk about when this approach makes sense—mainly for static pages that don’t need to pull in lots of dynamic data.

But, sometimes you do want to pass a little bit of information down, like the app’s name. We cover how you can pass a tiny amount of props (like from your config) as a third argument to these shorthand routes. The big advice here: keep it simple! Don’t pass a bunch of data or load up your routes file with complicated logic—that still belongs in a controller.

By the end, you’ll see how handy shorthand routes can be for quickly setting up basic pages while keeping your codebase neat and tidy.

Episode discussion

No comments, yet. Be the first!