Alright then gang, so the site is coming along pretty well and now I want to switch my focus a little bit to not the site content anymore, but to the metadata of the site. So things like the title tag in the document head, links to external stylesheets, meta tags for the site description, that kind of thing. And there's a few ways we could actually control this in Nuxt.
The first way is to add all of this head content into the nuxt.config file. So open that up first of all, and then after the modules property, we can have another property called app which is an object. And then inside that object, a property called head, which is also an object. And it's inside this head object that we can define a sitewide title value, any meta tags, and also links to other resources. So let's do a little bit of that now.
First of all, I'm going to add in a title property. And remember, a title is the thing that you see on the tab in the browser, so I'll show you that in a second. But this is going to be a sitewide title. So we'll say, "Nuxt Dojo" is the title by default, right? And that's going to apply to any page that we're on.
Alright, so what if we want to add meta tags, like for the description of the site? Well, we can do that by saying meta and then have an array of different meta tags if you like, where each tag is represented by an object. So each of these objects has a name property, and the name is the name of the meta tag. So what is the meta tag? Well, this is one for the description. And then also we have the actual content for the meta tag. And we will just say something like, "Everything about Nuxt 3". Alright? So that is now going to apply a meta tag, a description tag, to every page as well in the document.
Alright, we can also add external links to stylesheets for example. So I could say have a link property, which is also an array of these different link tags. And then in here we need to specify the rel property, which is also on a link tag. So we'd say rel is stylesheet. And then we'd also have an href property and that is going to be the href. Now I'm just going to copy this. I'm actually going to use Material Icons, which I'm going to paste in right here. So we're just linking to the Material Icons library.
Using Linked Libraries and Verifying Changes
And now we've done that, we're going to get that link tag in the head of our document. So we can just use this Material Icons library in our components. For example, I could go to our product details component. So this is when we go to a product details page, we see all the details about the product. Imagine I want to add a button right here to add to the cart. Let's give this some classes, so we'll say class is equal to btn and also flex. And the reason it's going to be flex is because there's two items inside this. The first one is going to be Material Icons. So to do that we say <i> and this is all on the Material Icons documentation, by the way. Give this a class of material-icons. And we can do that because we have that external stylesheet now linked in. And then also we'll give it a margin to the right of two. And right here we use the icon name. So I'm going to say add_shopping_cart. So I've not made this up, this is from the docs for Material Icons, and it gives us a shopping cart icon with a little plus, I think. So after, the second element will be a <span> and it will say "Add to cart". So that's why we added flex right here, so this and this sit next to each other.
Okay, so now when we preview this in the browser, we should see the title in the tab, this meta tag for the description, and also this link right here to Material Icons. And we should see this cart icon in the button as well. So first things first, we can see up here it says Nuxt Dojo, that is the title we gave it. And then if we go to the products page, in fact, first of all, what I want to do is inspect this and have a look over here for the meta tag. So if we go to the head, we should see a meta now for description, and it says, "Everything about Nuxt 3", so it's injected that, and also this link tag to the Google Fonts library. Okay. So now if we go to one of these, the details, we should see that button. And we can see the icon as well. So that has worked. Awesome.
So this right here is one way of adding all of this head information like the title, meta tags, external links to the website. Now this is global, it's sitewide, so it's going to apply the same values to every single page in the application. But it might be that you want to override those values on a page-by-page basis. For example, the products index page right here, you might want to have a different title value. And you can do that. You can override these values in different page components. And we can do that in a couple of different ways.
The first way I want to show you is by using the useHead composable function. And this takes in as an argument an object. And pretty much any of these values we've added right here, the title, meta, or link, we can override inside this function. And then it's going to apply those values to this page instead of these default global ones. So I could say the title here is going to be "Nuxt Dojo | Merch", because this is the merch page. So that would give this individual page that title, it would override this one over here. Okay. So every other page is going to have this one now, but this one will have this title.
We could also apply a different meta tag so we could say meta and then in square brackets we can say we want a meta tag whereby the name is the description. So the same as the other one, we're just going to override it. And then the content for this is going to be different, so I could say, "Nuxt 3 Merch", like so. And that's going to override this one right here.
Okay, so that's the first way of overriding this information. The second way is to use built-in components or tags, if you like. So I'm going to show you inside the product details page this time how to do that. So in a minute, the product details page is going to get all of this head stuff right here because we've not overridden that anywhere, only in the products index have we done that. In the products details page, we're going to use these built-in Nuxt components to add a head, a title, and maybe a meta tag. So let's do that up here. I'm going to do it above product details and we will have a <Head> component. And then we can have a <Title> component. And then inside the title, we could say "Nuxt Dojo |" and then I can also output variables inside that are available to us inside this template. Now we have access to a product because we get the product right here. So I could, for example, say here output a variable in the title which is product.title. And that's going to be different now for every individual product, isn't it? Which is pretty cool.
And then down here I could do a <Meta> component, which is also built-in. The name is a prop, which is going to be the description. And then also the content, which I'm going to bind to. So colon and then content, and we set that equal to something dynamic. And it's going to come from the product that we have, and then the description property which we have as well. And that's pretty much it.
So now we've overridden it using useHead, also these built-in components as well. So let's give this a whirl in the browser.
All right so now on the products page over here, we can see that we have this new meta tag, the description is "Nuxt 3 Merch", so that's updated. And if we look at the title, we can see that's changed as well. If we go to one of these things here, view details, we might need to refresh the page but in this case the title has updated for us. We can see the name of the product right here. And then you can see, we don't need to refresh, we can see the description here has changed as well. So all of this is now working, which is awesome.
