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
09. Enhancing page titles
Episodes
01. Inertia from scratch
02. Enhancements
03. Server-side rendering (SSR)
Transcript
00:00
Since we've just focused on server-side rendering and looked at bringing back our titles, figured it would be a good idea to revisit how we set up our titles on the page and make this a little bit easier for us to use as developers. Now let's just go over to the home page real quick and see how we did this.
00:16
We know that we can either use head with title here or we can define this out with the title inside of here. But what happens if we want a default? So for example, this is home.
00:26
Maybe we wanted always dash and or hyphen co-course added to the end of this home page. Now that's not coming up at the moment just because we're running our server. So let's just run our standard npm run dev. You can see we've got hyphen co-course at the end here.
00:42
It's a little bit of a pain to have to do this on every single page. And what if our app name changes or the structure of this changes in any way? We're going to have to go back through every single page that we've created and update this. Well, there's a much easier way that we can handle this,
00:58
and that is directly within our app.js file. We can actually define out a title property inside of here. So for example, I'm going to change this to just co-course. And if we come over, you can see that we don't see anything just yet
01:12
because that needs to be a closure with the title added in here. So let's just fix that up and give that a refresh. So you can see now that even though home.view has the title home, it's rendering out co-course. Now title here that we get back from this function
01:30
actually contains the title that we've set over in home. So what we can do is we can start to add this in like this, for example. So we could say title dash, and then we could add the name of our app in here just once, and that will reflect on every single page that we create.
01:46
So there we go, home and co-course. If we head over to the dashboard, we didn't set a title for that. You can see we've got a slight issue just here with that, which we'll fix up in a moment. But let's head over to the dashboard page real quick and just go ahead and pull this in.
02:00
So we're going to go ahead and pull in script setup here, and let's go ahead and import head from, and we'll pull that in from Inertia Vue 3. We've got a few errors here. It's just a plug-in within my browser, so we can sort of ignore that for now.
02:13
So let's go ahead and set out a title in here, and that's going to be dashboard. So let's set this to dashboard, and sure enough, we see dashboard slash co-course. So that is one way of doing it, when now what we can do is just set the actual title of the page and add in co-course at the end.
02:32
But the problem is if we don't have a title, so in this case, if we get rid of the title over on dashboard, we probably just want this to fall back to co-course itself. We can add a really simple bit of logic in here
02:43
to actually check whether the title has any content. If it does, we'll go ahead and output it like this. Otherwise, what we can do is just with a ternary here, just set the title to co-course. So now if we just give this a refresh over on dashboard,
02:57
it shows just co-course, and otherwise, it shows the actual page that we've created, which is really helpful. Now, how is this going to work with server-side rendering? Well, if we just go ahead and do a run build on this,
03:10
and then we go ahead and run our SSR server. Let's find that. There we go. Of course, it's going to look the same on the client side.
03:18
But if we view the page source here, notice it just says home. We can do the exact same thing over on our SSR.js file that we've just done over on our app.js file. So we can grab this content and add this in here as well.
03:33
And it's going to work in exactly the same way. So once again, let's go ahead and just run npm run build. Let's go ahead and run our server. And if we now head over to our homepage,
03:43
view the page source, you can see that that has been updated as well. So just a real quick revisit to the way that titles are displayed, because this is how we would really do it in a real world scenario. And of course, we've also updated this to work with server-side rendering as well.
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.