Dynamic routes and markdown with NuxtJS Content project

we'll now start adding some pages for our documentation we'll keep this area which is our index the same and then what i want to do is create a documentation page for link one and also for link two all right let's jump into the code before we work on our dynamic view page let's first create some markdown files i'm going to open up my directory structure and then what you'll notice and let me just clap some of these what you'll notice is that there is no content folder with nux content it expects to retrieve the content from a content folder so let's add that to our root directory i'm going to right click on my docs and then add new directory and then we'll call it content and what i can do also is add some subdirectories let's say i have different groups of content that i want to organize maybe one is just for my documentation one is for my how to's and one is for something completely different let's get that structure going here on the onset so i'm going to right click on that content and then create a new directory and call this documentation and now let's add a new file to documentation and let's call it doc example and then we'll end that with a dot md for markdown this is going to be markdown files that we're creating which is pretty cool for several reasons one is because well it's basically just a flat file cms that we're creating with next and also if we create markdown files here the cool thing about the nux content module is that it will parse the markdown within those files and then add the appropriate html tags to them and there's something else that's really cool it's basically their secret sauce and i'm not going to tell you now i'll tell you about that a little bit later let's go ahead and start creating our markdown file let's first start with creating some page metadata so just do the three dashes and then in between that add your metadata we'll add a title and i'll call this doc example and maybe just example one and then description and let's call that documentation example example one we can describe some other metadata as well let's say we have a page image that we want to use as well as maybe even a video and we'll just leave these blank for now let's add some just generic markdown let's do a header two so you do the pound sign pound sign header two and then for a header three that's three pound signs header three and maybe we'll also add a link let's link over to google so you do the name within the square brackets and then in parentheses we'll put the we'll put the url https google.com maybe we'll also add a picture so with that you do the exclamation mark and then score brackets and then for the alternative text let's call this this is an image and we'll point to actually let's open up the directory structure here what you'll want to do for this is under the static section you'll add a new folder called images i already did and then also drop in an image so we'll just use the cleaver logo for this i've already dropped that in there but then you do the path relative to the static folder so in this case it'll be forward slash images and then cleaver underscore logo.png and that will be our image okay let me collapse that back down and how about we do a couple lists as well let's do an ordered list and list and we could also do an unordered list and we'll just do the dashes for that okay cool i like when ids have the little preview for markdown to the right okay now that we have our markdown file let's create a dynamic route that will pull in these different content files into the view component and for that what next has available is let's go to the directory structure here and then look at pages what we'll want to do is add another page under this folder so we see the index dot view right now that's that main content that you see that currently has the nux logo primarily and then what we'll do to create more of a dynamic page is use the underscore character so let's go ahead and right click on that pages and then new file and then we'll do the underscore character underscore and then we'll call this doc dot view if you look at next documentation a lot of times they have slug for this value but for the context of what we're doing i'm going to make this doc and then again this is basically going to create a dynamic route let me collapse that and of course i have some starter code that i'll just post right in i added this transition in here it's pretty cool i kind of like it so when you click from page to page to page it has this nice kind of ease in ease out effect which gives it a nice delightful feeling all right so below the transition let's call in the data from the pages and what that's going to look like is we're going to have an async function it's going to put in async and then async data okay and then within the curly brackets we're going to add a dollar sign content it's going to call some of the nux content functionality and then also we're going to call params looks like i forgot a c right there okay so let's add a const doc equals then we're going to await dollar sign so we created that documentation directory that subdirectory within the main content directory we'll want to make sure that we're checking within that documentation directory documentation and then the page that we're going to pull from it is going to be params dot dot so basically the uri is gonna match the file name do that match and then pull in that data and then let's fetch that data and then we'll return doc and what we're going to return that to is up within the template section within this div there is a component called nux content and that's going to expect a document to be passed along to it so we'll do the colon document equals and then dot and then we'll close that up okay so this should when i go to the particular url pull in the documentation that we have within that doc example markdown file that we created but let's now create a link to that from our table of contents so that's under docs contents let's change this link one right here to call that first example file so the example file is dock dash example so we'll just type that same value in here doc dash example cool let's save this out and look at our browser and see if we did good hopefully we did all right so let's click on link one well it looks like we mess up somewhere so it looks like there's a variable dollar sign that we need to track down and i'm guessing it's going to be under underscore.view and of course right here i forgot to actually add in content okay let's save this out and then go back and take a look all right just refresh the page okay cool so we see that it's pulling in the data from that markdown file albeit it's not the prettiest thing in the world and you can see that nothing's really all that formatted and it's also hugging the top of the page but the good news is that we could fix this pretty easily and i'll show you how to do that in the next video

Channel: Cleavr

Views: 348

Rating: 5 out of 5

Keywords: vuejs, nuxtjs, nodejs, markdown, documentation, cleavr, webdev

Id: J1FxKBu3F14

Length: 8min 25sec (505 seconds)

Published: Wed Jan 06 2021