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

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.

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.

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.

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

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.

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.

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,

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.

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.

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

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,

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.

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.