This episode is for members only

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

Get started
Already a member? Sign in to continue
Playing
14. Managing head data

Transcript

00:00
Let's talk about managing data that would normally go in the head part of your HTML page. Now, because Nuxt is a single page application and uses JavaScript routing, what we can't do is define out the HTML structure ourselves.
00:15
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.
00:32
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,
00:52
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,
01:13
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,
01:32
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.
01:51
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,
02:12
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,
02:31
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,
02:46
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,
03:04
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.
18 episodes1 hr 15 mins

Overview

Nuxt is a framework built on Vue that makes development of applications a breeze. In this series, we'll get set up with a fresh project and work through everything you need to know to start building with Nuxt.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!