Hire Us 
Blog
When migrating from Nuxt 2 to Nuxt 3, setting page titles is slightly different. In Nuxt 2 setting page meta data is done through the head() helper function. Or, if you define a title globally, you could set it in the nuxt.config.js. In Nuxt 3, page titles are set through the useMeta() composable function or through some really convenient components provided by Nuxt. Let's dive in to how to set some page titles!
Step 1: How Nuxt 2 Set Page Titles
Let's say, we have a companies page (like we do in ROAST), that have dynamic titles. One title could be "Ruby Coffee Roasters" another would be "JBC Coffee Roasters" (both excellent coffee roasters out of Wisconsin by the way). We want those coffee shop titles to be dynamic.
In Nuxt 2, you have a head() method that allows you to return certain meta data. For example, a dynamic title like this:
Nuxt 2 dynamic page title using head method
head () {
return {
title: this.title
}
},
Where this.title is a variable that gets computed and set. When that page is rendered, your page title will be set dynamically.
You can also set the default title in our nuxt.config.js file:
Nuxt 2 default title configuration
export default {
head: {
title: 'ROAST',
}
}
This page title will be used as a default if there's no title set on an individual page. Or it will be used as the title if you don't want dynamic titles. Either way, that's how you'd set a page title in Nuxt 2. Let's set some page titles in Nuxt 3!
Step 2: Use the useMeta() composable
The useMeta() composable is a simple composable that can be added to your script setup method. With this composable, you can set all of the meta data for the page, including the page title. If you wanted to set your page title through this composable, you'd add the following to your script setup or your setup() method:
Nuxt 3 static page title using useMeta
<script setup>
useMeta({
title: 'ROAST - Home'
})
</script>
You can also define a dynamic title, say on a specific company page, like this as well:
Nuxt 3 dynamic page title using useMeta
<script setup>
useMeta({
title: `ROAST - ${company.name}`
})
</script>
You will have to load your company variable dynamically, but you can now use this variable to set a dynamic title. The ability to update meta data, specifically on a per page basis, along with SSR is one of the most decisive reasons to use Nuxt JS. You can now benefit from SEO in your single page application.
However, there's another option that may be even better. Nuxt provides some powerful components out of the box. Let's check those out.
Step 3: Use the provided components
Nuxt 3 provides a variety of default meta components that you can use to accomplish the same functionality. One thing to point out, and this is directly from the documentation, "<Head>and <Body> can accept nested meta tags (for aesthetic reasons) but this has no effect on where the nested meta tags are rendered in the final HTML." This is huge and should be discussed before we step through our example. What this means is that you can place your <Head> and <Body> tags anywhere in your mark up and will render properly in the <head>. They can accept any nested tag as well, such as <title>.
So within ROAST, we have the following:
Nuxt 3 static page title using Head component
<template>
<div>
<Head>
<Title>ROAST - Home</Title>
</Head>
</div>
</template>
Or with a dynamic variable:
Nuxt 3 dynamic page title using Head component
<template>
<div>
<Head>
<Title>ROAST - {{ company.name }}</Title>
</Head>
</div>
</template>
In the example above, we placed our <Head> tag right in with our <div>. This may seem weird if you've made HTML pages in the past. However, since these are custom components, and not actually the <head> and <title> tags from HTML, they are just for ease of use. The components will render the content in the correct spot when the page is rendered. I really like this component approach. It's pretty straight forward and easy to add to the page you want the title on.
There's one more place we can look to add page titles, and that's a default title in the nuxt.config.ts file.
Step 4: Set a default title in nuxt.config.ts
Similar to Nuxt 2, you can also define a default title for your app in the nuxt.config.ts file. To do that, you need to add the following:
Nuxt 3 default title configuration
export default defineNuxtConfig({
meta: {
title: 'ROAST',
}
})
Setting a title here is good practice just as a fallback. You should provide a specific title on each page that needs one. However, having a fall back in place is a good idea as well. Since this is global app level, this can't be dynamic.
Conclusion
Hope this helped show some of the differences between setting page titles with Nuxt 2 and Nuxt 3. The flexibility provided by the composable and components in Nuxt 3 is amazing. If you want to see how this works in a much larger sense, we have a book about building a single page application with Nuxt 3. You can see a more cohesive approach along with a bunch of other tips and tricks!
If you have any questions, feel free to reach out on our community or get in touch on Twitter!
Want to work together?
Professional developers choose Server Side Up to ship quality applications without surrendering control. Explore our tools and resources or work directly with us.
Join our community
We're a community of 3,000+ members help each other level up our development skills.
Join our Discord Platinum Sponsors
Active Discord Members
We help each other through the challenges and share our knowledge when we learn something cool.
Stars on GitHub
Our community is active and growing.
Newsletter Subscribers
We send periodic updates what we're learning and what new tools are available. No spam. No BS.
Sign up for our newsletter
Be the first to know about our latest releases and product updates.
We're a community empowering product builders with self-hosted tools and open source solutions.