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
23. Shorthand routes

Episodes

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

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.
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!

Episode discussion

No comments, yet. Be the first!