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
04. Setting page titles
Episodes
01. Inertia from scratch
02. Enhancements
03. Server-side rendering (SSR)
Transcript
00:00
The problem we've got at the moment is that all of our pages have Laravel as the title.
00:04
That's because over in app.blade.php, we manually set this inside of here. Now, because this entire app template here is rendered out with view, we can't dynamically change this within our controller. We can't output PHP in here like we would, for example, on a normal app.
00:22
So what are we going to do here? How are we going to change this title around dynamically? Well, what we can actually do is get rid of the title tag altogether here. So we end up with just the standard that's rendered out in our browser.
00:35
And we're going to go ahead and use the head package within Inertia. So the first thing that I'm actually going to do is create out a controller for this, just to keep things a little bit tidier. That's going to give us the opportunity to see
00:47
how this works within a much better structured app. So I'm going to go ahead and create out a home controller in here. We're going to head over to our web routes. I'm going to take all of what we've done inside of here.
00:58
And I'm going to get rid of this and replace this out with our home controller like so. Let's open our home controller up. And let's just create an invoke magic method in here and just do exactly what we did within that web route.
01:10
I'm also going to change over the component name to home, just so we can start to build out a slightly more normal app. So we've got home here now instead being rendered out. So now what we're going to do is we just head over and check that this is still working.
01:24
We're going to go over to home.vue. And we're going to look at pulling in the head package from Inertia. So let's go ahead and import head here. And this comes from the Inertia Vue 3 package.
01:39
There's a couple of ways that you can do this. You typically do this at the bottom or at the top of your template, depending on what you want to do. And we can just use this component out like this
01:51
and pretty much just go ahead and set a title. So I'm going to set that to home. And if we head over here and give this a refresh, you can see sure enough the title has changed over to home.
02:01
You can make this dynamic as well if you want to. So if you had data that you wanted to use inside of this, so for example, if you had some sort of post title, you could go ahead and inject this into here.
02:12
So you could say even message, we're passing message down as a prop. And you can see that that gets put into the title as well. So you just want to bind that in rather than just use a string literal in there. OK, so I'm going to change that back over to home.
02:25
What happens if we have slightly more complex requirements for our head? What we can actually do is set this out as a component like this and then go ahead and set the title in here. And this package will pick that up for you.
02:40
And it will just work as normal. So we'll go ahead and just comment out this. And we'll just say the home page. And if we come over, you can see that that works in exactly the same way as well.
02:51
The benefit of doing this is now what you can do is go ahead and set things like meta tags. So you could set a page description here, set the content, and we'll just say Cocourse home.
03:04
And let's go ahead and set the title here to Cocourse. And if we head over and give that a refresh, we've got the new title. If we view the page source, we're not necessarily going to see this because we don't have SSR enabled at the moment, server side rendering.
03:19
We'll be doing that a little bit later. If we check the elements out here and look under the head, you can see that the meta description is in fact in there. And it has this little inertia attribute on here as well
03:30
to show that's been set by inertia. OK, so we've got our title. We've got our description. You can add any other meta tags in there.
03:38
But you just want to do this on a page per page basis. So for example, we've only got a home page at the moment, but you can do that for all of your other pages as well. Let's go ahead and import that component and use it either like this or like this.
14 episodes•1 hr 7 mins•1 year ago
Overview
The Laravel ecosystem gives us packages like Laravel Breeze and Jetstream which come ready set up with Inertia installed. But what if you want to install Inertia from scratch and build your own features on top of it?
In this course, whether you're new to Inertia or not, we'll be covering getting Inertia set up on a completely fresh Laravel application. We'll walk through some nice additions like server side rendering, styling with Tailwind and installing Ziggy for named routes.
To finish off the course, we'll build a simple app where we can post comments to a timeline, to bring everything nicely together!
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.