Nuxt 3 - Building a Complete Project

foreign hello everybody on YouTube I am super excited to announce that I have completely redone the nux 3 course that I have been selling on udemy so if you already bought this course you can go ahead and reap the benefits of the new and updated course for absolutely free it's just updated for you however if you haven't bought this course I'm gonna have a link in the description below with a promotion for the absolute cheapest price that I can set it for which is going to be 9.99 USD now in this course what are we going to be building well we're going to be building one project and it's gonna be one massive project that is going to be relatively complicated and it's going to involve a lot of the different features that nux 3 provides so we're going to learn quite a bit and we're going to take you from next three beginner to nux 3 expert believe me now enough of that what are we going to be building well this is what we're going to be building let's go right over here we're going to be building a website called car trader so this is a you can think of it as an auto trader clone where people can list their cars for sale on this website and other people can go ahead and contact them if they are interested in this car so let's go ahead and give you a quick little tour of this website so this is the home page over here and let's say I'm interested in cars in Austin so I'm gonna go and say Austin and I'm going to search so the first thing it's going to do is it's going to navigate us to a different page so I'm going to show you how we can have different pages within nux3 and how the system works there and now you can see all of the different listings we can favorite a car if we like it and if I don't like it of course I cannot favorite it favorite it and then I'll favorite it and this favorite actually persists upon refresh now of course let's just go ahead and remove that for now now we can also add more filters so maybe I don't want to filter by location or maybe I don't want to filter by Austin maybe I want to filter by Toronto I can go ahead and see all of the cars that exist in Toronto now let's go back to Austin because we have two cars in here which is nice and over here maybe I want to filter by a specific make so maybe I want uh Genesis I don't want a BMW or you know I found the BMW so I'll just say BMW and there we go so now we can filter by the make you can also filter by the Min and Max price now of course I could have added more filters but that's just going to take more and more time and at the end of the day this is really working in the exact same way so that's what we have here actually let's go back to Austin and let's go back to this page and there we go so now what we can do is let's say I'm really interested in a car I'm interested in this one over here I can go ahead and click on it to see more information about it so it redirects us to a different page so I'm looking at the car I really like it I think it's you know reasonably priced so maybe what I can do here is I want to send the person a message so I'm going to say hey my name is I'm gonna change my name here I'll just say my name is Jake Jake Paul whatever and we'll say Jake at Hotmail .com I must give them a phone number just give them like this random gibberish phone number say I am interested in this car and I want to buy it please contact me so we're gonna go ahead and actually send this off and if when I click on this you can see we got this nice error or nice message saying that the message was indeed sent and what's really nice about this is we're utilizing the nux 3 server to create our own server with multiple different endpoints so all this data is coming from our server and our server is hitting a postgres database to go ahead and actually send that data back so it's a complete application we're going to learn exactly how we can do that all right so this is what we have here and we have sent the message now also another nice thing that we have added here is let's say we decide to put in some gibberish like an email that's not really an email we get an error message so we have some uh validation on the server side now let's say the person that has created this listing they can actually go onto their profile page so we have some form of authentication and I'll show you that in a bit but now the person can look at all of their different listings so it just so happens that all of the cars that we've seen thus far have been created by me and I can go over here I can say I can view all of the different messages and I can see oh Jake Paul's interested in my car I'm going to go ahead and give them a call or give him an email so we can see all of this uh all of this data is being persisted another thing I can also do is I can delete a listing so there we go we have completely deleted this listing and this is going to delete it from our database and if I were to go back over here if I were to go to Austin for example now we should only see one listing we do not see two and let's say I made a mistake I actually want to add that right back well we can create a listing so I'm going to create a BMW M5 2019 we'll say the price is a hundred thousand we'll say miles is zero we'll say the city is also Austin and we'll add this we'll add the number of seats to be five say this is a cool car that you should buy and I like it whatever we can also add an image so we're going to learn how we can handle images and save them within our server so I'm going to go over here I'm going to add this image we get this nice little preview click submit and then it redirects us back to this page and if I were to go back over here you can see now it is nice and listed so we have this listing right over here now because we have this profile page we actually have authentication so let's say I went to my profile page and the profile page is this endpoint right over here or sorry this uh this route so slash profile listing but let's say I go ahead and log out so when I log out it redirects me now let's say I want to go back to that profile page you can see what we have is Route protection so if you're not authenticated you can't go to certain pages and what it allows us to do is it forces us to go to this login page where we can log in with Google so we're going to learn how we can implement this oauth Authentication in and we can go ahead and just log in here and now we're completely logged in and we can go back to the profile page so you can see that this is a complete complete application and it is incredible and you're going to learn so so much about nux3 now I'm going to post the first two sections here on YouTube Just so you can get a feel of it see if you like it or not but all of the other sections and this is a 12 to 15 hour course all the other sections are going to be on udemy again the description is going to be below if you haven't purchased it if you have purchased it just go ahead and enjoy it for free now because there's a lot of different templates that we have to use here we have to build a lot of UI just so we can skip over that I'm also going to link a GitHub starter project so go ahead and install that it's just a starter with just the HTML and we're using Tailwind for the Styles so you don't have to worry about that we can just dive into nux anyways that's it I hope you guys enjoy and I'll see you in the next one so whether you have built the UI elements with me or you have completely skipped that section and downloaded the source code you should have this code right over here opened up inside of a code editor so this right here is a typical nux application it is completely boilerplate and empty all that we have here is this HTML directory that contains three different HTML files that is going to contain all of our HTML as well as our CSS for all of the different pages and components within our application so now let's actually go ahead and start adding it within our nox application so let's go over here and do an npm install if you haven't done that already and you don't have your known modules and then do an npm run Dev inside of your terminal so go over here and do an npm run Dev in order to run your application now as soon as you run your application you can see here that it tells you the ports that it's going to listen on now I already have Port 3000 being used so for me it actually allocated 3002 however for you it will probably be three thousand if it is indeed not used nonetheless you can just go over here and figure out exactly what it is so now what you can do is you can go to localhost 3000 and two for me and you can see here that there's a completely empty page now what we want to do is we want to add to multiple Pages within our application because you can see here if I were to go to the home page you can see that we have this home page right over here if I go ahead and search it takes me to this page and then if I go over here and let's say I click on this Porsche it takes me to another page so what we need to do is add routing within our nux application and we're going to begin very very simply with routing for the home page and this is going to have a very specific route of Slash so just the home pages as soon as we write the domain and we don't have any other paths we want to hit this home page right over here and show the nav bar as well as the car hero so that is exactly what we want to do so again once we go to localhost 3000 and then there's no other paths that is what we want to hit so let's actually go back to our nux application right over here and you can see within our nux application we only actually have one view file which is the app Dot View and I can go right over here and I can just say H1 and I can say hello like so and if I were to go back to my application and I were to zoom in a little bit you can see that we get hello which is nice okay so it seems that the home page we have to add all of our different components within this page right over here or this file right here but that's actually not the case so what happens if I go to let's say localhost 3002 slash cars for example if I were to enter this you can see I still get hello and if I were to go to another path slash whatever I still get this component and this app.view file so this app.view file is going to be a very temporary file that we're going to have and what it does is it just well it matches with all different routes it treats our application kind of like a single page application and it matches every single particular route and it's like we don't even have routing at all if we do want to add routing what we're going to do is not Define any code like we do in view but instead what we're going to do is add a folder a very specific folder in The Roots directory of our nox application and this folder is going to be called pages and it absolutely needs to be called Pages because nox is going to understand exactly what this folder is doing and is going to treat all of the different files within it very specifically so that it can add routing to our app so over here we're going to add pages and then what I'm going to do is I'm going to create a new file called index Dot View and this is actually going to be the new component that is going to be rendered whenever we go to the home page route so whenever we go to the home page which is just going to be the slash route we're going to render this index Dot View so let's go over here and I'm going to go ahead and just grab this template I'm going to go ahead and paste it in here and we're just going to have our typical hello so let's go back over here and let's just see what happens so now you can see right away that we're getting some sort of error and what I highly suggest you do is whenever we create something like this let's just close our our terminal and run back the nux again and so let's refresh this so as soon as I refresh you can see we're getting the loading State blah blah blah come on come on it's taking forever and there we go so you can see right away now when I go to this random route we're actually getting a 404 page which is pretty interesting so let's actually go over here now to uh localhost 3002 and now you can see that we have this hello whenever I go to again another path we get a 404 page so it seems as though that this file based routing is indeed working now one thing that we can actually do here is within the app.view what we can do is we can add a Nooks page component and this right here is going to be a very specific component that is going to detect exactly what view file it needs to render so this next page is going to figure out what path that we're in if we are on the slash path then it's going to go look at the Pages directory it's going to look for the index.view and it's going to go ahead and render this right over here so it's going to render this component opponent here and why this is nice is that now what we can do is we can add other things on top of it or below it so for example we can add a nav bar so we're going to say here nav and then over here we can add a footer so footer like so we can say footer like that so now we can have nav and then hello and then footer like so so we can actually kind of customize exactly what we have but for now we'll just leave it like this with the nux page so that's pretty much it but of course now we need to go ahead and actually populate our components or our our page with these components with this nav bar that's humongous and have to zoom out so you can actually see it well so the snapbar as well as this hero so let's do that in the next video in this video what I would like to do is populate this page with all of the necessary components like the navbar component as well as the hero so let's actually go over here and we're gonna have to actually start creating some of these components and let's begin with the nav bar which is going to be by far the simplest thing that we have thus far so I'm going to go ahead and create another directory and I'm going to call this directory components now the name of this is also extremely important because we're going to place all of our components in here and as soon as we place View files in here nox is actually going to know that they're components because they're inside of this directory right over here and it's going to do some special magic that we're going to see a little bit later so I want to go over here and I'm going to create a navbar dot view file and we actually already well wrote out the navbar HTML so if we go to the home page we can just go ahead and just grab this right over here so where over here you can see it starts at nav bar ends in navbar so just grab this HTML as well as CSS and then we're going to go over to our nav bar we're going to create a template and we're going to go ahead and just paste this in right over here so this is our navbar and now what I want to do is I actually want to use it within the index Dot View file so typically what we would do is we would actually Import in that navbar component so we would have some sort of script tag right over here we'll say script setup and we would just say very simply import navbar and then we can say from we'll move back a directory we'll go components and we'll just say nav bar and then right over here we can just go ahead and just render this navbar component so that's typically what we would do and you can see that this still works the cell is a viable solution however we actually do not need to do all of this inside of a nux application and that's because whenever we place something within the components directory Knox is going to understand that it is indeed a component and whenever we actually just go ahead and render that component within a page or another component it is going to go ahead and Auto Import for us so over here I can actually remove all this bloat and I can just go ahead and save this and it's going to be smart enough to basically well do this under the hood so we're going to go ahead and just save that and now just to prove to you that we still have our navbar tada we still have our nav bar this is pretty incredible and can make our code significantly cleaner all right so now let's actually go ahead and do the exact same thing but this time for the car hero so I'm gonna go ahead and create another uh another component and I'm going to call this car hero I'm going to say Car Hero Dot View and I am going to go over to where are we I'm gonna go over to the home page and I'm gonna grab this car hero so you can see here we have this comment here saying Car Hero we also have this end comment that also says Car Hero so we could just grab all of the HTML within that and just copy that and we can go over to Car Hero and we can go ahead and just create a template and just paste in all of that HTML and now very simply look at this I can just go here and just say Car Hero the exact same name of the file and then ta-da we get our car hero how cool is that now one thing that I actually also want to do is I want to separate this uh home search bar so if you go to our final or if we go to this version over here I actually want to separate this search bar into its own component because this search bar has quite a bit of functionality within itself and I would like to kind of isolate it so let's go ahead and do that that should be pretty easy I'm going to call this car search bar and we're going to say dot view and then over here I'm going to go ahead and just kind of cut everything within this So within this comments let's just go ahead and just cut everything out and we can also we'll cut this out a little bit later we're going to create a template and then over here and we're going to create that car search bar and now this time we're inside of the component not a page we can still treat it we can still basically do the exact same thing we can just say here now car search bar we can go ahead and just save that and if I were to go back to my application it still renders that search bar and if I were to of course comment it out just to prove to you let's go ahead and just comment this out you can see that it is gone Tada awesome all right so now we can just remove this we don't need that anymore so one thing that I also want to quickly note is that you can see here that within our component directory it seems that for at least for these two components here we have kind of a very similar naming structure so we have car and then hero car and then search bar and later on we're gonna have a lot of other components are going to follow that exact same naming structure like car card or car sidebar or whatever so one thing that's actually nice is that what we can do if we have this naming convention where we always start off with the exact same name and then we have other you know different names after it what we can do is we can actually create a directory called car within our components file or components folder and then over here you can actually remove the car from these files so we can just say instead of hero we can say or instead of car hero we can just say Hero Let's just skip these changes it's fine we can just go ahead and actually move that in here now so I'm going to go ahead and just move that in there and we're going to do the exact same thing here let's go ahead and just change that and we're going to move that in there and we're going to say okay and now this is actually going to behave the exact same way the names is actually going to be exactly the same it's still going to be Car Hero even though our file now is just hero and that's because what ends up happening in the component directory is if we want to specify a specific file that is nested we would have to append both names together so concat both names together so it'd be Car Hero and then car search bar that's pretty neat and if I were to go back here of course if I were to refresh everything is working a okay so now that we are completely done with the home page let us move on to the next page and that is going to be whenever we search for a particular City so let's say Ottawa in my case I'm gonna go ahead and click search it's going to take me to this page over here now this page is going to have the path of Slash city slash Ottawa slash car now the reason why Ottawa is in green is because this over here is going to be dynamic and is going to be dependent on whatever the user has decided to type so if they didn't type Ottawa instead they typed Toronto and we went ahead and looked at the route you can see now it's slash city slash Toronto slash car so you can see that this portion is always Dynamic and so we need to figure out a way to add this Dynamic path within our nux application now slash City and also slash car are going to be static they're always going to be the same now another thing that I also want to note is that whenever we actually go to the car page and then we change the make of the car so for example let's say I change the make to I don't know what's a nice car let's change it to Toyota it's also going to change the path of our application so it's going to end up looking something like this so slash city slash Ottawa slash car slash Toyota so this again is going to be dynamic it could be Toyota it could be Ferrari it could be Bentley it could be Hyundai however however it is also going to be optional so if you actually don't provide the make and we just have something like this we should also have the exact same page so whether we have the actual make as well or we don't have to make it is going to present us with the exact same page meaning that this is not only Dynamic it is also optional so we have to actually think about that when writing our rules now of course we're not going to write any code for this we're going to just create a bunch of files and folders so I'm going to go over here and within the Pages directory I'm going to create a bunch of other directories they're going to follow this path over here so for example I'm going to go over here and I'm going to create a directory actually let's just create a file for now and I'm going to call this city.view we're going to delete this later but just for demonstration purposes so I'm going to create this right over here city.view and I'm going to go to template div H1 and then City so go ahead and save that and now what ends up happening is if I go to my application and then I don't go to the uh Slash index route instead I go to the slash City route you can see that I get a 404 which I was not expecting and that's probably because I'm going to have to go ahead and just close this terminal down and open it up again and that's probably what you have to do most of the time whenever you change your pages route so the hot reloading is not very smart in that case let's just go ahead and just quickly do a little refresh here and there we go you can see now I actually have the city page so now of course I can go back to the home page and I can go back to the slash City page and I went to this page over here which doesn't exist so that's why we got this error but if I go back to just City on its own I go and I see this so you can see that this is where we're going to create all of our different routing rules it's within this Pages directory we're going to create a bunch of folders and files to specify those rules so what I want to do is I want to have something like this I want to have and let me get rid of this for now I want to have something like slash City and then I want this part to be dynamic so whatever the city is so typically we would Define that by doing something like this so slash City and then slash car and then I want to have the make but again I want this to be optional so how are we going to do that well let me go ahead and create another directory now and this time it's going to be a folder not a file a folder so I'm going to go over here and I'm going to say City and then I'm going to say or actually well we're going to say city in here we're going to create that one city folder and then within this city folder we're going to create another folder and that's going to Mark the actual City so whether it's Ottawa Toronto Los Angeles whatever now this is going to be a dynamic path so how do we specify something to be dynamic and not static like this over here well to specify something as Dynamic we wrap them in square braces so over here we're just going to say City and we're going to wrap it in square braces and city is just going to be the the variable name so over here now we got that so we got city slash the dynamic city and now what I want to do is I want to create well another folder this time it's going to be car and then at the very end this one's actually going to be a file so we can actually well create our HTML elements so right over here we're going to say file and this one's going to be make like so and it's going to be dynamic so we're going to say make Dot View like so however not only do we want it to be dynamic we want it to be optional now to make it Dynamic and optional very simply we wrap it with double double square braces like so so now we can go ahead and actually add that in and I'm going to go ahead and actually just remove this we do not need this anymore the city so right over here we actually added this path so I'm going to go over here I'm just going to say template div and I'm going to say City and make for now and uh let's go we might have to refresh our page so now we can see we're getting a 500. let me just go ahead and just refresh our terminal and now what we're going to do is we're going to go to slash City and then slash whatever doesn't matter what it is uh let's just put something a little bit reasonable like let's say Houston and then slash and then car and that should take us to this HTML template over here because again this portion right here is dynamic now we can also if we wanted to go to slash city slash Houston slash car slash Toyota and that should also take us to the exact same page so let's go ahead and give this a quick shot so we're going to go over here we can see we're getting a 404 page I'm going to go now to slash city slash Houston slash car and you can see we get city and make and now I'm going to go to slash city slash Houston slash car slash Toyota and [Music] ta-da we get the exact same thing all right so we have created that uh uh path we have created it so now what we actually need to do is start populating it with components so let's actually do that in the next video so now let's go ahead and actually start populating this with all of the components that we need so of course we first need the nav bar so let's go over to our file and we have already well created that nav bar component so we can just now very simply just say navbar so we can say nav bar like so and now we should see our nav bar and now what we need to do is all the other HTML elements for our component and what I'm going to do is I'm going to go to the cars.html you can see here where we have the car page I'm going to go ahead and just copy everything between the car page comments so let's go ahead and just copy that and we're going to go over here to make and we're going to go ahead and paste that in and there we go so now you can see we have this we only have one card for now but later on we'll render more now of course what I want to also do is separate a lot of these things into their own component so so let's begin with the car sidebar so over here let's just grab everything in between the car side sidebar and we're just gonna go ahead and just cut it out for now this is going to be this thing right over here and we're gonna go to uh we're gonna go over here we're gonna go inside of the components directory inside of car we're gonna create a sidebar Dot View file and we're going to say templates and we're going to go ahead and just paste that in there and then over here we're gonna call Car sidebar very simple Car Side Bar like so we can also remove these comments okay so that looks pretty good to me so I'm gonna go ahead and just save that and now we have we still have everything looking the same another thing that I do want to add now is two more components one for the car cards and then one for the car card the actual card itself so the car cars is actually going to be a one div uh component so let's go over here and let's go over here we're going to say cards so this is plural and then over here we'll also create another one which is going to be card singular all right so let's go over here for the cards it's just one div element right over here which is going to be V full so cards or just say template and then V full that's it and then for the cards we're gonna grab everything in here just grab all of that cut that out and let's just create a template and we're going to go ahead and paste that in there okay and then inside of the cards we're going to render that just one card for now so we're going to say car card like so and so now over here we can actually completely get rid of all of this and very simply just say car and then card and then save that and theoretically that should be it so you can see here that everything is working a-okay the last page that we need to work on is this page right over here so whenever I click on a particular car I get redirected to the car details page and this actually has a very unique path within itself and this is the path that it has so it's going to be slash car this part is static it's always going to be slash car but then it's going to be slash and then the name of the car in this case it's Porsche and then we have a dash that is always going to be there static and then also we're going to have another Dynamic ID so it's going to be the name of the car which is going to be dynamic a a static Dash and then a dynamic ID and that's all within the same exact route so I actually highly suggest that you just try to figure out how to out how to do this on your own and then um well proceed with this video so I'll give you a quick chance to pause the video go ahead and pause it I assume at this point you have paused it and tried so let's go ahead and show you exactly how to do it so we're going to go over here and now we're going to go to the Pages directory so remember the static part is going to be slash car so we're going to create a new folder called car and then within here it's going to be slash car and then slash that actual uh uh you know car and then Dash ID so over here what we're going to do is we're going to create a new file and to specify that this is going to be dynamic we're going to say Square braces name and then right after the square braces we're going to add a dash and we're going to add another set of square braces and that's going to be the ID Dot View and that's exactly how we do it very very simple stuff you can see how powerful and easy this is becoming so over here we can create a template and now let's actually go ahead and create everything it is that we need so we need the nav bar so let's go over here let's add the nav bar go ahead and save that and now I'm going to go to the car detail page and I'm just going to copy everything within here so let's just copy everything here and we'll separate them into components in a moment so let's go over here let's go to the card detail page go ahead and save that and let's see if this is working A-Okay now so I'm going to go to slash car and then slash and I'm going to say I'm going to say slash Toyota doesn't really matter and then slash Five and if I enter ta-da you can see we actually get the page so it does indeed work now let's go ahead and quickly separate them into their own separate components so let's go over here the car hero itself so we're gonna go ahead and grab this and uh uh let's go here actually where does this end it ends right here that should be okay sorry for the confusion there's a div right here that starts right here so this actually should be this should end right here so sorry for the confusion everybody and honestly I don't even think we need that div we can probably just remove it but we'll just leave it just for for the sake of leaving it so let's go ahead over here and we'll just grab this car hero and let's go over here and let's create another component now the issue is we already have a hero component so what we can do now is we can just say add another directory we can call this details so card detail and then over here we can just say hero.view and I'm going to go over here just add a template and add all of that HTML within there and then over here I can just say car and then it's detail and then hero and if I were to go ahead and render that and refresh you can see I still get the exact same thing and I believe I can probably get rid of this div as well as this so let's go ahead and do that let's go ahead and refresh yeah everything's looking good okay so now let's go to the attributes so uh let's go here we're gonna go ahead and cut that out and we're also going to put that in the details directory we're going to say attribute Dot View and let's create a template go ahead and create that and then over here we're going to say just right below this we're going to say car detail attributes attributes so now we can go ahead and get rid of these comments and now let's do the description as well so we're going to go here grab that description let's go back over here we'll say description Dot View go ahead and create we need a template for this so template paste that in there save that and of course the contact as well is the last thing that we need so let's grab that contact and let's go back up here we'll say contact Dot View templates and we'll say paste that in there all right so that's pretty much it so now we can just say car detail and we'll say description and then car detail contact there we go looking good looking good so we have pretty much created all of our different pages as well as the components for them we should be extremely happy at this point now that we have created all of our different pages I want to have the ability to navigate Within These Pages within the actual application itself and not have to well redirect to whatever page I want to go to so for example if I want to go to that slash city slash dynamic city name over here if I want to go to this page what I don't want to do is actually have to type that into the URL itself what I want to do is I want to just say Ottawa search and have it move me there itself another thing that I would like is to have this navbar be functional so whenever I click on this I would very much like it for it to go back to the home page so let's actually begin with the nav bar because that's that's actually the simplest thing that we can do right now so the nav bar very simply whenever we click on this I just wanted to go back to the slash route the home page and what we can do to do that is we can go to our navbar components so let's go to our navbar components right over here and what we can do here is we can actually make the href slash so we can make it slash href and now when I go over here you can see that it takes me back to this page however just like in view where when we ever add an href instead of adding a view link or a view a a router link instead of using that what it's going to do is it's going to refresh our page which is not that great so instead what we're going to do is we're going to use a built-in nux component called nux link so nux link right over here that's going to allow us to navigate across pages but not have to refresh our page every time and it does that with something called Universal rendering which we'll talk about a little bit later so we're going to change the href from not being href but instead to two and notice that we didn't have to import this in again this is something that was Auto imported so now if I go ahead and actually save this and let me go to another page now let's go to this page and then if I go over here you can see it got redirected back to this page which is terrific we got the nav bar working but now I want to get this search bar working over here and for this search bar we can't really use a nux link because we need to programmatically change the path so let's go to our search bar so let's go over here to car and we're going to go to search bar and over here this is where we're going to dynamically change the path itself so we're gonna go and we're going to have to utilize uh a script tag so we're going to say script we're going to say setup so script setup like so and how do we typically do this well we typically do this by first adding a v model so we can go over here we can add a v model we can call this city and then over here we can create a const city is equal to ref so we can actually store the value now notice we don't have to import ref in again this is something that is auto imported so that's the very first thing that we're going to do and then typically what we're going to do is we're going to go ahead and just say const and then we're going to get router from the use router composable and then what we're going to do is whenever we click this button right here let's go ahead and just say act click let's just say handle search let's create a function called handle search here so we can say const handle search and over here what we can very simply do is just say router so router dot push and then we can push in the path that we want so over here what is it the path that we want well we want to go to slash City and then in this case it's going to be slash City dot value and then over here we're going to say slash car now there's going to be no make so we're not going to add that part and that's pretty much actually all it is that we need to do to get that to work so if I were to say Ottawa in here and say search you can see that that does indeed work and take me to where I need to be okay so this is good however this actually isn't that necessary with nox so nux actually makes this a little bit simpler so instead of using the use router composable to go ahead and actually add this path instead we can actually kind of completely get rid of this used router composable and instead use the navigate to function that again is going to be Auto imported for us so I'm going to go ahead and just cut this out and just paste it right in here inside of the navigate 2 function and now I'm going to do just a quick little refresh here let's change this to uh let's change it to Los Angeles and if I go ahead and click search you can see now it has navigated me back to Los Angeles so that is great and that is amazing now there is one potential issue and this doesn't really relate to nox I can go ahead at this point and just search and it's going to take me to the slash City and let me just zoom in here slash city slash slash and then car and that's because the city is empty so one thing that we can also do just as a quick precaution is check if the city is indeed um is indeed not empty so what we can do here is we can say if the city dot value is empty then what we can do is we can return early and another thing that we can also do just so we can show some sort of user feedback is we can create another piece of state and I can just say City error and for now I'm going to say City error is false and over here I'm just going to say return City error dot value is equal to true and now what we can do here is we can go to this input over here we can add a dynamic class so we can say class and we can say if we have a city error then what we want to do is we want to render a border that is red so we can say here actually let's go to Tailwind just to just to show you exactly how we do this so we're going to go over here and we're going to just search for border and we're going to say border color for example and I want a a red border so let's just scroll all the way over here so kind of a border like this so this is the class that we're going to use which is going to be border red and 500. so border red 500 like so and also we need to add a border so I believe we also add this class over here and then we'll just say else then add nothing at all so let's go ahead and just quickly just see if that works let's go back home let's zoom out let's go to tur let's actually not add anything and there we go you can see we get this kind of red State I know it's kind of ugly right over here that's completely fine who cares but you can see that we actually get this red color which is amazing but now if I go to Toronto or whatever you can see now and if I go back everything is completely fine in this video what I want to do is focus in on this page right over here so right now the path is slash city slash Ottawa slash car now let's quickly talk about exactly which portion of this page is going to change the most whenever we change the path well this sidebar is going to change very very little it's still going to have the location to make the price but maybe these values are going to be different and they're just going to be extracted from the route itself so this is going to change very very little however it's going to be this portion that changes dramatically so if I change it from Ottawa to Toronto we're gonna have a bunch of different cars that exist in Toronto rather than Ottawa if I change it from Toyota to Volvo then we're only going to show Volvo cars so I think what we need to do is change our routing structure so that this portion and right over here that changes the most is actually going to be a nested route so let's let me go ahead and quickly try to explain this by well going through it so right over here we're going to go to our city and remember we have the city slash dynamic city slash car and then make now within this city directory I'm going to create another file and I'm going to call this car.view so car dot view like so and this is actually going to conflict with the card.view that we have over here because then this is going to be slash city slash well the dynamic city slash car and then and this should be and then over here we have the slash car dot view and then over here we also have slash city slash dynamic city and then slash car and we also have an optional make so it's going to conflict and we'll fix that confliction a little bit later so we're gonna add a template here and we're pretty much going to add exactly what we had but this time inside of this car dot view file so I'm going to go ahead and add the nav bar I'm going to add the div we're going to add the uh car uh car sidebar but now what we're gonna do so now what we're gonna do is right over here instead of actually rendering the car cards what we're gonna do is we're gonna render a Nooks page so a nux page like so and then over here within our make we're going to remove all of this stuff so we're going to remove the nav bar so let's remove the nav bar we're going to remove this let's remove that let's remove this we're going to literally keep we're going to remove everything except for the car card and maybe have a div right here so I have that diff so that's that's what we're gonna do and so what's gonna happen now is we're gonna go to It's Gonna render the car.view file and then we're gonna have this nux page and now any other path that we have in there so right now we're at the slash car and any other path over here that we have is going to actually render right here inside of this nux page so initially the root nox page is going to render all of our different pages but now any other path that is after car is going to be rendered in this nux page because we have this nested route now in this case we actually do have a slash car slash uh uh make which is dynamic and optional and so it's going to go ahead and render this So eventually we're going to actually achieve the exact same thing so let me just go ahead and prove this to you by doing a little quick refresh and Tada you can see we still have our make and we still have our car and just to kind of really make this as clear as possible I am going to go ahead and I'm going to remove this next page and now you can see that that component is completely gone so if I were to add it back it is back and now let me just go ahead and actually just rename this for now to like make but static and so now if I go to slash whatever it's not gonna know what that page is however if I go to slash make it's going to know what that page is and it's going to render that and if I go ahead and add another page now let's just say hello Dot View and I'm just going to say template div and then H1 hello whatever and now if I go to slash hello you can see I'm going to have to refresh the page here unfortunately or maybe refresh it I think it should work nope does not so let's go over here let's refresh the whole thing kind of unfortunate that it makes me refresh the whole time because I'm gonna have to delete those later but now I hope you guys can understand if I go to slash guard hello as it loads up we'll just play with a circle you can see now we get this over here so if I change this back to make we get that all right so I hope that is nice and clear so I'm going to go ahead and just delete this for now we do not need that so remove the trash and we're going to rename this back to what it was before so I hope you guys get the point of nested components foreign the last thing that I would like to do in this section is change the titles of each particular page so if you were to look at your tabs right now you can see we get this really ugly title localhost 3002 city slash Ottawa slash car slash make not a very pretty title and same over here you know nothing about this is pretty at all so I want to go ahead and actually change the titles and it is going to be remarkably easy to do with nux 3. so let's go over here and I'm gonna go to the uh let's go to right over here let's go to our very first page and I want to change the title so that as soon as you go to the home page it should say car trader so over here what we're gonna do is we're gonna create a script tag we're going to say setup and we're going to use a built-in nox composable called use head we're going to go ahead and invoke this and then we're going to pass in a bunch of options specifically we're going to pass in the title option and then over here we're going to say car Trader like so and that's actually all it is that we need to do so now if you look at your actual tab over here you can see that it says car trader rather than you know localhost 3000 so now let's go ahead and actually do the exact same thing over here so I'm going to go to Ottawa and I am going to search over here and we're not getting anything and there we go I'm not sure why that was happening let's go back here let's search Ottawa there we go so it was just a little uh glitch there I actually want to change this so that well what do we have over here so if I go to Toronto what I want it to have I wanted to say cars in Ottawa so cars in Ottawa that's what I wanted to say so let's go over here to that particular page which is going to be this page right here so we're going to go to this page and we're gonna go over here we're gonna say script setup and we're gonna go ahead and just say use head and we're gonna say title and this is going to be a dynamic title so we're going to say cars and then in and then Ottawa we're gonna grab it from the route so we're going to say const route is equal to use route like so and we're going to say cars in and then we're going to say route and to actually grab the city we're going to say slash params and then slash City because that's what we called it here City the the variable name and we're also going to capitalize this in case it's not capitalized we're going to say dot two and then we're going to say uh two okay so we can't necessarily there's no function to capitalize this so this is what we're going to do we're going to do this on the Fly here we're going to say JavaScript we're going to say JavaScript function to capitalize uh to capitalize we're just going to say that okay let's see if that works so we're going to go to stack overflow and all right this is going to capitalize all right so that's going to capitalize the first letter not really what I want here I wanted to capitalize everything so capitalize let's just say title convert string to title case with JavaScript all right so let's see here okay this looks like a good solution so we'll just say two title case just grab this function over here and I am going to just put this function right here and we're going to say we're just going to wrap this with two title case to title case I'm gonna go ahead and add that in there okay so now we should see if I were to go back here you see we get cars in Ottawa but I actually want to make this a little bit more Dynamic so if I actually add the make instead of having cars I want to say something like Buicks in Ottawa so if I add slash Buicks it should say Buicks in Ottawa so this actually is going to be pretty easy as well so we're just going to go over here and we're just gonna say dollar sign and this time we need to check if the route dot params. make is even there so if we have the make itself then what we want to do is we want to say to title case and actually pass in the route dot params. make else what we want to do is we'll just say cars just generic cars all right so that's pretty much all it is that we need to do so I'm just going to kind of uh let me zoom out of here a bit so you can really see that zoom out so you can kind of see the whole thing and actually if I save you can see it auto saved it so this is how it should look so now you can see it says cars in Ottawa but if I go to slash Buicks it says Buicks and Auto or Buick in Ottawa plural okay so this is great and now the last thing that I want to do is whenever I click on a particular um a particular car it should take me to the slash car and then slash whatever let's say it was Buick and then five so this is just going to be the actual name of the car itself so let's go over here and we're going to also use the use head for this so we'll just say script setup and we'll say use head and title and this one we're gonna say let's go ahead and just say const route is equal to use route and then over here we're just going to say the name of the car itself so it's just going to be route dot uh params Dot and uh prams Dot and then the actual name of the car which is the name now of course I'm going to want to uh title case this as well so what we're going to do is we're going to grab this function and we'll we'll think about we'll have a better way if actually putting this function in one place instead of having it in in just you know copying and pasting it throughout components but for now we'll just do that so we're going to go over here and we'll just title case this and now you can say Buick right over here okay so this is looking pretty pretty good and that actually includes the section on file base routing all right everybody Welcome to a brand new section and in this section we're gonna mainly focus in on cleaning up our code a little bit and what I'm going to do is I'm going to begin with looking into all of the different View files that pertain to our pages so let's go into our Pages directory and what I did is I opened up the index.view which is the home page I then opened up the car dot view which is going to be the car listing page and then I opened up this page right over here the name Dash ID Dot View which is actually the car itself and I want to kind of just explore the code at this point so let's begin with the index.view and I want to focus in on the HTML not the script tag so let's go over here so we have the template we have the div and over here we have our navbar component and then we have our car hero so let's actually look at a common pattern when we go to the car dot view so we have our template we have our div and then we have our nav bar at the very top and then we have our div that's going to contain all of the HTML that pertains to this page now if I go back over here you can see the exact same thing we have our nav bar and then we have a div that contains all of the different components that live inside of this page so what are we noticing here we're noticing kind of a common pattern so throughout these three pages we always render the nav bar component and importantly very importantly we always render it in the exact same position so it's always at the very top so you can see here the navbar component is at the very top the navbar component is at the very top and the navbars component that is at the very top and most likely if we add more and more pages we're going to want to have that nav bar component be at the very top and of course we are going to want to render it so won't it be nice if we can somehow abstract this away if somehow we don't have to actually render the nav bar for every single page we can just have nux figure out that I want to have a nav bar for every single page and I want it to be located at the very top of the page so how can we do that well we can actually do that with something known as layouts so layouts allow us to lay out our page and we can also have a default layout and I think it will make a lot more sense once we actually go ahead and code out our very first layout so layouts only work inside of a layout directory so let's go ahead and create a directory and it has to be called layouts and as you can imagine it's it's going to be very similar reason as to why this has to be called component and why this has to be called Pages nox is going to understand that The View files inside of this layouts directory are layouts and it's going to do some magic behind the scenes so let's go ahead over here and we're going to do layouts and we're going to create a new file now typically we don't really care what we call the file I guess in the pages we do care depending on the path but over here this actually matters a lot we have to call it default Dot View to define a default layout that is going to exist for every single page in our application so let's go ahead and create that page and this is just going to be a regular well view file so we're going to have a template a div and then what I'm going to do is I'm going to Define at the very top I always want to render the nav bar and then what I'm going to do is I'm going to define the slot component now this isn't any nux specific component this is something that we already see in view three it is is in essence what this is is all of the HTML that is going to be housed right over here inside of these specific files so right now the slot component would be all of this HTML right over here similarly the slot component will be this over here so now what we're saying is hey I want the nav bar and I want everything all the other HTML that's rendered over here so let's go ahead and actually save this and in order to actually get this to work we need to go over here to the app.view and we need to wrap this with a nux layout just saying that hey I want my nux page to use the nox layout so let's go over here and right away we actually noticed something interesting we have two nav bars and then we have our hero right over here if I were to click on uh let's say Toronto nowhere to go search you can see again two nav bars and we have our search and if I were to click on a specific car oh yeah we didn't make this clickable yet yeah that's later on don't worry uh let's go over here we'll say car and we'll just go to Jeep one and over here you can see we have two nav bars and this actually makes sense so what this is doing is it's taking this default layout and where is that it's taking this default layout and it's applying it to every single page so what it's doing is it's adding this nav bar and then it's adding all of the HTML that is within the page and that also includes an additional nav bar so the whole point of adding the layout is so we can remove the need of adding that additional navbar so I'm going to go ahead and actually do that so we don't have those double nav bars so I'm gonna go ahead and remove those double nav bars and let's go over here and we're going to go ahead and remove that and there we go so now you can see we have pretty much drastically cleaned up our code and you can imagine if our nux application is getting huge maybe we have a hundred different pages now we don't have to add that nav bar component at the very top every single time so we learned about layouts which is great you can see it's a really nice way to clean up our code however right now I'm going to go ahead and just focus in on some of these pages over here so let's first look at this page over here so we have our nav bar and we also have this hero and then let's go to this page right here now you can see we have the nav bar but you can see that all of the content no matter how much content that we have is always going to be confined from right over here to right over here so right here to right here and it's not going to span the entire width of our screen and if I were to go to let's say I'm gonna go let's just pick a car here so slash slash car and then we're gonna say Jeep one you can see here this is the exact same thing so uh uh is it's always going to span right over here it's not gonna we're always gonna have these white spaces and it's going to span kind of right in the middle and this is actually done by having this div element right here so this div has all of the Tailwind classes that are needed to have that stylistic effect and the only really exist in right now two of our Pages our main page doesn't have this exact div this is this exact div element now in cases where we have maybe some pages you know a group of pages that follow a particular layout but others that don't we obviously don't want to have a default layout for all of them but instead what we want to do is we want to have a custom layout and then apply that custom layout to those group of pages so again in our case these two pages have this div right over here and I think it would be nice to kind of abstract it into a layout so again what we're going to need to do is Define a custom layout and let's go ahead and do that so custom layout can be called whatever it is that we want and call them banana Dot View whatever.view I'm just going to go ahead and just call them custom dot view just to you know kind of kind of Ensure in your mind that this is a custom layout I'm going to go ahead and just Define the div the template and then I am going to go and grab this div right here so go ahead and just grab that I'm going to go ahead and paste it in here so I'm going to go ahead and paste it in here and let's add the closing div as well so closing div like so and so over here is where I'm gonna house the slot so over here is where I'm going to house the slot like so so now what I want to do is I want to actually utilize this custom layout Within These two pages so what we're going to need to do is actually override the default layout and to do that we can Define and we can Define the let me just scroll down here we can go ahead and Define the page meta this is something that is auto imported and over here we're going to call it and we're going to pass in the object which is going to be the meta we're going to specify the layout and the layout is going to be the name of the file in this case custom so let's go ahead and actually save this and if I were to refresh you can see we get this really wonky effect and the reason why we're getting this effect here is now what we're going to need to do is remove this right here so let's remove this div because we don't need that anymore and if I were to save it now you can see it looks exactly the same except it doesn't have the nav bar so it's very important to understand that what we did here was we over written the default layout so we're not going to be using that anymore so if we still want to have the nav bar in our custom layouts we're going to need to specify it so very simply we can just say here navbar like so and now we have our nav bar and over here you can see that the code is actually getting significantly less it's a lot nicer now we don't have that big div that's in our way we just have the the parent div and we have all of this content as well so you can see our code is getting significantly cleaner and we can do the of course the exact same thing over here so we can instead say Define uh and then it was cuss or Define page meta and over here we can say layout I'm going to say custom and now we can go ahead and just remove this div so let's remove that div we'll remove this and there we go that's pretty much all it is that we need to do so now if I were to go to here and let's just say Houston and search and you can see that it looks a little bit wonky here so let's see why that is so Define page meta we have the layout let's do a refresh there we go so it just wasn't refreshed as you can see here now it is indeed working and we have significantly A reduced the complexity of our code another thing that I would like to clean up is this right over here so you can see that this function we're using it in multiple different places so we're using it right over here in this page we're also using it right over here in this page so what I would like to do is kind of abstract it and put it in one file so we can just use it and import it into the files that we need and what we can do is we can actually store this function this functionality that we're going to utilize throughout multiple different components or Pages or both we can actually store them in composables so composables are places where we can store State as well as a different pieces of functionality so I'm going to go over here I'm going to create a composables directory and it has to be called composables because nux is going to understand that all of the different files in here are composables and do the auto importing and I'm going to call this composable file use utilities so typically composables start with use and over here I'm going to say use U T Lee I'm trying to spell this correctly utilities I think that's how you spell it and I'm going to say dot Js so this is just going to be a regular function that we are going to export so we're going to say use utility's and this is just going to be a regular function like so and we're going to grab this piece of functionality which is going to be the two title case and we're going to place that in there and then at the very bottom of the function we're going to return it so we're going to say two title case so everything should be working A-Okay now but now what we can do is instead of defining the function over here what we can do is actually utilize that composable so we can say const curly braces for destructuring use utilities and we can go ahead and invoke it and we can actually get to title case that two title case function and now we can go ahead and remove this and now if I were to actually refresh you can see that everything is still capitalized in the tab and we can actually do the exact same thing now in the other case where we use it which is going to be the this file right over here so over here we have uh use title case and we use that right over here in the use head as well so instead I'm going to go ahead and just paste that in there and I'm going to remove this save that and I'm going to go to Jeep let's go to slash car slash Jeep slash one and you can see that jeep is still capitalized so we can use composables to kind of abstract away all of this repetitive code which is always great

Channel: Laith Academy

Views: 45,907

Keywords:

Id: B6hmetsV3yI

Length: 72min 31sec (4351 seconds)

Published: Thu Dec 29 2022