What is the nuxt useHead composable?
The nuxt useHead composable is a new composable that comes with nuxt3.
In a Nuxt.js project, you will want to add some custom meta tags and other meta information to your pages. Instead of adding this directly in the markup, it can be added using the useHead directive. This allows you to keep all of your meta information together in one place and not have to worry about adding it manually into each page. UseHead also gives you an easy way of adding scripts to the head of your vue.js app. UseHead originally comes from @vueuse/head.
What I need to know to get the most out of this article?
In order to get the most out of this article I strongly recommend you a good vue knowledge, if you think you need to keep up a little I can recommend you this course*.
Even more important is an already set up Nuxt project. I'll help you with this here.
Some basic knowledge of the HTML structure, see the mdn page to keep up with it if you need.
A good Cup of Coffee to enjoy the task.
If you want to try out something new, I can recommend the cold brew starter Kit by Steeped Coffee to you*.
Why should one use useHead in a nuxt3 app?
You can use it to add scripts and stylesheets to the head of your document. You can also generate meta tags dynamically based on the route, which is useful for SEO purposes.
So enough of initial bla bla, let's get our hands dirty with some practical examples using useHead.
How to set the title and meta info of a page in nuxt3?
<script setup>
useHead({
titleTemplate: (title) => `My App - ${title}`,
viewport: "width=device-width, initial-scale=1, maximum-scale=1",
charset: "utf-8",
meta: [{ name: "description", content: "My amazing site." }],
bodyAttrs: {
class: "test",
},
});
</script>In the above example, we defined a dynamic title for our page.
We also set the viewport to prevent unwanted zooming on iPads and defined that we would like to use utf-8.
We then also define the meta tags for our page, helping google to find it.
UseHead for SEO
If you want to use head for your SEO, you can also take advantage of the useSeoMeta
Method. This method gives you an even more convenient way of defining all the metadata for your page.
It supports more than 100 meta tags and is fully typed.
Below there is an example taken from their docs:
useSeoMeta({
description: 'My about page',
ogDescription: 'Still about my about page',
ogTitle: 'About',
ogImage: '<>',
twitterCard: 'summary_large_image',
})How to add a script to the head of a document in nuxt3?
To integrate scripts into the head of your page, you can simply define the script tag with the script parameter.
You pass an array and use head will put every item of the array inside a script tag in the head of your HTML.
script: [
{
src: "<https://example.com/script.js>",
type: "text/javascript",
async: true,
},
{
src: "<https://example2.com/script.js>",
type: "text/javascript",
async: true,
},
],Will produce the following output in the head of your HTML:
<script src="<https://example.com/script.js>" type="text/javascript" async="">
</script>
<script src="<https://example2.com/script.js>" type="text/javascript" async="">
</script>In the next section, I will give you a practical example on loading scrips into your HTML head.
Integrate google Adsense in Nuxt3
<script setup>
useHead({
title: "My page with ads",
// or, instead:
// titleTemplate: (title) => `My App - ${title}`,
viewport: "width=device-width, initial-scale=1, maximum-scale=1",
charset: "utf-8",
meta: [{ name: "description", content: "My amazing site." }],
bodyAttrs: {
class: "test",
},
script: [
{ async: true,
src: '<https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js>',
dataAdClient: "ca-pub-yourId"
},
{ src: "anotherScript.js" }
],
});
</script>If you are working on SEO or dynamic meta tags in Nuxt3, useHead makes everything easier!
If you are working on SEO or dynamic meta tags in Nuxt3, useHead makes everything easier!
The problem is that as a Vue project grows, we often need to add scripts to the head of our document. As you might know from previous projects, this could become a huge pain in the ass. Most times with bigger projects you will end up with a mess, once it worked it is still a hacky solution and nothing to be proud of. UseHead will make this better.
useHead solves this by providing the ability to add a script tag to the head of a document. Instead of having one huge script tag that loads all your scripts at once (or worse, having multiple script tags), you can now break them up into logical groups and handle loading each group separately using useHead.
Conclusion
UseHead is an elegant new way to define your HTML head in your nuxt3 project.
Speaking for myself, useHead is a huge problem solver and my favorite new feature of nuxt3.