00:02
So, so far our login and register page
00:07
just have /adonisjs being used as our page title.
00:10
So if we click between our login and register,
00:12
you can see it just maintains /adonisjs.
00:15
But if we go to our homepage,
00:16
it does actually use homepage/adonisjs.
00:19
So our goal in this lesson
00:20
is to talk about how that's happening.
00:21
So let's go ahead and hide our browser back away.
00:23
And let's start by taking a look at our homepage
00:25
because that's the one that's slightly different.
00:27
And you'll see that it has added a head component
00:30
within the template for the page.
00:31
And it has the title homepage applied to it.
00:34
This head component comes from InertiaJS.
00:36
And this head component is how we can actually apply
00:39
metadata and page titles to our document
00:41
on a per page basis.
00:43
We just specify the head component.
00:45
We can provide in a title as well as any other metadata
00:48
as child content to the head component.
00:50
And it will automatically swap that out
00:52
inside of our document's head.
00:53
And this is being set up if we scroll down
00:55
and go into our resources, inertia layout,
00:57
by that inertia head tag that we have
01:00
inside of our edge page.
01:01
Going back to our homepage,
01:03
it's using the shorthand to set the title,
01:05
but we could also switch this to provide it
01:08
as a direct child content.
01:09
So we can provide in our head there with title homepage,
01:13
and it will be provided just the same
01:14
as it did with that same shorthand
01:16
that we saw a moment ago right here.
01:18
Now that takes care of why we see homepage on this one,
01:21
but what about the -adonisjs
01:23
that we see on our login and register pages?
01:25
Well, that comes back to our app.ts file.
01:27
Within here, we have that title property,
01:29
which provides a callback function,
01:31
accepting in the title,
01:32
and there is the -appname,
01:34
which is defaulting to AdonisJS.
01:37
It will first attempt to find a Vt app name
01:39
from our environment variables.
01:41
And if it does, it will use that instead of the AdonisJS.
01:44
So if we wanted to,
01:45
we could scroll down to our .env file
01:46
and provide in a Vt app name equals,
01:49
block my course,
01:51
jump back into our browser.
01:52
And now you'll see that that just replaced -adonisjs
01:55
with -plot my course,
01:57
because during build,
01:59
Vt will automatically swap out at that build time,
02:01
anything that is prefixed with Vt
02:04
inside of our environment
02:05
throughout our client side application
02:07
whenever we make reference to it via import meta.env.
02:10
And since we have this prefixed with Vt,
02:12
it is being replaced at build time.
02:14
Okay, let's go ahead and now apply an actual title value
02:17
inside of our login and register pages.
02:19
So the first thing that we're gonna wanna do is import head.
02:21
So we'll import head from @inertia-vue3.
02:25
Now, just like our link component,
02:26
you can also register this globally.
02:28
We're not gonna do that here
02:28
because we're actually going to create an alternative
02:31
at the end of this lesson,
02:31
but that's totally an option
02:33
if you'd prefer to go that way.
02:34
And we just need to add that head component
02:36
into our template,
02:37
and then we can apply a title
02:39
or you can use the shorthand like we saw on our homepage
02:41
to say that this is our login page.
02:44
And if we wanted to apply a meta description
02:45
to here as well, we can do that too.
02:47
So meta name description,
02:49
and then apply the content
02:51
as login to your plot my course account,
02:56
and then end that meta tag.
02:58
If we give that a save,
02:59
jump back into our browser,
03:00
our login page refreshed.
03:01
Let's go ahead and refresh it to get that fixed.
03:03
And now we can see up in our title bar
03:04
that we have login hyphen plot my course being applied.
03:08
Furthermore, if we take a look at our inspect panel
03:10
and take a look at our head,
03:11
we can see our title right here,
03:12
which is working a-okay.
03:14
But if we look up a little bit further at our meta tags,
03:16
there's our meta description being applied there too.
03:19
And Inertia is adding in an Inertia attribute
03:21
so that it knows that it can be swapped out
03:24
via Inertia itself,
03:26
because Inertia will not overwrite anything
03:28
that you write inside of your actual document
03:30
outside of your Inertia application.
03:32
For example, if we were to go into our Inertia layout page
03:37
and apply in meta name description content,
03:41
this is a description,
03:43
jump back into our browser,
03:44
give it a refresh just for sanity sake here
03:46
and take a look at our head again.
03:47
You'll see that we now have two meta descriptions in here.
03:49
We have our meta name description,
03:51
this is my description,
03:52
and meta name description,
03:53
login to your plot my course account.
03:55
Since we're setting this meta description
03:56
at our server level inside of our root template
03:59
for InertiaJS,
04:00
it has not applied an Inertia attribute to it,
04:03
telling itself that it cannot overwrite
04:05
that meta description.
04:06
But it has a meta description to apply,
04:08
therefore it is applying that second one right up here,
04:11
which does have an Inertia tag.
04:12
So it's saying that as you request subsequent pages,
04:15
it can swap this particular meta tag out.
04:18
So do keep that in mind,
04:19
if you set a meta description
04:21
inside of your Inertia layout here,
04:24
Inertia will not be able to change it
04:25
and it may add a duplicate to your document.
04:28
So we don't want it there,
04:29
you wanna maintain it on a per page basis.
04:31
So we'll leave it in our view pages
04:33
rather than at the Inertia layout level.
04:35
So future Tom interjecting here
04:37
to point out one additional thing
04:38
that shoto5536 pointed out to me
04:40
on the YouTube comment of this video.
04:42
So it's in relation to server-side rendering.
04:44
So if we right click Inspect inside of our browser,
04:47
take a look at the Network tab
04:49
and refresh our page
04:50
to get all of our network requests pointed out here.
04:52
Let's take a look at the network request for our document
04:55
and specifically the response and the raw response.
04:58
What you'll notice here is that we have two titles.
05:00
We have the one coming from our Edge page
05:02
and we have the one coming from our View page via Inertia.
05:05
Now, ultimately, if we Inspect,
05:07
go into the head and take a look
05:08
at the head elements that we have,
05:10
the client-side app will strip out that extra title for us,
05:13
but at server time,
05:15
whenever we're sending this response back,
05:17
we do have that extra title in there.
05:19
So for that reason,
05:20
it would be good to jump into our Inertia layout,
05:23
which ultimately renders our Inertia application,
05:25
and just remove that title altogether
05:27
if you're going to specify one
05:29
inside of your Inertia application.
05:31
Additionally, if we jump back into the browser,
05:33
scroll back up and take a look at the raw response
05:36
for our document request,
05:37
you'll notice that this title is just Login,
05:40
whereas the title that we see in our Browser tab
05:42
has the hyphen PlotMyCourse appended onto it.
05:45
As we saw earlier in this lesson,
05:47
if we hide that browser back away,
05:49
scroll back up to our app.ts file,
05:52
we have this title tag being appended
05:54
into our Create Inertia app.
05:56
Well, we actually aren't applying that on the server side.
05:58
So if we give that line there a copy,
06:00
jump over to our ssr.ts,
06:02
we're not applying it over here, but we want to.
06:04
So if we paste that in,
06:06
we also need to go grab that app name line from our app.ts,
06:09
so let's do that real quick as well.
06:11
Jump over to our ssr and paste that in
06:13
above our render function there.
06:15
Give that a save.
06:16
If at this point we jump back into our browser,
06:19
take a look at the Login raw response,
06:22
you'll see now our title's coming through as intended
06:25
and as it is on our client side.
06:28
So the server sent HTML will now match the metadata
06:31
and titles that we have from our server side.
06:34
Thanks again to Shoto5536 for pointing that out to me.
06:36
Now back to the original lesson.
06:38
Okay, so last thing to do here,
06:39
in most applications, it's pretty common
06:41
that you might have a number of different tags
06:43
that you would want some kind of normalization for
06:45
and applied throughout most of your pages,
06:48
maybe not all, but most.
06:49
So we can extract this out and simplify that use case
06:51
for us into a component rather than using the head component
06:55
in each and every one of our pages.
06:56
So we can scroll up here to our inertia directory,
06:59
go into our components, right-click it, add new file,
07:02
and we'll call this component maybe apphead.view.
07:05
Inside of here, we'll add our script, setup lang of ts.
07:08
And we can go ahead and import the head component
07:11
from @inertia_view3 and then apply in our template,
07:14
making use of that head component.
07:16
And we're gonna keep things simple for our application.
07:18
We're not gonna have too much inside of the head
07:20
to worry about.
07:20
So we're just gonna apply a title
07:22
and then we'll also add in a meta name description as well.
07:26
What we wanna do is define props here.
07:28
So define props and allow ourselves
07:30
to provide values for these in.
07:31
So we'll have a title of type string
07:34
and a description of type string there as well.
07:36
For the title, we just provide it into the title tag.
07:39
And for the description, we need to just provide it
07:41
into the content attribute, just like so.
07:44
And with that, now we can make use of our head component
07:45
in any one of our pages.
07:47
And our unplug in view components
07:48
will automatically import the head component
07:50
register it globally for us
07:51
as we make use of it throughout our pages.
07:53
And then we can do any global normalizations
07:55
that we want to our meta information
07:57
directly inside of this head component at any point in time.
07:59
So jump back into our login page.
08:01
We can get rid of our head import right up there
08:04
and we can replace our head component
08:06
with the app head component
08:08
and provide in a title of login
08:10
and a description of login to your bot my course account.
08:15
And that component and get rid of the head altogether.
08:18
Let's also go ahead and give that line there a copy
08:20
and jump over to our register page.
08:22
And let's paste it into our template here as well.
08:24
This one will want to change the text to register
08:26
and we'll change the description here
08:28
to something like start plotting
08:30
and planning your courses with ease
08:33
by creating your bot my course account today.
08:36
Give that a save and it should break it down
08:38
into separate lines.
08:39
There we go.
08:40
And let's go ahead and jump back into our browser
08:41
and check everything out.
08:42
So we can see we still see login here for our login page.
08:45
For register we see register.
08:47
If we take a look at our head element
08:48
there is start plotting and planning yada yada yada
08:51
for our meta description.
08:52
And if we jump back to our login,
08:53
we see that swaps out with login
08:55
to your plot my course account.
08:56
Awesome. So that's all working.
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!