Installing Inertia from Scratch
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

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

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.

Episode summary

In this episode, we tackle the issue where all of our pages show "Laravel" as the page title no matter where we are on the site. We dive into why this happens—basically, because the <title> tag is hard-coded in app.blade.php and isn’t easy to swap out dynamically when using Inertia with Vue.

To make our page titles dynamic, we remove the static <title> from the layout and start using Inertia’s Head component in our Vue pages. We tidy up the routing by switching to a new HomeController and confirm everything’s still working after the change.

Then, we jump into the Home.vue component and import the Head package from Inertia (via @inertiajs/vue3). With this, we show how easy it is to set a unique title for a page, make it dynamic if you have props or data, and even get more advanced by setting meta tags (like descriptions) for better SEO.

Finally, we talk about how this approach works for every page individually and why you might not see the changes in your server’s page source unless you enable SSR, but you can always see it live in the browser’s dev tools. Now, each of your views can have their own custom title and metadata, making your app feel a lot more polished and professional.

Episode discussion

No comments, yet. Be the first!