Page Metadata & Resources

[00:00:00]
>> So we've done a lot as far as routing we've done all this stuff. But then something that's probably gonna come to your mind at this point is you're probably thinking wait what about page metadata stuff. Because if you actually look at our page this whole time the page titles not very friendly.

[00:00:15]
It just says the URL. We can do better than that. But the question is how? And so we talked about composable before and so composable they're gonna be everywhere in your life when you work with U3 and Nuxt because we're trying to make your life easier by providing you helper functions.

[00:00:35]
So to show you how this works, let's say we wanna go inside of the homepage, right? Index.view this is fairly straightforward. How might we do this? Well we actually have a composable called useHead, so in other words, it's a function that takes an object where we can define properties that would normally go inside the head section of the HTML.

[00:00:54]
So if I type the title here and I'm just, this is an Oompa Loompa title and then I open this up hey, look at that. That page title Oompa Loompa that easy, right? So you can certainly pass in dynamic variables and that kind of stuff but here's the thing though, right?

[00:01:10]
From here you might be, okay, well what if I wanted to find a link rel stylesheet. Well, because you're in JavaScript land it would look something like this. It be link, an array, an array of objects where what is its type. It's a rel and a rel of what?

[00:01:23]
Style sheet, and then you gotta comma it, and be, wait the h ref is this. And it's, I don't know you, it's kind of awkward to type properties this way. And luckily the Nuxt team thought the same thing to they're, yeah, we should let people do it another way too.

[00:01:39]
And so what they did was, which again, is gonna feel really weird at first. What they've done is they've actually created these built in components that are basically native HTML. Elements, but they're all capitalized. And they're special, because these are things that are going to get hoisted into how the page is built.

[00:02:03]
So they have nothing to do at a component level. So you shouldn't be looking at this thinking, this is a multi root component. No, this here is really just configuration. So we could do for example is we can go title. What can I, Water Bottle [LAUGH] there you go.

[00:02:20]
And then we can see wallah, Water Bottle, at the top. But then what's nice now is that if you wanna import like font awesome and all those things, rather than having to break up what they normally ask you to import, right? Which is some sort of link so example if it's like Import font, awesome CDN, for example, right?

[00:02:39]
Normally, it's you get some sort of, like this, just for example, let's say this thing we're trying to copy in. Normally in the past, you'd have to go in and convert this into a JavaScript object, which is just kind of a pain. But now, you can just load it in directly as long as you just make sure to capitalize the component correctly, and then this will work.

[00:02:59]
This will get hoisted and it'll be part of your page. And the reason this is super exciting is because now more so than ever, it becomes easier to actually split apart the resources that matter to certain parts of your app. Because for those who have been in the industry for a little while, we used to limit designers from including certain number of fonts because we didn't want them to actually get blown across, right?

[00:03:19]
And so don't get me wrong, you can always customize it. But this makes it even easier now to be, on this specific component when it's loaded. Yeah, we need some cursive font to do some really cool design thing, but that's the only time we ever need it. And the way it's scoped together because of single file components makes it so easy to figure that out immediately.

[00:03:36]
Right and this is an advantage to the way they've architected this is for that modularity and scoping things together.
>> Really quick one, I'm sorry
>> Yeah please
>> Html head title link these components are built in via Nuxt not via
>> Yes, these are Nuxt's components where this is also why the Pascal case naming convention is consistent with me is because If we lowercase this, this will not work.

[00:04:01]
It will not work. In fact it'll read it as normal HTML. But because we're hoisting this stuff, and it's meant for like configuration purposes, that's the reason why it's capitalized. And so by the way, you don't actually need the HTML, you can actually just do head, just like that.

[00:04:15]
This will work too. But HTML, for example, you can imagine, especially on translations, you might need to specify different language attributes. This is a common thing too, especially as people have international sites and stuff. So this is, again, is this kind of thinking index improvements that I really enjoy about seeing what the Nuxt team comes out with as they see different size projects move through the things.