Sign up to access "Getting Started with Nuxt 3" right now.

Let's just take a look at a really quick example of how we would do this normally. So let's go ahead and save this file just out in here as index.html. Let's generate some markup that we would normally have in a document. And of course, all of your metadata, page title stuff would go directly within the head.

So you could change over the page title to exactly what you wanted. Now, we can't do this within Nuxt. So how do we manage this? Well, we're going to look at three different ways depending on how you want to do this. The first way is to go ahead and use the standard export inside of a script, export,

default. And then we go ahead and use the head option in here, which is an object. Now, just before we carry on, Nuxt uses this package here to manage everything around our head. So you can go ahead and have a really good read of the documentation and the usage here to get to grips with it after you've finished these episodes,

as you need to add more metadata to your head or any other tags to your head. Let's take a look at a really simple example of just setting the title in here. So I want to set the page title that we have over here to Codecourse. You can see it's already been switched over. So now technically, when we view our page source,

you can see that the title has been added in here with Codecourse. And we have some standard meta and viewport stuff in here, but that's added in for you already. So let's stick with the title and we'll see how else we can use this. So that's the first option. Let's go ahead and add in a script setup type in here.

And we'll go ahead and comment out the export just in here. The next option is using use meta. So this is a function that we call. We can either pass an object to this or a function which returns an object, which we'll be looking at in the next episode. And we just provide exactly the same options,

minus head. So we could say title Codecourse again. And if we head over, sure enough, we have exactly the same thing. So we've been using script setup. So this is what I would use. But of course, if you're using a standard exported object from a plain script tag,

you can go ahead and use this head option. Now, the third option is if you don't want to use either of these and if you want to define this inside of your template. So for this, we get a head component, which we can use. Let's go ahead and add that in there. And then inside of here,

we can use title like we kind of would on a normal HTML document. So Codecourse in template, just so we can see the difference. If we come over, sure enough, you can see exactly the same thing. So we can use this to define out any metadata we want,

any scripts we want to include, and we can do that within any of these three options. So that's a really quick touch on how to manage our head. Remember, it uses this package, so you can go ahead and check out the documentation for this if you need to add any more.