Create Dynamic Pages to Render Content Pages
We don't want to have to create a new page for each of our notes. Nuxt gives us the _ prefix that we can use on our files to fetch all of our notes. We can create a template _slug.vue file that will render out all of our notes dynamically.
Instructor: [0:00] Now that we have our list of notes, the next thing we're going to want to be able to do, is be able to link our notes, so that we can actually see the rendered content. To start the process, let's go ahead and wrap our note title in a NuxtLink component. We'll go ahead and assign it to a URL, where it's /notes/ the note slug.
[0:16] As you can see, all titles have now been linked, but when we click on it, no page can be found. This makes sense, because we've yet to define the actual route for this. To do this, we're going to go ahead, and inside of our Notes directory, we're going to create a new file, and we're going to use _slug.vue.
[0:33] The underscore in Nuxt, in case you didn't know, allows the route to actually be dynamic. In other words, it's not hard coded. This is something that it will go ahead and interpret and render dynamically.
[0:44] To show you this works, let's go ahead and create a template element with an H1 of My Note Page. Now, when we refresh, you'll see that the note/egghead looks good. Then, View Components, it's working, but everything's hard coded. We're going to need to find a way to switch things out to be dynamic. The way we're going to do this is we're going to go ahead and open up a script block and we'll define our data function which returns an object.
[1:04] We'll define the notes here which will be an empty array because our notes here are an array of attributes which we'll see shortly. Then inside of our created lifecycle hook, let's assign this .note.
[1:14] We'll use the content this time to fetch a specific file rather than simply a list of files from a directory. The way we do this is we define the directory, in this case, notes.
[1:24] Then we utilize the globally defined dollar sign route parameter in the disc context in order to actually reach out and grab the parameter and the slug which will actually map to our actual file name.
[1:35] Then once we initiate the fetch, let's remember that we'll also need our async before created and then the away keyword. Once again to show that everything's working, let's go ahead and define a pre-element and pass a note inside of it.
[1:48] It's not, as you can see, when we visit egghead, you'll actually see all the different attributes that we can use to render our page. To start, let's go ahead and swap out our H1 to actually be the note.title. As you can see here, works exactly as you'd expect.
[2:01] Now, of course, you're probably wondering, "Well, what about this body? Do I have to loop through and do dynamic components?" Don't worry. The Nuxt team has got you covered.
[2:10] Because they know that you're going to be rendering markdown a lot, they've actually provided a built-in component aptly called Nuxt-content. All we need to do is pass it a prop of document and then we pass the entire note object to it.
[2:24] When you do that, believe it or not, it actually takes it and renders everything out just as you would expect. To go back and show you. Look, our View Components has everything structured correctly. Our code blogs even have proper syntax highlighting.
[2:36] As you can see here, in our Nuxt content, we have the proper headings with the inline code snippet, as well as our bolded text.
[2:43] Just like that, by using the built-in Nuxt content component, we've learned how to define a note detail page, where we can fetch specific documents from Nuxt content, and then render them using the Nuxt content component.