Getting Started with Nuxt 3

Sign in Get started

This episode is for members only

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

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.

Episode summary

In this episode, we're diving into managing all the stuff that normally goes inside the <head> of your HTML document—like titles, meta tags, and more—when working with Nuxt. Since Nuxt apps work a bit differently than traditional static HTML, you can't just add stuff to the head in your HTML file and call it a day. Instead, Nuxt gives us a few different options for managing this head data dynamically as the user navigates around your site.

First, we quickly look at how you'd do this in a plain HTML file, just dropping your title and meta tags directly into the head. Then, we see why that doesn't fly in Nuxt, since the framework handles a lot of the page structure for you.

From here, we break down three main approaches to managing your head data in Nuxt:

Using the head property (classic approach): You stick a head object in your default export. Nice if you're using the classic script block.
The useMeta composable: Modern Nuxt code (especially with <script setup>) will typically use the useMeta function to set head values dynamically.
Inline with the <Head> component in your template: For template lovers or when you want to keep things really clear, you can just drop a Head component in your markup.

We try out each of these, updating the page title so you can see it in action. To wrap up, we mention the underlying package Nuxt uses and suggest checking its docs if you need to add fancier stuff in the head (like OG tags, extra scripts, etc.).

So by the end of this video, you'll know exactly how to control the head of your Nuxt app, no matter your coding style!

Episode discussion

No comments, yet. Be the first!