A project name is fine, JavaScript, I'm going to stick with npm. And I would usually use Tailwind CSS, but I'm not going to do any styling for this video. Maybe I will do one in a future video. And let's install Axios. And I'm not going to install any linting tools for this video, no testing, universal is fine. And let's say static for our project. And let's add a js-config. Okay, so let's go into that folder. And let's run npm run dev to see what we have. Actually, let me open it up in my code editor first.

And let's run npm run dev to see what we have. Actually, let me open it up in my code editor first. And now I'll run npm run dev. Okay, so there is our default page. And let's take a look at the structure here. So one of the most liked features in Nuxt is the implicit routing. So if you just add a new file here, anywhere in the pages directory, then you will get a new route for that. So right now we have this default index page, which you just saw. So let's go ahead and add an about page, about.view.

So right now we have this default index page, which you just saw. So let's go ahead and add an about.view. And let's just give it a template, say, about page. And now we should have an about route. So that should have reloaded. Let's say about. And there it is. Now, you can also do the same if you want to make a folder and have an index.view inside of that. So we can do that as well.

of that. So we can do that as well. So let's say we want to make a contact page, say contact/index.blade.php. And this should work as well. So template, say div contact page. And this should work as well. So say contact. And there's the contact page. Now it does come with a default layout, which is in the layouts folder here. And you see it here called default.blade.php.

Now it does come with a default layout, which is in the layouts folder here. And you see it here called default.view. And just to show you that it's extending this layout, let me just add this here, default layout. And you'll see that in our pages here. So for every page, since it's extending that layout by default, you'll see that. So if you want to make a new layout, we can easily do that. So let me just remove this. Let's add a new layout. Let's call it main.view.

Let's add a new layout. Let's call it main.view. And let me just grab the template here. I just want to grab the slot that it's using. And let's paste it in here. And let's say new layout here. So to make use of that layout, say we want to make use of that in the about page, we just have to specify a layout key here. So let me say script, export, default. And let's just say layout.

So let me say script, export, default. And let's just say layout. And I named it main. And now this should extend from that main layout for the about page. So let's go to the about page. And there's a new layout. Cool. So let me just put that back. And now let's go to the default layout. And let's make a navigation here.

And now let's go to the default layout. And let's make a navigation here. So that's going to go before the slotted content. And let's just make nav items for the three pages we have. So <ul>, <li> times three, <a>. Okay. And just say home. And we have an about page. And we have a contact page. Okay. And this should work.

So I'll make a script section, export default, and let's make sure to import that. Actually, let me just make it first. So there is a components folder here. We can put it in there and say new file mainNavigation.vue template, paste that in. Okay. We can save that. And let's import that here. So import. Actually, you know what? I think you don't even have to import it.

Now let's take a look at using Markdown within our static site here. So for that, I'm going to make use of this Nuxt content module, which allows us to pull data from a variety of sources. So we're just going to be taking a look at Markdown here. So let's go ahead and install it. So I'm going to use npm and it's installed this content module. So I'm going to stop my server and install it. Okay. And while that's going, let's add it to our modules section in our nuxt.config.js. So say nuxt.config.js.

And while that's going, let's add it to our modules section in our nuxt.config.js. So say nuxt.config.js. And so for modules and I'm going to put it right under axios. Okay. Let me restart my dev server. Okay. Now we have to decide where we want the Markdown content to live. So in this case, I'm just going to make a typical blog with posts and I want that to live in a /posts route slash the name of the post like this. So this part of the route is going to be dynamic based on the file name of the Markdown file.

live in a posts route slash the name of the post like this. So this part of the route is going to be dynamic based on the file name of the Markdown file. So what we have to do is make a dynamic route in Nuxt. So to do that, let's go ahead and make a posts folder. And then within that, we want to make a _slug.vue file. Let's do that. Let's make a posts folder. Sorry. Posts like this. And then the dynamic route, which responds to anything after the posts URL, be slug.vue.

Posts like this. And then the dynamic route, which responds to anything after the posts URL, be slug.view. Okay. And let's scaffold this out. And let me just show you that it works post template here. So now any route that goes after the posts. So this should work. So there you go. I've just added a random string here.

So there you go. I've just added a random string here. The file doesn't exist yet, but it does respond accordingly. So let's go ahead and make our Markdown files. So for this content module, we have to make a new folder called content and our Markdown files will live in there. So let's do that. Actually, it doesn't go in there. It goes in the root folder in Nuxt. So let's just say a new file here or a new folder called content.

It goes in the root folder in Nuxt. So let's just say a new file here or a new folder called content. Okay. And let me just make a new file here called, I'll make two posts here. Let's call it my-first-post.md and it's going to paste some Markdown in here. And also supports YAML front matter variables. And let me just remove this. I'll show you that in a second. And I'm going to go ahead and make a second one, too. Okay.

And I'm going to go ahead and make a second one, too. Okay. So I made another Post here. And now what we want to do is load these Markdown files into our slug dynamic route here. So to do that, we have to make use of the async data method in Nuxt. So in Nuxt, this is where you define your data if you want to live on the server. And let me just make sure I type it correctly. But you don't have to worry too much about that for static sites. Let's make it async as well. And let me just destructure some params we need.

Let's make it async as well. And let me just destructure some params we need. We need to make use of this content plugin we're using and we need the params. Okay. And similar to how you would fetch data from an external API, we can fetch data from our file system here, more specifically from our content folder. So let's make a variable called post in Markdown. And we're going to await. Now we're going to call the content function, and params.slug is just the slug or the URL.

Now we're going to call the content function, and this is what's going to load our Markdown files and params.slug is just the slug or the URL. So in this case, it's going to be 01, my first post. And you can even separate the content into more folders if you wanted to. And then you can pass in a param here, which is the name of the folder. But in our case, we only have one level. So params.slug should load the Markdown files. And then we're going to call .fetch. And you can even catch errors here if you want. So I'm going to do that and just console.log the error.

And you can even catch errors here if you want. So I'm going to do that and just console.log the error. Okay. And now we just want to return the post in Markdown. So now we can make use of this post in Markdown in our template. So before I do that, just to make it clear, let me console.log post in Markdown. And to make sure I'm doing everything correctly, open up DevTools. Okay, so we get an object here. And as you can see, it has all the variables for this file. So it has the author, the title, and the rendered Markdown in HTML as well, which is what we

And as you can see, it has all the variables for this file. So it has the author, the title, and the rendered Markdown in HTML as well, which is what we need to render our post. So let's go ahead and make use of that in the template. So let me just get rid of this. And up here, we want to put an H2 for the title. So we have post in Markdown.title, let's put the author as well. So let's say post in Markdown.author, say buy here. And to render the content, we have to make use of this next content component, give it the document as a prop, and then just put post in Markdown here.

And to render the content, we have to make use of this next content component, give it the document as a prop, and then just put post in Markdown here. And that should work. Hopefully everything renders out correctly. And it looks like it does. Cool. Let's check out the second post. Sorry, my second post. Cool. So yeah, everything is working as expected.

Cool. So yeah, everything is working as expected. So now let's make a blog page that lists out all our Posts. And then we can click on that and go to the specific blog post. So in our posts folder, let's make a new file called index.view. And let's scaffold this out. And let's just say index page for Posts. And let's add this to our navigation. So this will go to posts. And let's name it blog.

So this will go to posts. And let's name it blog. Okay, let's see if this works. There's our blog. Okay, so now we just have to grab the posts. So let's do that. Back to our index. So let's make a new piece of state to hold our posts. So say data, return an object, and say posts, let's make it null by default. And to load our posts, again, we can make use of the content method, similar to how

So say data, return an object, and say posts, let's make it null by default. And to load our posts, again, we can make use of the content method, similar to how we did for the single post. So let's say async fetch. And let's say this.posts equals await this.content. And like I said earlier, since everything is just within the content folder, we don't have to put a parameter in here. And we can just call .fetch. And hopefully this should work. So I'll look in Vue DevTools to see if the posts variable is being populated.

And hopefully this should work. So I'll look in Vue DevTools to see if the posts variable is being populated. So let's check out Vue DevTools here. So where is it? In here. Okay, so there is our posts array, and it looks like it is populating. Cool. So now we just have to loop over that and display it as a link. So let's just put it in here, ul list item, and this is going to be the loop. So v-for, and I'm going to say post.

So let's just put it in here, ul list item, and this is going to be the loop. So v-for, and I'm going to say post. And I'm going to grab the index too, because I'm going to make that the key. Say in posts, key is index. And now we can just link to the appropriate blog post. Let's make a link. And say post.title. And for the link, we can bind that and say post.slug. So that's going to be, let me get a template string, say /posts, or we can do nox link as well.

So that's going to be, let me get a template string, say /posts, or we can do nox link as well. Yeah, let's do nox link. Say to post /slug, and it should be post slug. Okay, did I do that correctly? Looks like I did. Let me put the title back. So let's put an h3 here. Posts. Okay, and it is listing out all of our posts.

Posts. Okay, and it is listing out all of our posts. There's the first post, and there's the second post. Cool. Okay, so another cool feature of this content module is the ability to use view components within your markdown. So this can be quite helpful if you want to demo an actual view component within markdown. So if you see here, there is one caveat, we have to add this setting in our nox config to make it work. So we just have to add contentLiveEdit false in our nox config.

to make it work. So we just have to add content live edit false in our nox config. So let's do that. Let's go to our config, and let's put it down here underneath modules. Okay, and let's save that. And it also says we have to define our components using kebab case, and you also have to close it. You can't self close it. So in my first Post, I want to add a View component in here. So I'll put it right here.

So in my first Post, I want to add a view component in here. So I'll put it right here. And if you look in our components directory, we already have this Logo component. So let's use that. Let's say Logo, Logo. But you also have to import it from this component here. So let's import it here. Import Logo from components/Logo, and let's just say components/Logo, okay. So if I did everything correctly, this Logo component should render in our first BlogPost here.

So if I did everything correctly, this Logo component should render in our first blog post here. And I have to restart my dev server. And it looks like I have an error here, what did I do wrong? Just forgot a comma here. So let's restart our dev server. Let's go to my first blog post. And there is the logo there. So view components work nicely within your markdown files. Okay, now I want to quickly style the rendered markdown here.

So view components work nicely within your markdown files. Okay, now I want to quickly style the rendered markdown here. So I'm going to make use of this package here, which styles it similar to GitHub. So let's make use of this. I'm going to use npm this time. So I'm going to stop this. And let's go ahead and install that. And we have to import the CSS there, the CSS that comes with this package. And we also have to add these default styles. And then we have to wrap our markdown in a markdown-body class.

And we also have to add these default styles. And then we have to wrap our markdown in a markdown body class. So let's do that. So let's add that CSS within our slug file here. Let's paste that in. And then let's import our CSS. So that's going to go in here. So we can just import it directly from the node_modules folder. So GitHub markdown CSS. And the file is called GitHub markdown.css.

So GitHub markdown.css. And now I just have to wrap this in a markdown body class. Okay, let me save that, run my dev server again and see if this works. Okay, so I'm in my blog post. And it looks like it did render the CSS for that markdown. So let me look at the other blog post. Cool. Okay, so our beautiful static site is done. And as with all other static sites, you just have to run a command to generate the assets.

Okay, so our beautiful static site is done. And as with all other static sites, you just have to run a command to generate the assets. And you can host it on any popular static site host, like Netlify or Vercel, or any host for that matter. So let's do that. So the command to generate your static site is generate. So we can just run npm run generate. And this should generate our static site for us. Okay, and as you see, it generated a dist folder here. And this is the folder you would deploy to your static site host.

Okay, and as you see, it generated a dist folder here. And this is the folder you would deploy to your static site host. So as you see in here, we have all the files. So just a quick test. I'm going to run a server here, just a local php server, just to make sure that it looks the same as our dev server. And it looks like it does contact our blog page with our blog posts. And everything looks good. So there you have it. If you need a static site and like using Vue, definitely check out the static site capabilities.