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:
head
property (classic approach): You stick a head
object in your default export. Nice if you're using the classic script block.useMeta
composable: Modern Nuxt code (especially with <script setup>
) will typically use the useMeta
function to set head values dynamically.<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!