Let's start working on our blog app and get our front end in place. We'll add our pages and layouts, do some light styling with Tailwind CSS, and maybe add some reusable components. Let's start off by installing Tailwind. So Tailwind does have documentation on how to install it within a Nuxt app, but it's for Nuxt 2. So I'm going to use this repo instead, which has instructions on how to install Tailwind within a Nuxt 3 app. So let's follow the instructions here. I've already created a blank Nuxt 3 app with Nuxty.

Next we have to add these files within the content array of our tailwind.config.js. So let's do that. tailwind.config.js. Let's add that to content, okay. And I get some warnings in the console when I add this file, this nuxt.config.js. So I'm just going to remove that. Okay, next. Let's make a new file within the assets/css folder named tailwind.css, and we'll add this to it. So a new file, assets/css/tailwind.css, okay, paste that in.

to it. So a new file, assets/css/Tailwind.css, okay, paste that in. Let's save that. Next we have to open up our nuxt.config and add all of this. So let's do that. nuxt.config. Let's paste that in here. Let's save that. And I think that should be it. It says to remove the default App.vue and make a new page within pages/index.

And I think that should be it. It says to remove the default app.view and make a new page within pages/index.view. So let's go ahead and do that. Let's just grab this to make sure Tailwind is working. Let's remove this. And let's add a new file, pages/index.view. And let's paste this in. Okay, let's save that. Let's run our server again, npm run dev. And let's make sure this is working, or let's make sure Tailwind is working.

Let's run our server again, npm run dev. And let's make sure this is working, or let's make sure Tailwind is working. Okay, so it is. Let's create a default layout, which all pages will make use of. So we need to make a layouts folder and name one called default.blade.php. Okay, let's add a new template. And let me just add some styling here. So we'll have a bg-gray-100, min-h-screen, and text-gray-900. And I spelled template wrong, that's why it's not highlighting correctly. And let me make a nav within here, which will have a few of our pages that we'll create.

link to the homepage. And for now, let's just say logo in here, and the next flex-item will have a few of our page links. So let's make it an unordered list, let's make it flex as well. And let's give it some space in between each item, so space-x-12 is what I have, and each one of these will have a list-item, and each one will have a next-link as well, okay? And let's say home, about, you gotta change the link to, and contact. Okay, let's see how this looks. Maybe I'm also gonna add a .prettierrc file, or prettier config, so it automatically reformats my code, so let's say .prettierrc, and I have a snippet here that automatically adds some

Maybe I'm also gonna add a prettier file, or prettier config, so it automatically reformats my code, so let's say .prettierrc, and I have a snippet here that automatically adds some rules, and I'm gonna add one more here for semicolons, and I want that off, since I'm using view here, okay? And now, our code should be formatted as we save. Cool. Let's check this out in the browser, hopefully it looks decent, and it looks pretty good. Let's make sure to add our slot here, so the page content actually shows. So after this div here, or after the nav actually, we can add a slot here, okay? And that should add the index page, cool.

So after this div here, or after the nav actually, we can add a slot here, okay? And that should add the index page, cool. So let me just add some generic content for the index now. So back to index here, you can get rid of this, let's make it a container, mx-auto, say width, 1/2, and let's give it some padding on the top and bottom, and let's just add some text here, okay? And I'm just gonna add an about and contact page, which pretty much has the same thing. So let's duplicate this, say about, and same thing for contact, just to make sure our links are working. So this one is contact, this one is about, and let's make sure our links are working.

are working. So this one is contact, this one is about, and let's make sure our links are working. About, contact, okay. So ViewRouter adds a class on the link that you're currently on, so if I were to inspect this, you'll see that it has a class of RouterLinkActive, so we can style the active link. So let's do that on the layout page, so default, let's add a style down here, and let's say .RouterLinkActive, and we'll just make it bold, font-weight, bold. And that's fine for now. Now you can see contact, about, and home is bold when we're on the page. Let's make one more page here for the actual blog post when we click on it, so that needs

Now you can see contact, about, and home is bold when we're on the page. Let's make one more page here for the actual blog post when we click on it, so that needs to be a dynamic page. So let me just grab the content from here, let's make a new file in here within a pages folder, index.view, we'll paste that in, and for now we'll just add the route.params.id in here, oh sorry, it's not index, it's [id], so let's rename that, [id], okay, and we can output the id for now, say, route.params.id, okay, sorry I meant to name this posts, not pages, let's rename that as well, posts, so now we should be able to go to, actually we have to restart our server, and we should be able to go to post/id, and I have to make sure to save it here, and there it is.

be able to go to, actually we have to restart our server, and we should be able to go to post/{id}, and I have to make sure to save it here, and there it is. So I also want to add a title for each of these pages, so let's go ahead and do that. So let's start with the default page here, which all pages will make use of, and let's add a script setup here, script setup, okay, and let's just make a variable for now named title, and let's put the title in here, so say nextThreeBlock, and we can make use of the meta tags anywhere in here, so let's just put it here, and let's say title, okay, and now every page should be this title here, okay, and it is, but I sort of want each page to have its own title, for example, on about, I want it to be named about, and then nextThreeBlock, and same for contact, and same for the actual blog post page, so in NUXT 2

to have its own title, for example, on about, I want it to be named about, and then next three block, and same for contact, and same for the actual blog post page, so in NUX 2 there was a global variable within the NUX config, which made it easy to have dynamic titles, but in NUX 3 we don't have that, so instead I'm going to make use of the useState composable, so if you take a look at the documentation, you'll see we have this useState composable, which allows us to share state across components, so let's make use of this, so we can say useState, again it's auto imported, and the first param is a key, so in this case title, and the second param is a callback, and then we'll just have NUX 3 blog here, okay, so that should be the same, you can see our title is still the same, okay, but now we can make use of this in any of our other pages to make our titles dynamic, so say for example on the

be the same, you can see our title is still the same, okay, but now we can make use of this in any of our other pages to make our titles dynamic, so say for example on the about page, let's also make a script setup here, and we can grab that title from the useState composable, so say const title = useState, and now we just have to provide the key, and now we can give it whatever title we want, so we can say title, we can say about, and then the title here, okay, let's save this, see if about shows in the title here, and it does, cool, so we can do the same for each page, so I'll just do that behind the scenes, okay, now let's add some styles for showing the posts on the main page here, so let's go back to index, and let's add some classes here, so I'm going to say divide-y for lines in between each post item, say space-y-8 for some space between them,

let's go back to index, and let's add some classes here, so I'm going to say divide-y for lines in between each post item, say space-y-8 for some space between them, and let's also add a color for the line, so divide-gray-300 is what I have, and for each post item, I have extracted to a component here called PostItem, so let's say PostItem, and for now we'll just show 10 of them, so we'll have a v-for equals say n in 10, and the key will be key equals n, and we'll close that out, let's go ahead and make a PostItem component, so new file, components/PostItem.vue, and let's make a template here, and let's just make sure that it works, so let's save this, let's save this, let's see if there's 10 items here, and there is, cool, let's go ahead and add some styles for that, so into PostItem, let's just say post-container, and let's give it some padding, py-8,

10 items here, and there is, cool, let's go ahead and add some styles for that, so into postItem, let's just say postContainer, and let's give it some padding, py-8, okay, this will be the title here, so h3, actually let's say h3.text-bold, and let's just say title of post, next I have some information about the post, like the date and the author, so I have a section called postItem, or sorry, postMeta, text-gray-700, flex items-center, and some space in between them, so space-x-2 is what I have, okay, and the first flex item will be the date, so let me just put something in here, next flex item will just have a ., so say ·, and the last one will have the author's name, so let's just put my name in here, okay, so after this will be the actual content, or the preview of the content, so let's say postPreview,

one will have the author's name, so let's just put my name in here, okay, so after this will be the actual content, or the preview of the content, so let's say postPreview, I have some letting in here, so letting relaxed, and I have a marginTop of 4, and let's just put some dummy text in here, and underneath this I have a button, so let's just say empty for the container, and this will link to the actual blog post, so it's going to be a NuxtLink, it's going to go to, let's just hard code it for now, so /posts/1, let's make it a template string actually, and let's give it some classes here, so class equals pg-blue-700, let's give it a hover, pg-blue-800, text-white, rounded, inline-block, px-4, and py-2 is what I have, so again just a button here, and let's just say readMore, and I actually want the title to be a link as well,

let's wrap this in a div as well, I think I need a postPreview, or postContent I guess for this case, and let's see how that looks, and let's just add a margin top on that as well, okay, I think that's good enough for now, we've added some pages and some layouts for our blog application, we added titles as our meta tags, and we styled our app using Tailwind CSS, so just like always, I'll try to make commits after each episode here, let's go ahead and do that now, git add, git commit, and let's just say setup front end,