In this lesson, let's start creating the pages for our individual projects, just like we have in the mockup here. To do that, we should create a new content type in StoryBlock. Content types allow you to create templates for your stories. And remember, you've actually already seen content types in action, because Page is a content type.
But now we'll get to create our own custom content type that has its own custom fields. So just like creating a nestable block like our hero component, I'll come up here and click new block. I'll give it a name. We'll just call it projects.
And this time I'll choose content type block instead of nested block and hit add block. Our project should contain several different fields. The first one we'll call name and leave it as a simple text field. This will correspond to the heading on the project page here in the mockup.
Plus, it looks like we'll also need an image and a description. So here I'll create the image field and it, and also the description field and add it. Now let's come in here and edit image to be an image. So type is no longer text, it should be asset.
And down here we'll limit that to images. just like we did for the hero earlier. And for the description, we'll change that from a text field to a text area, so we have a little bit more room to work. Now there's also a rich text field, which looks pretty cool, but we're going to keep things simple and just use the text area.
And save that. Great. Now that we've got the content type set up for projects, let's create a folder for all of our actual project stories to live in. I'll do that over here under Content, and then Create New.
And here we'll choose Folder. The name that I want to give to this folder is Projects. We'll choose an existing content type since we already created it. Here we'll find Projects.
And I'll also choose Deny Changing Content Type here, just so all of our projects always stay projects. And then I'll hit Create. Great. Now if we nest down into the projects directory here we can create an actual project story.
So up here in the right hand corner I'll click create new story and let's give the story a name. Let's say we've got a project called the Toast Maker. It's a project that we worked on and it makes some really awesome toast for us. All right so I'll create that And then over on the right hand side, you can see that we have these fields available that we just created on the project's content type.
Very nice. So now let's just give it a name. We can say maybe toast maker 3000. And I just so happen to have an image of some toast laying around.
So I'll upload that real quick. And then for our description, let's just say something like makes toast that tastes great. and never burns. Perhaps you'd use your portfolio for maybe some of your web projects, but me, I like my breakfast foods.
Lastly, I'll hit publish. All right, so that's great and all, but we still have the preview on the left hand side showing our home page. Obviously, that's not what we want. So let's start hooking up our Nuxt project and make it support this new project page.
The first step to supporting multiple pages in Nuxt is to create a pages directory. So back over in Visual Studio Code, I'll come over here and make that. Great. Now in Nuxt, we use what's known as file-based routing.
So the way we name our files inside of this pages directory is going to determine what our routes look like. The home route or the route route. view file inside of this pages directory. Okay?
view into that home page. view, I'll use the next page component in order to display the appropriate page. You can kind of think of this component as the router view component, but for next. All right.
Now, back over in the browser, we should actually see a 404 page, since our projects page doesn't exist yet in the code base. And yeah, that's exactly what we get. If we go back to the home page, we should be able to see our actual home page. Oh, but instead we get a 404.
Sometimes this happens with Nux 3, you just really need to restart your dev server. So let me come back over to Visual Studio Code and open up my terminal, and I'll restart the server here. Great. There's the home page.
And if I go back to projects, the toast maker, yeah, we've got our 404. So now I want to support this route slash projects slash whatever the particular project slug is in the actual next project. So under pages, I'll create a folder called projects. view.
However, I'm going to do something a little bit special here, and that is wrap slug in square brackets. This informs Nuxt that slug is a dynamic parameter, and its actual value can be anything and all. Let's just throw some static content in here now to ensure this new page is working. Still a 404 here, but the server probably needs one more restart.
And that should do it. Great. Next, let's use the useStoryBlock composable again to fetch the proper content. I'll create a script setup section, create a variable called story, and await the result of useStoryBlock.
The question this time, though, is what do we provide here for the path? We no longer want the home path like on our homepage. Instead, this time we'll use projects. as that is the directory that our content lives in, slash whatever the slug of that particular project is.
Since this part is variable, we can get it from the route params. And lastly, we need to use route in order to be able to access the route. Awesome. Let's print that onto the page and see what we get.
Just like on the homepage, we've got this JSON data from StoryBlock. And once again, it includes a content property. This time there's no body though since we get directly into the fields that we set up for our projects. Awesome.
So this means we can use the story block component on our page just like before and then we'll just need to create a projects component just like we created the page component. So let's go ahead and do that. view. Save that and then over in the story block directory I'll create the new projects view component.
Let me also just paste the markup in here to save a little bit of time and then we can talk about it. So just like with every other component in the story block directory, we start out by accepting the block prompt. And in the template section, I've provided some markup with some classes that are just there for styling. But most importantly, you can see that we're using the block prompt to access all the data for our project.
We've got the name here. and the image down here and the description finally here. Let's see what that looks like now. I'll give the page a refresh and it doesn't look like it likes that.
Let's try restarting the Nux server one more time. Great, there we have it. In this lesson, let's start creating the pages for our individual projects, just like we have in the mockup here. To do that, we should create a new content type in StoryBlock.
Content types allow you to create templates for your stories. And remember, you've actually already seen content types in action, because Page is a content type. But now we'll get to create our own custom content type that has its own custom fields. So just like creating a nestable block like our hero component, I'll come up here and click new block.
I'll give it a name. We'll just call it projects. And this time I'll choose content type block instead of nested block and hit add block. Our project should contain several different fields.
The first one we'll call name and leave it as a simple text field. This will correspond to the heading on the project page here in the mockup. Plus, it looks like we'll also need an image and a description. So here I'll create the image field and it, and also the description field and add it.
Now let's come in here and edit image to be an image. So type is no longer text, it should be asset. And down here we'll limit that to images. just like we did for the hero earlier.
And for the description, we'll change that from a text field to a text area, so we have a little bit more room to work. Now there's also a rich text field, which looks pretty cool, but we're going to keep things simple and just use the text area. And save that. Great.
Now that we've got the content type set up for projects, let's create a folder for all of our actual project stories to live in. I'll do that over here under Content, and then Create New. And here we'll choose Folder. The name that I want to give to this folder is Projects.
We'll choose an existing content type since we already created it. Here we'll find Projects. And I'll also choose Deny Changing Content Type here, just so all of our projects always stay projects. And then I'll hit Create.
Great. Now if we nest down into the projects directory here we can create an actual project story. So up here in the right hand corner I'll click create new story and let's give the story a name. Let's say we've got a project called the Toast Maker.
It's a project that we worked on and it makes some really awesome toast for us. All right so I'll create that And then over on the right hand side, you can see that we have these fields available that we just created on the project's content type. Very nice. So now let's just give it a name.
We can say maybe toast maker 3000. And I just so happen to have an image of some toast laying around. So I'll upload that real quick. And then for our description, let's just say something like makes toast that tastes great.
and never burns. Perhaps you'd use your portfolio for maybe some of your web projects, but me, I like my breakfast foods. Lastly, I'll hit publish. All right, so that's great and all, but we still have the preview on the left hand side showing our home page.
Obviously, that's not what we want. So let's start hooking up our Nuxt project and make it support this new project page. The first step to supporting multiple pages in Nuxt is to create a pages directory. So back over in Visual Studio Code, I'll come over here and make that.
Great. Now in Nuxt, we use what's known as file-based routing. So the way we name our files inside of this pages directory is going to determine what our routes look like. The home route or the route route.
view file inside of this pages directory. Okay? view into that home page. view, I'll use the next page component in order to display the appropriate page.
You can kind of think of this component as the router view component, but for next. All right. Now, back over in the browser, we should actually see a 404 page, since our projects page doesn't exist yet in the code base. And yeah, that's exactly what we get.
If we go back to the home page, we should be able to see our actual home page. Oh, but instead we get a 404. Sometimes this happens with Nux 3, you just really need to restart your dev server. So let me come back over to Visual Studio Code and open up my terminal, and I'll restart the server here.
Great. There's the home page. And if I go back to projects, the toast maker, yeah, we've got our 404. So now I want to support this route slash projects slash whatever the particular project slug is in the actual next project.
So under pages, I'll create a folder called projects. view. However, I'm going to do something a little bit special here, and that is wrap slug in square brackets. This informs Nuxt that slug is a dynamic parameter, and its actual value can be anything and all.
Let's just throw some static content in here now to ensure this new page is working. Still a 404 here, but the server probably needs one more restart. And that should do it. Great.
Next, let's use the useStoryBlock composable again to fetch the proper content. I'll create a script setup section, create a variable called story, and await the result of useStoryBlock. The question this time, though, is what do we provide here for the path? We no longer want the home path like on our homepage.
Instead, this time we'll use projects. as that is the directory that our content lives in, slash whatever the slug of that particular project is. Since this part is variable, we can get it from the route params. And lastly, we need to use route in order to be able to access the route.
Awesome. Let's print that onto the page and see what we get. Just like on the homepage, we've got this JSON data from StoryBlock. And once again, it includes a content property.
This time there's no body though since we get directly into the fields that we set up for our projects. Awesome. So this means we can use the story block component on our page just like before and then we'll just need to create a projects component just like we created the page component. So let's go ahead and do that.
view. Save that and then over in the story block directory I'll create the new projects view component. Let me also just paste the markup in here to save a little bit of time and then we can talk about it. So just like with every other component in the story block directory, we start out by accepting the block prompt.
And in the template section, I've provided some markup with some classes that are just there for styling. But most importantly, you can see that we're using the block prompt to access all the data for our project. We've got the name here. and the image down here and the description finally here.
Let's see what that looks like now. I'll give the page a refresh and it doesn't look like it likes that. Let's try restarting the Nux server one more time. Great, there we have it.