Use Frontmatter to Add Metadata to Notes
Frontmatter is an amazing tool that we use in markdown to be able to add in some key/value pairs to use for data fetching later down the line. Frontmatter is done at the top of the file in between two ---. We are going to add the key/value pairs of title, publishOn, and tags.
Instructor: [0:00] While it's nice that we're able to show the notes and render them in a list, it would be nice if we could actually render a proper title for our notes, rather than the slug. How do we do this?
[0:08] For those who don't know, Markdown files have the ability to add metadata using this concept of front matter. It's simply defined where, at the top of the file we see here, we're using the triple-dash syntax in order to define the start and stop of the front matter. Inside of here, it uses a YAML syntax.
[0:24] Inside of here, you can define various properties. In this case, we're going to define a title property. This note will be called Egghead. We can go ahead and go through our other notes to define Nuxt content. Then here, we'll add a title for view components.
[0:38] While this is a great start, one of the great things about front matter is that you can define things beyond simple strings. In this case, of title view components. There are things like numbers, Booleans, objects, but also, you have things like timestamp.
[0:50] We want to do things like define when something should be published. Then I can have a key like publishOn, and then I can assign it a date-time format here. In this case, I'm using the ISO 8601 format. Then this will actually allow me to access this property later on. Then we can also do things like arrays. If you want to add tags to your various notes, so in this case for Vue components. We can say we want to tag Vue components in front end.
[1:13] Then let's go ahead and copy these attributes for the rest of our notes. On the publishOn, let's go ahead and swap out the components for Nuxt and content instead. Then let's go and change the date so that it's different. Then for our final Egghead one, let's swap out the tags for learning and platform.
[1:30] Then just like that, what we can do to show that all of this worked, is if we open up our Vue DevTools. You'll see here that inside of our notes array, we'll see that every single object actually has the various properties that we've injected using front matter.
[1:46] We see that our publishOn is defined there, as well as the title and the tags. With that knowledge, let's go ahead and update what we're actually rendering. Rather than just printing out the slug, let's go ahead and render out note title. Then we can go ahead and render out the publish date.
[2:01] While this works, let's go ahead and wrap it in new date, which we're actually pretty printed a little bit better. Then finally, we'll do an unordered list and then go ahead and loop through the list items in tagged in note.tags.
[2:12] Then to make the key unique, we'll simply pair the slug with the tag name. Once we save, you'll see now that all of our notes have all this rich metadata that's being exposed through Nuxt content API.
[2:23] To review, when you want to add metadata to your markdown files, you use front matter to define various properties. Then those can take various data types, again, such as strings, numbers, Booleans. As we can see here, we're utilizing arrays and even timestamps. You can do a lot of really interesting things with it.