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
04. Page titles and meta data

Episodes

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

Transcript

00:00
We touched on this head component in the last episode, but let's dive a little bit more deeply into what this is. For every single page that you create, you're going to want to give out a page title. Now, because we're working with a single page application,
00:15
this can't be set in the standard way by just using a title tag. Even in a normal Laravel application without a view front end, you would have to do some clever stuff to get each of these page titles set anyway. Now, first of all, what is this head component?
00:30
This comes directly from Inertia. And you can see that this is imported just up here. Almost everything that we use within Inertia will come from this InertiaJS Vue 3 package, unless, of course, you're using something like React on the front end.
00:45
So we've imported this head component. And with this head component, we can give the title of the page. If we head over, sure enough, this does work. But we've got this hyphen and then Laravel at the end of this.
00:57
Now, let's dive into that quick before we look at what else head can do. You can see here that the title can actually be set when we create our Inertia app. That's going to be bound into the title tag within our HTML. And remember, that is within app.blade.php.
01:13
So we've got a title just in here. You can customize this. You can get rid of the app name if you want to. It doesn't really matter.
01:20
But this is going to go ahead and set that title in place of this title just here for you. And this component can be placed anywhere on the page. If we get rid of it, we're just going to end up with, of course, nothing in there. But you could put this at the bottom if you want.
01:33
As long as it's within your template element, it doesn't really matter where it lives. Let's actually go ahead and check out the source of this, not by right-clicking a viewing source because we're working with a single-page application. The markup is not going to technically exist on the page because it gets injected in.
01:48
But if we look in the head section here and we find title, you can see, sure enough, this has been set inside of here. So the title is actually rendering out. Once you've fully learned Inertia and you're ready to dive into server-side rendering,
02:01
you will actually be able to get a real title output on the page rather than it just being injected in. OK, let's look at what else head can do here because this can be pretty useful. Let's say that we wanted a meta description on the page.
02:16
We know that that would normally go within app.blade.php. So we would add this in like the other meta tags that have been defined here. But we wouldn't want a global meta tag in here with a description because this varies from page to page.
02:31
So in this case, what we're going to do is actually take this tag and we're going to open this component up and we're going to put this content inside of here. So the slot in here will go ahead and add that to your head. So we could say comments index just to keep things simple.
02:48
And if we head over now, of course, we're not going to see anything different on the page. But if we inspect this and we head up to the head section, you can see, sure enough, we have got our meta description in here now. So overall, this head component makes it really convenient to add
03:03
stuff to your single page apps that normally would be a little bit more tricky. And remember, we just import this on any pages that we want to use it and either use the shorthand just with the title or open this up and add anything else we need to add to the head of that page.
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!

Comments

No comments, yet. Be the first to leave a comment.