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
03. Creating pages

Episodes

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

Transcript

00:00
So let's dive straight in and go through the workflow of creating a new root, a controller, and a page out in Inertia. So we're going to start over in our root file, and at the moment we don't have any controllers in here. There's nothing to stop you doing this, but typically within an
00:17
application we would build out these with controllers. So before we define the root, let's create out a controller in here, and let's call this comment index controller. So this is going to be the homepage for the comment system that we're building. Let's go ahead and create that root out now. So that's going to be slash comments, and we're going to reference that
00:37
comment index controller in here, and we can go ahead and give this a name as well. So let's say comments dot index. So if we open up the comment index controller, what are we doing in here? Well again, we're working within Laravel, nothing has changed here, so we can go ahead and create our constructor to give our middleware in here if we want to. Pretty much anything that we would
01:00
normally do, but we're going to go ahead and create a single invoke magic method, which we'll just call when this page gets hit, and we're going to go ahead and return a view component, which will be our page for this. Now if we head over to web roots, you can see that these are using this inertia class here to statically call this render method. Now I don't typically do this. If you do
01:21
not want to do this, you can actually use the inertia helper. I much prefer using the inertia helper to do this. Works in exactly the same way, I just find it a little bit cleaner and a little bit more convenient than pulling the class into here. So we're going to say inertia render, and we're going to choose the name of our page. So we know that our pages live over in this pages folder,
01:42
so we're going to go ahead and create a sub directory in here called comments, and I'm going to create index.view. So let's go ahead and say comments slash index. So we can go any level deep in here, it doesn't really matter how we do this. Remember this will always be prefixed with pages as we saw earlier over in our app.js file here when this gets resolved. So now that we've created
02:06
a root and we're rendering out this page, let's go ahead and just fill this in with some data. So we'll just keep this really simple and just create out a div here and just say comment index. Let's head over to the browser and see what this looks like. So if we hit this page, there we go. As easy as that, we have now created out our first inertia page. Now we're going to style this up to
02:28
make it look a little bit nicer, so we can actually go ahead and steal the entire dashboard component here to just get this to work. So I'm going to go ahead and just paste this into the index file, and I'm going to change this over to comment index. I'm going to go ahead and slightly reduce the width of the container here, and we're going to speak about this head element very, very shortly.
02:52
So let's go over, and there we go. We now have a comment index page. Now let's go ahead and just switch out the title here to comments, and let's switch this out as well to comments, and there we go. That looks a lot better. Let's just cancel off the npm run dev and rerun this just to, there we go, get that sizing right. So that's our first page created with inertia. Let's very quickly talk
03:18
about this authenticated layout here, which is pretty much just a view component with a default slot in. If we just have a look, we've got the header slot up here, which is where this slots into, and we've also got a default slot here, where all of our other content down here slots into. So this is nothing inertia specific, it's just how Laravel Breeze is set up. We're not going
03:43
to dive, like I said, too much into Laravel Breeze, but I thought I'd explain this just in case. Okay, so our first page has now been created. That is the new workflow you're going to have to get used to when you're working with inertia. Instead of rendering out a blade file, you just create a controller and instead render out a view component.

Episode summary

In this episode, we jump right into the practical steps of creating a new page in an Inertia.js-powered Laravel application. You'll learn the full workflow—starting from setting up a new route, then building out a controller (in this case, a CommentIndexController), and finally connecting that controller to a page component.

We talk about why it's best practice to use controllers for your routes, and we go through creating a route for /comments that pulls in our new controller. Inside the controller, you’ll see how straightforward it is to render an Inertia page (and why the Inertia helper function is a cleaner option than importing the class method directly).

Next, we switch over to the frontend, create a new Comments/Index.vue component, and connect it all together. There’s a bit of hands-on tweaking to get the look and feel just right, and finally, we cover how layouts work—explaining the AuthenticatedLayout and how slots function within Laravel Breeze.

By the end of this episode, you’ll have a solid handle on how to create and render your first Inertia page, and you’ll see how this differs just a bit from the traditional Blade approach.

Episode discussion

No comments, yet. Be the first!