Setting Page Titles in Nuxt 3

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:

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:

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:

<script setup>
    useMeta({
        title: 'ROAST - Home'
    })
</script>

You can also define a dynamic title, say on a specific company page, like this as well:

<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:

<template>
    <div>
        <Head>
            <Title>ROAST - Home</Title>
         </Head>
    </div>
</template>

Or with a dynamic variable:

<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:

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!