Getting Started with Nuxt 3

Sign in Get started

This episode is for members only

Sign up to access "Getting Started with Nuxt 3" right now.

Already a member? Sign in to continue

Playing

15. Dynamic head data

Transcript

00:00

So we've looked at three different ways that we can manage our head, using the component within a template, using use meta,

00:07

and using the standard object that we explore in this head option. Now let's take a look at how we deal with dynamic data within our head. Now at the moment, everything that we've used here is static, which is great for pages like the home page or your general pages that you want to create.

00:26

But what happens if you want to show a title from maybe an API request? Well, let's head over to Todo's ID and let's do this in here. At the moment, you can see that we just get the standard URL for the page that we're on, since we don't actually have a title element in here.

00:44

Okay, so let's go ahead and because we're using script setup, use the use meta function. And let's just pass a title in here just so we know this works. So I'm just going to say Todo 1.

00:58

Let's go over. And there we go. Sure enough, it changes. So we know that works.

01:03

Let's now try and grab this value from the request that we're making here, and then output the title. So the goal is to have the title of the Todo in the actual title on the HTML page. So we're going to go ahead and access Todo.

01:17

Now with Nuxt 3, because this uses Vue 3, Todo is actually now a ref. So rather than say Todo.title, what we're going to do is use Todo.value and then title. Because this is a reactive property within Vue, we need to use value to get the underlying value of this.

01:39

Let's go over and just give this a refresh. And sure enough, you can see it works. If we just view the page source here, you can see that that works really nicely. The only problem is if this changes for any reason,

01:50

we're not going to end up with the same title. So this is acceptable. But let's take a look at what happens with this Todo item changes. Just as a really silly example, I'm going to go ahead and add a timeout into here.

02:03

And let's go ahead and change Todo.value and title over to something else. Something else. Maybe that happens when the user updates the Todo with a new title. Let's do that after one second.

02:19

So let's go over and just give this page a refresh. You can see that here this changes. But of course, in the title up here, it doesn't. So to get around this, what we're going to do is use a computed property for title

02:30

within Vue 3, which is a Vue 3 thing. And we're going to handle it that way. So to start with this, we're going to go and import computed from Vue. And if you've worked with the Composition API,

02:43

you probably have worked with computed already. And then we're going to grab this title value here. We're going to add this into the return value of the function we pass into computed. Let's take a look at the difference.

02:57

So I'm going to give that a refresh. As soon as that changes, you can see that the title updates as well to include that new title. So if this was a form and the user could change the title of the Todo over, that would be reflected over in our head as well.

Episode summary

In this episode, we dive into making your page <head> elements dynamic in Nuxt 3. So far, we've just used static values in our titles and meta tags, which works well for fixed pages like a homepage. But what about when your content comes from somewhere dynamic, like an API?

We head over to a Todo details page and look at how to set the page title based on data fetched from an API. First, we use useMeta to set a static title, just to confirm it works. Then, we swap this out to use the title from our API-fetched Todo. Since we're using Vue 3's Composition API, we remember that reactive data like todo is a ref, so we use todo.value.title to get the actual value.

Next, we try to update the title reactively—maybe after a user updates the Todo title. We simulate this by changing the title via a timeout, but realize that our page title isn't updating as expected. To fix it, we use a Vue 3 computed property for the title, making sure the document title updates any time the Todo title changes. This way, any changes—like editing a form—are automatically reflected in your page's <head>.

By the end, you'll understand how to keep your <head> content in sync with your page data, so your dynamic app always stays up-to-date in the browser tab and in SEO metadata.

Episode discussion

No comments, yet. Be the first!