Fetch Content using the Created Lifecycle Hook
Now that we have our notes, we need a way to be able to display them. We will create an index.vue file where we will do just that. Here we are going to take a look at the created lifecycle hook and see how that will help us to render our list of notes. We will also doa little formatting to make our notes look nice.
Instructor: [0:00] Now that we have content inside of our project, let's go ahead and learn how to retrieve notes using Nuxt Content. To start, let's go and create a new route under Pages. We'll create a new folder called Notes. Then we'll create the index page for our Notes directory.
[0:14] I'll start by opening up a script block as well as a template block. We'll have a main element here with an h1 of my notes. Now, as you can see here, when we go to localhost:3000/Notes, we see our h1 being rendered as expected.
[0:26] Now, let's start to fill out the JavaScript portion. I'll start by defining our data() function that returns an object, where we'll have a key of notes, which will be an empty array. Then we'll utilize a created lifecycle hook. This is where we're going to use the content module to go ahead and populate our data. Go and declare this .notes.
[0:45] Then what we're going to do is, we're going to call this .$ content. This will basically queue up our Nuxt Content module. It takes in a parameter, which is the folder or the directory that it wants to look inside of the content folder. For us, we have the Notes folder. We're going to pass in Notes. Then we're going to call the .fetch() method.
[1:03] What Nuxt Content is going to do is fetch our notes like an API, but because this is like fetching from an API, this does mean that this will be an async operation. What we need to do is prefix our lifecycle hook with async and then go ahead and add the await keyword.
[1:20] Then, to show that this works, let's go ahead and use the pre-element and pass in the Notes data. Then, when we save, you'll see that we have an array of our data. Let's go ahead and render this inside of a loop. We'll go and open up a list with list elements, and we'll loop through with v4 for note in Notes.
[1:37] For the key, we'll notice here that the data here has the slug for all the files. That's pretty unique. For our key, let's go ahead and use the note.slug. Then, in addition, let's go and pair that in case there are files with the same name with the created_at date, which would make our key unique.
[1:51] Finally, let's go ahead and define the note.slug inside of the list items so we can see everything being printed. Looks good. To make it look a little bit nicer, let's go and wrap that in an h2. Look at that. In this lesson, we've learned how to interact with the Nuxt Content module and fetch notes from our Notes directory and render them to the page to show our list of notes.