Now, it's not directly related to Inertia, but I still want to have a look at this VueMeta package and how it's used. So I think it's connected to this. So if you want to bear with me, it looks like you can pull it in through npm. So npm install vue-meta. All right, let's bring back our watcher. But then after we do that, we would import it. And then it's a Vue plugin. So it looks like we can use it here. And then, yeah, this metaInfo.

Okay. Yeah, so maybe we have a default here. And then this can override. Yeah. So you can override the title and even override the template if you need to. Okay. What about special cases? What about things like setting the meta description? Okay, so we provide a meta property with an array. And then these would be the attributes.

Okay, so we provide a meta property with an array. And then these would be the attributes. So this will construct the tags, I assume. Let's have a look. Right here. So this is our main root Vue component, right? And it looks like the template is title. I guess that gets passed in. I'll have to figure that out. And then we check.

This is a nice way to deal with it. Traditionally, I usually reach for portals. If you're using Vue 3, there's a teleport feature built in where you can just teleport. You could even put it up here. You can teleport a tag right to the head. But this is actually pretty cool. I wasn't familiar with this. So here's where we pass in the title. And then that title is referenced as part of the template. So let's see, like right here, if I wanted to say title template and I set it to null,

And then that title is referenced as part of the template. So let's see, like right here, if I wanted to say title template and I set it to null, that means it should just say dashboard, right? Yeah. Okay. I get it. Cool. So if I want to set a description now, what did we say? You need to provide that meta array. And can I just say, like, this is a meta with the name of description and a content

You need to provide that meta array. And can I just say, like, this is a meta with the name of description and a content of your dashboard over, you know, whatever. Is that right? Come on back. Refresh. View the source. Oh yeah, of course, JavaScript. We would have to go through Chrome DevTools. So can we see?

But I guess it doesn't need to do that because it knows it goes in the head tag, so it'll just throw it at the bottom of the head, at least I think. So what's nice is if we were to, let's go back to dashboard.view. So if I didn't have one of these at all, come on back, refresh, you would still get your default ping CRM, and that's part of the template. But you can override it if you need to. So now one thing, what if, let's get rid of that, what if we need to grab it from something from the database? So let's just say $data return $description. This again would maybe be the $description of, you know, if this were a post component,

So let's just say data return description. This again would maybe be the description of, you know, if this were a Post component, it might be the title or the excerpt. This is a description from the DB. So if I wanted to reference this up here, how would I do that? Because I can't do, I can't reach your description. Like, that's not going to work. Well, it compiled, but that's not going to work, right? No. Undefined has no properties.

This is just a simple explanation with no code.

So let's see, meta info is now a function that should return an object, like so. And will that do it now? Come on back, refresh, have a look. Added. This is a description from the DB. Perfect. Okay, so if any meta tags are dependent upon something you have as a prop or in your data, you would need to call this as a function. Cool. Perfect.