Nuxt 3 full course build and deploy | #Nuxtjs #vue #nuxt3

welcome to this amazing next three course which you will never ever find anywhere on the internet because we have covered almost every major concept of nurse and we are going to design something like this here which is going to blow your mind because we are having this iphones here and when we click on this iphone we have moved to the new route and this is our dynamic route you can see 12 pro is here if we go back click on 13 it becomes 13 and whatever is the route we are getting the iphone image and the name accordingly so next is when we click on the buy now you can see it's actually added to the card and also the card number immediately just reflected here so similar to that if we try to remove the card and remove the iphone from the cart you can see it is removed so let's add this one go to the all iphone and add another one so you can see now the cart value become two and you have seen this another thing which is total route change so when we're going to learn about the middleware we are actually tracking how many routes we have moved through so if we go to the home you can see now it become 10 if you go to iphones it become 11 so how many times you move into the application it is just keep track of everything not only that we also have a login button where we have a nice little login page all the designing is basically done with the tailwind css and here we are using res rec dot in to have a login system and we are using next three use fetch hook for sending a post request on the restrict and you can see once the user is really authenticated we redirect the user to the welcome page or the home page and now we have to new button logout and profile and the best part is if we click on the profile obviously we should be able to visit the profile page like this but if we log out you can see now i'm not logged in and try to go to the profile page you can see i'm getting 500 error which says that route navigation aborted that means only logged in user will be able to visit the slash profile page isn't it really amazing thing we have created with this next three so this is the overview of the application we are going to create but there are a lot more amazing topic we are going to touch so now let's go and see what are the real individual topic of next three we will going to learn in this course what we will going to learn in this course we will going to start with what is nuxgs and why we are going to use it then we will see the installation how we can set up a new project of next three and then we will explore the project and the directory structure and the file structure inside that after that we will see how this auto import works and what is the benefit of auto import in next three then we will create some components and see the use case of components directory then we will see how we can use a dynamic component inside of this nux3 after that it's really important to have the navigation system and now 3 uses view router behind the scene but with added benefits so we will see how we will create some routes the pages and everything after completing all these things we will see how we can move through different pages which is called page navigation and then since we are creating a application which has different pages and every page need a similar kind of header and the footer we call them layout so we will put that in layout directory and then we will see how we can create that dynamic routing remember the iphone slash iphone name so that will be the dynamic name so whatever name you give we will fetch the information according to that iphone so that is dynamic routing now after that we will see what is the use of assets directory and also we will see the use of public directory and difference between them basically in the assets directory we put the css file or javascript file or any font you want to have in the public directory we have added the images so you saw that images on the on the iphones we have all these images are actually served from the public directory now after that we will see the real seo magic with nurse three so head management which is like changing the metadata adding the script tag to the head changing the title dynamically all these things will come under the head management in nurse 3 after that we will see the composable and using the state management with this composable it's really powerful thing with view 3 and inside next 3. then we will talk about the data fetching that means uh sending requests like get request report post request in nursery without using any external library because next we provide use fetch amazing hook then we will talk about the middleware and you saw that the profile thing that is because of the middleware and after that we will see the server routes you know nux3 is a full stack framework not only front end it also has the back end that means we will see how we can create the server routes and apis inside of the nox3 and finally we will going to deploy this project on the netlify and here you can see we have this amazing subdomain for netlife which is nuxtree course2022.netify.com and you can visit this and interact with this application before starting this course to verify that what we are going to learn so i am very excited for this next three course so let's start this amazing amazing next three course the very first question comes in my mind is what is next.js or what is next 3 basically so next is a framework of vue.js and you will say that vue.js itself is a framework yes so next is a framework of framework so what a framework will do framework actually solves various problems which you don't want to repeat on every project so vue.js solves various problems like routing and vue.js solves problem of components and various things which you don't want to do in a core javascript next in vue.js you to have the routing you need to install the view router and set up it but nux says that why do you want to do these things if you can solve that so next doesn't need any view router to be installed it is integrated in that so that's why next is a framework of framework nuxgs is expandable with strong module ecosystem and hoax engine that means there are lots of amazing modules available for nox.js with that you can expand nurse.js and its functionalities it also has a great support for type script with the nux 3v you have amazing typescript support and which makes your application faster and has the better performance it also supports the pwa and amp progressive web app and the amp thing but for having these things you just need to install the module and that's a simple thing it's not natively integrated but as i said it is expandable with the module system so that's why it is it makes easy to connect with the rest and craft fuel apis it's good for the cms css frameworks and many more but why we want to use it if it is that good is there any other things technically if you can solve so yes next three uses both webpack and white if you want to use for the hot module replacement and bundling process so you can choose between any of them if you want so there is a flexibility in this in this space next it is using the es build which is extremely fast a transpiler to write the latest javascript syntax while supporting the legacy browser so it's going to work on every browser you have in the world and that's the power with the es built with nux 3 you want to use nux 3 because it is having h3 for deployment versatility such as serverless workers node.js unmatched performance and h3 is a http server which is another module and that module is integrated in the next three after that a routing library to handle the client side navigation which is view router as i said view router is natively integrated in h in nursery you don't have to do any other thing after that why you want to use nuxxes it has its own command line interface which is called nuxi nuxi you want to call whatever it is but for the proper deployment on the various platforms next uses a server engine called nitro so as you can see for every amazing thing it uses the best in class thing available on our on the world for the forward compatibility next has a nux 2 bridge module which means you can use next 3 feature in your next 2 with that module isn't it really cool and that is why i highly recommend the next is so amazing framework now let's start with the installation to get started with next js we need to go to this website with the version 3 i'm talking about which is v3 dot nuts.gs.org now right now this is in rc that means a release candidate and rc basically means that this version is ready for the release that means the stable version or you can call it version one but how do we get started with this next gs when you go here you will find this get started button so just click there and you will find this prerequisite to have a next application next three application in your system you need first the latest lts version visual studio code or any one you want volar extension we will download that on our vs code and some other things like type script with the typescript plugin anyways let's scroll down and where is that here so you can see now we have this command npx and uxi in it and the name of your project so let's try this click on this one which is going to copy this go to your terminal and try to run it and then if you try to run it you will get this time this kind of instruction if you are running this for very first time so it's basically trying to install the next cli so you just need to say why and once this is done we have the next cli and our project is now created so let's just go into next app and open this with the vs code so just like this and now our application is opened with the vs code so here on the right side you can see we have a lot of things but it says that once you go inside your project you need to do the npm install so i will close my terminal here go to the vs code open the integrated terminal like here and then i will simply say npm install while this is installing we need to look into this package.json this package.json is having a dev dependency of next it's really important you can see it's a dev dependency because everything will be compiled and have that in a new project so we don't need this next to be in the production that's why it's a dev dependency now remember the next documentation said that we need to install this volar extension so let's search for the volar extension so for that you need to go on this section for the extension search for ruler and how it's going to work let's see how we can download this one okay so this is the view roller so exactly like this bowler yeah so let's install it this is for view 3 especially and this is now installed next it says that hey you also need the type script view plugin for the roller which is this one so let's install this too okay so this is also installed now let's see what happened here everything is now installed once you are done with all these things then what you have to do you just need to say npm dev npm run dev hyphen hyphen hyphen o is just for opening that in a new browser window so basically you just need to say npm run dev nothing and if you do this you can see now we have our project running on localhost 3000 but what about that hyphen o hyphen hyphen hyphen o hyphen o basically means just open that in a new tab and whoa you can see so amazing and great next three application is right here in front of us the very first thing i want to know is that from where all these things are coming and how actually the file structure of next application helped me so let's understand one by one so start from ts config obviously it's a tab script configuration and this is going to extend the next js original type of script configuration if you want to look into that you can go inside the node modules and dot next and ts config.json and if you want to overwrite something yes you can write overwrite it here okay then readme is just a readme thing maybe i can write it like next course 2022. okay then i have already told you about the package.json but we have not discussed about this scripts section in this script section you can see we have a build which is going to be useful when we will create a production ready application then dev is obviously for the development purpose generate is going to create a simple static site for our next application then we have preview and post install okay then package lock.json you obviously know is going to lock the exact version of any dependency we have so that when we do the next npm install it will not look into the package.json and find the latest version else it will just look into the package lock and download the exact repository or exact version for every dependency we have and this is the real amazing thing here we can do all the configuration related to our next js and that's why it is called next dot config.ts file because it's using typescript and here inside this define next config we have a object and we can define anything suppose you have to say auto import you want to make it false that's okay we can do that and you can see because it's using tab script as soon as i start writing something whatever function it has we are getting it so app directory if you want to define you can do that you can define app whatever configuration related to your next js you want to have you can put it right here and finally we can see we have this app dot view and this is the file which this home page is telling about it says that remove the welcome page by removing next welcome tag from your app.view now if you go on the app app dot view you can see yes we have this next welcome this is a you can call it this is a component given by next chairs now you will think that hey sarthak how this is working why don't we see any import next welcome from whatever the path is because nurse.js uses auto import we will talk about that later but for now let's try to remove this and just say hello world and now if you can go on the browser you can see we have this hello world only that's the powerful thing about next and this is how we will move forward finally we have dot git ignore node modules and dot next directory this dot nux directory is actually going to give you a dist folder when you generate or when you do the npm run build all these the application will compile and rendered and then put into this directory for the production ready thing okay so i think you get the point so first without wasting time i will just go and create a new repository so that we can get started with this once again very fast so next is course 2022 and here also next.js course 2022 it's a public directory create repository we already have the git installed here so git log if you say it says not a git repository that's strange so we need to first say git init and empty repository is a fresh repository is created now since we already have the dot get ignored to ignore node module directory and dot nux directory so that's good we are good to go just say git add all get commit with the message of next js learn nexus okay now what i will do i will go here and copy these two lines three lines actually from here and then put it like this hit enter and finally you will see our project is live on our github and you can go on this url get github.com bitfumeslash nuxgs course 2022 that's super easy now let's understand and move forward with the next journey now let's talk about the auto import in next three this is a really cool and amazing feature for next three where it's basically says that next auto import helper functions composable and view apis to use across your application without explicitly importing them what do you mean by that so if you have to import a function from let's say from the view api let's say you have to import a ref then generally what you do you first import ref from view you do something like that but you don't have to do this if you are using next three isn't it really cool so let's try this and see how we will be able to do it right now our app.view is only having a div with hello world let's create a button here to increment and we are going to create a simple counter so here button called increment then we will use a p tag to show the count value and then another button to decrement okay and you can see it says that property does not exist let's create a setup script so i think we need to create a script like this and call this a setup script we are using a view composable or view composition api with the script setup this means if you don't have the knowledge of view 3 you can check out the view 3 full course the full 10 hour course on bitfume's youtube channel and obviously we are going to learn here also what you have to do you have to create a count ref and you have to import this ref from view so right now i will create it and i say import ref from view okay so now if i do this you can see it's not having any error but is it going to work you can see it says hey there is nothing called view and you cannot do any import system so if i remove this from here and now if i go reload this page you can see 0 is here so let's quickly complete this you can call it a counter system so we need to have at click of increment and here at click of decrement since we are using a setup composition api we don't have to do anything and the simplest thing we have to do is just writing a method so here we have and what we have to do we just said count dot value plus plus and count dot value minus minus this is once again the composition api but if you want to have a optional api or option api you call it then you can just comment this and use that i will do that but let's see first if this is working or not if i click on increment yes it's doing decrement it is also doing and working super but as i told you if you want to use this optional api or we can say the the system where we have the view 2 kind of things so exports default and there comes export default and there comes the data which will going to return an object with a count of zero then we can create a method here we create method called increment which is going to say this dot count plus plus and then decrement which says this dot count minus minus is this going to work let's go reload and yeah it's working so you saw that next is providing you the full power of view view 3 view 2 composition api optional api everything is there but i really like to have a setup or a composition api because you can see just by creating these three things i am good but here it looks like little clumsy having a lot of things the data then return the method and then doing all these things so i just don't want to use it and for the rest of the course i will only go with the composition api of view 3 so i highly recommend you to visit the vue 3 10 hour course on bitfumes youtube channel where you will learn each and everything about view three also okay so that's about the auto import thing and this is going to work for every kind of import you want to do time for the real thing components directory what is component directory and how it is useful in view in next three so a component directory is where you put all your view component which can be imported inside your pages or maybe inside any other component so think about component as a small piece or isolated piece which you can reuse next automatically import any component in your component directory and again it's a mind blowing thing nux 3 is really good and it's reducing the effort we need or we have to do to use the view view gs and view 3 basically so that's why the components are actually allow you to split the ui into independent and reusable pieces and think about each piece as an isolation so if you are having a website then you can create three different kind of components like header main aside maybe inside the main you want the two times you want the article so article can be a different component similarly items can be a different component so these are the power of using a component so what we can do in our application how we can use the component so right now we have this counter and what happened here what's not showing something is wrong oh so i need to give setup i forgot to give setup because i was showing you the optional api now it's working anyways now let's move this counter thing into a dedicated component how we can do that first let's create a directory called components and it's absolutely important to name it specifically otherwise you will not get the auto import thing now inside this i'm going to create a file called counter dot view and then i will put these three things these buttons and the p tag in a template here and now it will say hey these properties are not available so i know these property will be available by having a script tag here now since we don't have any import thing here so it's working absolutely fine out of the box and we are good to go but now since we have this counter component we need to use this counter component in our app.view file so just below hello world with the q sign i'm going to use counter as the name it we have given and then i use the self closing tag and that's the only thing we have to do but is it going to work let's see yes it's really working without any import without doing any kind of thing just whatever the name you have given to the file use it as the component wow so great and you can see it's working absolutely fine but now i want to create another component like welcome say i'm going to create a component called welcome so let's say welcome dot view that's good and what i will do i will just put this hello world here in a template and now above this counter i'm going to use our welcome so call it welcome now that's good so you can see both are really here but since next 3 is actually importing or auto importing our components what if see this is going to be really fun what if i create a directory called home and move the welcome inside the home now what's going to happen so it says viewer want to refactor i just want to skip whatever changes it is doing i can just see welcome is here inside the home now is it going to work reload now it's not working because there is no component called welcome directly inside the components directory so if we open the console we can see it says that hey something is wrong hydration complete but contains mismatch what that mean totally not in our head so for that you need to go to the documentation and it says that the name you have given should be like a directory structure so what we can do we can simply say that hey it's actually home welcome so see first we are using the name of the directory and then the name of the function we are component we are creating okay now you can see boom hello world is back with us and now since we are having a welcome view page but we are calling it as a home welcome isn't it contradictory yeah so next says that hey next three recommend that name this as exactly you want so don't ask it again so i'm going to call it home welcome now you don't have to say like home home welcome because we said that home welcome next three will look first into home and it says that is there any welcome or is there any home welcome component it will find it and it will render us render for us wow so amazing and this is the concept which really makes developer happy so now we are using our component like this with the every letter or first letter of every word as capitalized and we call it pascal case so if you go and search for pascal case you can see it is pascal case is what is the example of parcel case yeah so first letter except the first letter in the puzzle case is always capital but we can also use one more case that is called kebab case now what is the kebab case kebab case basically says that there is a hyphen between every word we are using so instead of home welcome as a pascal case we can say home hyphen welcome and that's good it's working and also on the counter you can just say counter as smaller version instead of using a pascal case that's also working and i will be using the pascal case because it is more of a component thing for me and instead of using the kebab case so this is about the component but we have amazing thing on the component called dynamic components and now let's talk about dynamic component so what do you mean by dynamic component so suppose you have a component you don't want to use it directly then you can use the view component template component tag i can say and then define the component name and with that in next three you have to use the resolve component helper function provided by view to actually use that component here so something like that if you have a button called my button component you need to resolve that component first and then you will be able to use it dynamically we will also going to learn about not dynamic component but the difference between dynamic component and dynamic imports so we know that we don't have to actually import anything inside view three so if i'm using this header so it is directly available in our component but we can have a footer which is lazy footer so what do you mean by lazy so to dynamically import any component known as lazy loading a component all you need to do is add a keyword of lazy before the component name so the actual name of the component is the footer but if you want to delete the this component if you want to dynamically import then this lazy keyword will be here now how this is useful and why we are going to use this dynamic import since this will this component the lazy footer will not be directly available it's only available when something is requested so let's now see all of these things in action first we will going to talk about a dynamic component how we have this counter thing and we will going to use this the counter component as a dynamic component so here we have the counter but let's use component component tag and here i define is which one counter so does it work first it says expected component element to have a v bind oh so that has to be colon counter now it says hey you don't have that property called counter you defined here so we need to have a script tag and let's call it setup then i say const counter and remember we need to say resolve component helper function and we call it counter now if i do this type of script doesn't have any issue but is it going to work let's see and reload this page yes it is there now what happened with this view or actually next three will go and find any component with the name of counter and then it resolve it and then pass it on this component tag but why we want to use it and why not just writing the counter now suppose i create a button and i say toggle okay and when i click on it i want to toggle and what i won't want to google i just want to google about the function so what that mean i will first have the counter let's call it my component and i'm going to use this inside a ref and remember this is a view 3 composition api so this means that i can change the value of my component so i will be doing like my component that dot value is equal to resolve component and this time it is home welcome okay now what's going to happen when i click on toggle let's see so first we need to comment this home welcome also now we just have google but it should show the counter so now the name is changed to my component so initially when the page loads when this component loads so we have this counter as the value of my component that's true so that's why we are able to see the counter component now when we click on the toggle it will change the value of my component from counter to home welcome let's see is it working yeah it's working that's really cool and we can toggle it by just say what is the real value of this so if i do it click on toggle you can see we have some kind of proxy so first thing i can see is it's suggesting this like you can use the shallow ref instead of ref so it will be more of you can say performance benefit with the shallow ref when we use any component inside the ref and you can see it's a full component so what if i say dot name so google oh it's not having anyways so you got the point like when we click on toggle we can change the component but now what if i can do something else instead of component let's do a if else so if else means we say toggle and this time i will say const my component is equal to simple ref of let's say normal counter it's not like i'm giving a component it's just a string counter okay but when we click we don't want to change the resolve component we just say the value will become welcome okay it's just a string welcome now we will say we have the home component we have the counter component but home component will be only visible v if my component dot value is equal to welcome right like this now it says cannot use we if what happened maybe i can see like uh so conditional rendering element based on the truthiness of xp experimenter so it says this something is wrong here we if this is true what if i say here v else maybe i can put this vf on this div like this okay now if this is true then show the home welcome otherwise show the counter so reload initially it's a counter click on toggle nothing is working so welcome is there welcome is there so maybe i can just do compare the welcome yeah so now you can see first is increment click on toggle it become hello world so there are two way to switch between the components and what i really want to do is let's create one anchor tag and then i call it home and another i call it counter okay and now on the home when i click on it i want to say view and there's a function called view which is say home and similar to this i would say counter so there is a method we need to create called view so let's remove everything and say function view here we get the name so maybe like this and what we have to do here when we click on home we want to show welcome so once again do this we if let's create one const page is equal to ref of um home okay so when the value of page is home is equal to home then show welcome but when the value of page is counter then show counter and now when i click on whatever view then page dot value will become the name we provide so what is the benefit of doing this we have to anchor button or anchor link whenever we click on home it should set the page value to home and then it will show home welcome when we set the value of page to counter it will show counter not the home welcome component so how this is going to work home counter so click on home so click on counter you can see it's there and we can make them clickable by having href and providing a hash so that both become a tag now click on home we are home click on counter now we have counter so we will be able to switch between these two but remember these two component will be only visible when the value is according to the if statement what if i give any ref or any value of page which is not for any of these component that means when i do this no these both of these components will not be visible now we know that nux3 do the auto import automatically that means to have these two next has to import these two elements these two components whether they are showing it or not so that's actually one step now to make this step we don't want nux to load it even we are not using it we can just put a lazy here and what this means these components will only get imported when we need them so this is the power of lazy or dynamic import so now the import is only going to work only be available when we do use these components otherwise it will not going to do that so i think you got the point what is dynamic component and what is dynamic loading or dynamic importing so this is really powerful thing and we have reached to a section that you can see we have two pages actually one page is home page where we have hello world another is a counter which is having a normal counter i think we need to move to the routing now it's time for the routing so how routing works in next three so next provide a file based routing to create routes within your web application using view router under the hood so you have to create a pages directory which hold all of the pages as the route and one thing to notice here is that you have to remember that next is so powerful that if you are not creating any pages directory it will not include the view router and reducing your file size production bundle and that's the cool thing if you don't need anything why you want to put it inside your bundle okay pages inside the pages directory that means any route you create inside the pages directory are just a normal view component that can have a dot view dot js jsx ts tsx any kind of extension so let's first see this in action then we will learn something more about the routing but let's go on our application here and we can see we don't have any pages directory and that's the power that since we are not using any pages directory we will not be having the view router in the bundle we will create for the production but let's see what happen if we create a pages directory so i say pages directory and just by doing this i'm not having anything inside it what's going to happen let's see if i reload it's possibly that it's still loading the view let's just kill the server and say npm run dev and let's see what's going to happen now when we start the server so server is started and now you can see since we have created the pages directory the next three will not look into the app.view it says that hey you have the pages directory so first i will see any index file inside the pages directory and if i'm not able to get it i will do the 404 that's good so what we can do let's create a index dot view page which is going to have a template where i say hello world now what do you think is it going to show hello world or is it going to show this template which we have on the app.view so let's just re-start the server because it's really important to see that changes without having any difficulty now if i go you can see it is still showing me the content of app now think and listen very carefully this is very important to understand whenever you have any page inside the pages directory then actually that will go through the app.view so the app dot view is the entry point after that it will go inside the pages but how we will tell to next that hey next yes it is okay to have all these pages or all these component we have on the app.view but we need in between that we need the content of the page we have created so what we have to do let's go to the slides once again and it says that if you are using app.view make sure you have next page component to display the current page that's really important to understand whatever the current page is you need to use next page component to show that page thing here so it will replace whatever you define in the index dot view so if i now see it says hello world i can change the name so hello world hello index i can say hello index you can see we we should have hello index but it's not doing we need to restart the server this is not good it should re-render but anyways when we restart it you will be able to see we have the hello index so first we have this anchor tags then we have whatever page you have so hello index and third we have the dynamic component with the dynamic import thing now let's create another page and i will call it about dot view and let's create a template simply and say hello about now what do you think when we will be able to get the about page we will be able to get when we will go on the browser address bar and say slash about and if i hit enter once again it's not doing it uh i'm not feeling good with the restarting of server but you can see once we restart the server our hello about is there so this means that whatever you define the page that will move the content of that page will move here according to the route so we are on the about page so it's loading the about uh dot view file when we on the we are when we are on the home page then it's loading the index dot view so this is how the routing actually works now there is one more amazing thing if you don't want to use app.view it's obviously up to you so i just name it anything so that next will say that hey there is no app.view now since we don't have any app.view what's going to happen it will directly render or it will directly render the page you are having so if i am on index it will show me hello index if i will go on the slash about it will show me the about page so you can see hello index and then about hello index and about so that will work when we change the route so changing the route you can understand how it's working cool so i think you get the point that how we can actually use the pages or how routing works with app.view or without app.view we now have pages but how do we navigate between the pages so for that we have two option for the navigation one to navigate between the pages in your application you can use next link component which is the extension of router link from the view router or you can use the programmatic navigation by having the navigate to method but make sure it's really important in nux3 to have a single root element in your page template to have the smooth transition between the pages otherwise you will have some issues so this is something which is not a view three-ish thing so in view three you it's not it's not mandatory to use a single root element but with nux3 yes you need to do that anyways let's go and see how this is going to work now we have two pages hello index and hello about that means homepage and the about page so first what i will do i will say hey hello index i will first create next link and the next link will be like this and i will say 2 and 2 will be slash okay and here i will say this is home and like this and another is about is about and here i will say hello index because this is the index page and i will copy these two links and go to the about page and i will paste that something like this so okay so this is done and let's see if this is working or not so very sure it should be there but uh i think it need reload so that's not an issue maybe it will be fixed once the stable version of nux3 get released since this is a rc release candidate you have some issue now you can see we have home and about links and if i click on home it's taking me to the home page but something is bad what's that bad thing remember i told you pages must have a single root element we don't have that you can see we have next next link then we have a normal text so let's put everything inside a div here also here like this and now it will work smoothly so it's not working maybe i need one more restart for the server and once that is done once we have next three [Music] and you can see it's so smooth and working absolutely fine so this is how you navigate between the pages and as i told you this is using the next only now what if on the index page that means home page i will create a button i will say take me to about page and then i will say click move to about create a setup method actually script first then a setup and then i say there is a function or a method called move to about and now i will use navigate to and here i will define that it's going to be the about so reload go to the home page and i'm really not liking this thing i think i have some issue this is not the next three issue this is my issue i'm doing something wrong which is making my next three has to restart again and again this is maybe my system issue not don't worry about that so now click on take me to the about page you can see now i am on the about page home about home home about home home about like that okay so this is working absolutely fine and this is how you navigate between the pages and remember you must have a single root element that's really important so if you go on the about page we can see we have these two links if i go on index page we can see we have these two links what if we have hundreds of pages and then we are having these two links but after 101 page our boss says hey just add another link to every 100 pages that's not a good thing so how do we reduce the reusability of these things let's introduce you with the layouts directory now what is the layouts directory so nux provide a customizable layout framework you can use throughout your application that means if you want to extract the common ui just like we saw for the next link or a code pattern into reusable layout component we can do that using the layouts directory so layouts are placed in the layouts directory just like components directory pages directory and will be automatically loaded via a sync import when used how this is going to work let's understand so as the slide set what we have to do we need to create a directory called layouts now when we have created the layouts directory then we need to create a file called default dot view now this is a normal view component so we can create a template and here we can say that hey i want to say hello from layout and we are not doing anything this is to remember we are just having let's say a p tag layout hello from layouts and see what's going to happen if we go here on the about page we can only see hello from layout if we go on the home page we can only see hello from layout what's happening here so what happened is next we'll go to the layouts default dot view file first before going into these pages so whatever the route we have if you have about route if you have a slash like the index one before going to these files next three will go into the default dot view and it says that what i have to print yeah this p tag with this hello from layout that's it but we need to tell that hey not only this whatever we have in the pages just put that here so it's not like like we previously saw on next on app dot view which is having uh next uh what's that page this is not going to work so what we have to do we have to just use the slot that's so easy thing the basic slot of view three normally it will going to work you can see if i am on the home page it's working if i will go to about page it is there so whatever you define in the layout will be consistently available on all of your pages now let's go here and cut it from index and also cut this from about now move these links here on our default layout and after this link we said that hey this is the slot that means here comes all the pages information so maybe we can write a comment here next we'll replace page content okay and maybe we can do we can just move these two into a nav tag okay that's good let's go and we have to save this file and if i go on home page okay i got the point let's restart our server okay now if i reload and it will be yeah just home and about home and about home and about this is the default uh you can say layout we have created but you have seen we have not used index we have not used any name we just said default now what if you don't want to use this layout for any particular reason let's say you have a page called profile the user profile let's say we have a profile page and on the template i say in a p tag welcome username so welcome sarthak so if i go on profile page so maybe i can add the profile page here profile and since we have created a file inside the pages directory a route will automatically be there so that means if i go click on profile it says not found and remember my issue with this next three reloading thing and you can see it will be available the profile is here but on the profile i don't want this kind of navigation maybe i want the sidebar thing so how this is going to work so let's create another file called sidebar dot view and inside this i will put a simple let's say article okay or is it a sidebar no so we have a normal html article and here i first say hey there is a thing called maybe i can say dashboard and then we will have settings and for now i just give a style and i call it sidebar and since this is a vue.js we have very simple style and we say sidebar is going to be having display of flex and flex direction is column that's it and now i want to use this sidebar on my profile how we can use it for this thing nux 3 provide very nice helper method which is called define page meta and this is going to be an object where you define whatever you need for the page metadata and here i say hey the layout is actually going to be the sidebar you can see it's giving me the suggestion because of the type script integration in nux3 so i'll say hey i want to use the sidebar as a layout for this profile page now let's go here and once again i think we need to reload the page and that's once again for me only and this is a time consuming thing for me yeah i know but yeah you can see we have dashboard we have setting and this is really great but as usual we need to say hey give me the slot and once again i say here next will replace page content once we do that we should have the page content that means we have the profile content which is oops that should be on the layout not on the view file so we have this and after this we can say main and inside the main we have the slot okay that's cool and yep welcome sarthak we have this sidebar and that's nice so maybe i can say hey there is a main here and we call this as section and for this main i call it sidebar and not it's not as a sidebar um maybe we can call this as a user layout okay so maybe we can give dot user layout as display of flex and yeah you can see sidebar is on the left side and then we have the content cool so this is how you create the default uh layout plus a custom layout for any different page this is okay but do we always need to define it no suppose on the about page you don't want any layout so neither of the default neither of the sidebar so in that case you can easily disable the side disable the layout thing so define page meta and here i say layout is just say false now when we say false this means next will not add any of the sidebar or default layout into the about page so here we are here we are on the home page you can see home page is having this side this default layout we go here it's still there maybe we need to restart it and once we are restarting and yep you can see on the about page there is no there is no layout available you can see on the home page yes we have the layout if we go on our profile we have the link so go to the profile yeah profile is also having it but remember we got one thing if i click on profile first we get blank page why because on the profile we don't have a maybe on this this yup so on this default layout you can see we don't have a single component a single you can say html here so what we have to do we just need to say hey there is a div or this div is going to hold every other thing and now it should work maybe i can see yep and yes you can see without any reload it's working perfectly fine and about doesn't have any layout home has the layout and this is how we understand about the layouts in nux3 we have learned about the routing and navigation but what about dynamic routing so what are dynamic routing and how we will achieve how next three will going to help on that so with nurse 3 if you place anything within a square bracket it will be turned into a dynamic route parameter and square bracket that means the name of the pages you create in the pages directory so you can mix and match multiple parameter even non-dynamic text with a file name or directory so basically if you have the pages inside that you have suppose index which is for the home page then you have a users hyphen and now you can see the group is is inside a square bracket that means whatever you put here let's say users uh bit fumes so group value will become bit film so this is the dynamic thing now after that you can see we have id but this id is also inside the square bracket this means if you say 2 that means the id value will become 2 if you say 100 the id value will become 100 so this is called dynamic routing let's see how this we can achieve in our application now suppose here on the pages directory i create a new page called iphone okay now inside the iphone i create one called let's say iphone oops iphone oh iphone 13 dot view okay so create a template and i say here iphone 13 that's good so that means if i go on slash iphone slash iphone hyphen 13 uh we need to reload the page i can see i have the iphone 13 written here but what if i also have a product called iphone 13 pro so i need to create another file for iphone 13 pro and we call it like this so now let's go here and change it to pro you can see it is iphone 13 pro but this is the problem you can see we are ending up creating a exact page inside the iphone directory for every kind of iphone that's not true this is not good thing so what we have to do i will delete this 13 pro file and then i will rename this to iphone hyphen version okay or maybe we can call it iphone then name so 13 pro 13 pro max 12 12 pro max something like that so if i do this now let's see what's going to happen if i go here you can see we have iphone 13 pro we are having this iphone 13. if i go on and say iphone 13 only not the pro that's also giving me 13 but what if i say 12 still it's giving me iphone 13. this is not good i want to fetch whatever i write here as the name and put that name here instead of this 13. for that let me introduce you with a simple object which is called dollar route so i will use the double curly braces and i say route dot parents dot and now the parent name is the name so name comes here so just by doing this whatever we say so let's just remove the 13 from here and now if we go here you can see 12 is there let's change it from 12 to 13 pro and hit enter and you can see it's written 13 pro so whatever we say here whatever we define inside this it will be treated as the content we have here that's so amazing one file can be used for different kind of purpose according to the name we provide here now suppose you don't want to use 13 pro with the hyphen in between i just want to have a space instead of this so maybe i can do i can first create a script and this is going to be a setup script we can create a computed property so const name is equal to i say computed and this is going to return the whole thing and we replace it with the name which we have created now can we do like this let's see and if it is working or not okay so now it says hey dollar route is not defined but it was working on the template yeah so on the template yes you can use the dollar route but here on the script tag you need to use one again once again a new helper function called uh use route and this is the one so i say const route is equal to use route and instead of dollar route i can say hey this is just the route not the router okay and now if we go and reload yeah you can see it is there now what just we need to do we need to replace the hyphen with the space so dot replace and finding search for hyphen replace it with space and yeah you can see with with the space now if i say 13 pro max so i think we need to say replace all maybe that will going to work let's once again try and it's a 13 pro max with the spaces whoa cool now let's talk about the assets directory what is this and why we need this in next three so the assets directory is used to add all website assets that build tool like webpack or white whatever you use will process basically the directory usually contains the following type of files like css file or any style sheet related thing any font or any images that you are not able to serve from public directory and now what is public directory and why we will not able to search some of the images from it we will see that later but first we need to understand about this assets directory so to better understand the use case of assets directory i will go and install tailwind css because we need to configure it and then we will use assets directory to put the css file so let's get started with this and the normal guide is to go on the frameworks guide and go to the but since we are using next 3 and right now nux3 configuration is not yet available here but it's not that difficult first you need to install all these things given here these are really important so let's go on our project and we hit these things so this is going to install the tailwind css post css auto prefixer and a post css module for next three after that it will going to do a configuration for tailwind css just like this one and now what we have to do it says that you need to add this build module and add these things but we will not going to use it because we are using nux3 we will skip this portion it's not required then yes we will need this configuration but we will do this later when we first see how we can include these three things in our assets directory because that is our main purpose okay so let's go to our vs code create a assets directory inside that i'm going to create a css directory and inside that i will say tail wind css or maybe tailwind dot css okay so this is the tailwind dot css file i have created and i will just paste this now this is a normal file how we will tell to next 3 that hey nox 3 use this css file there are many ways and the first very important one is you can add that on our layout is this going to work maybe let's try so i will say hey i want to import so at the rate import and importing our tailwind maybe we can do that on style also script actually so import and importing from assets directory we have css then we have tailwind.css is this going to work let's go on here and you can see it's not working even if we restart our server it's not going to give us the real tailwind information you can see i'm on the home page where i am using the default default layout it's not working okay so where actually we will going to add this we will going to add this on our next config but as i told you we also need to tell our next chairs that hey next years when you build then you need to build with the post css configuration so that's all the things we need to do inside this define next configuration so let's copy these things and paste it once you paste this you will get this kind of error it says that hey actually in the post css now you need to use the post tss option and then provide the plugin okay so just post css option and the plugin now this is all good but is this going to work i think something is happening it has restarted the server since we have made changes in the next configuration and boom you can see now we have tailwind css and if you are not convinced then what i'm going to do i will first go on the layout and then for this navbar i will give a class of background let's say purple 700 and text of white and very soon it should be there i'm on the default page here right right right okay so now what i got is since uh we have this tailwind configuration and in the content we have not defined anything so what we have to do we have to define these four five things which is actually going to tell to uh tailwind that hey tailwind you need to take care of these uh classes which i have added so once we done with that you can see we had this but something is wrong still okay so what we can do we can just kill the server we can restart it and yeah you can see all of the things are here so this is how you can add our configuration but there is one more thing we don't want to add it here because now we have another sidebar where we also need the tailwind information so instead of adding it here i'm going to remove it i will go on the next config and here also we can say css is and in an array we can define where is the css so it's inside the assets css tailwinds dot css and that's it this is also going to rebuild our server restarting the server that's done and now you can see it is still working and it will work everywhere so also on the sidebar layout we have so we can say hey the sidebar layout will have um bg gray hundred so yeah you can see it's bg grey hundred i can show you by giving 500 maybe um it's i think that's about page i need to go on the profile yeah so profile you can see having the bg gray 100 or 500 whatever we define okay so this is how you can understand that how we can use the assets directory plus how we can add the tailwind css in our next three application so after assets directory it's a public directory so what is the public directory now the public directory is directly served at the server root and contain public files that has to keep their names and this is really important against the assets directory in assets directory whatever you put will be having different name when there is a build occur so when you build this next three for the production assets directory will do some prefix or suffix on the name of the file on the assets directory but with the public directory next will not going to touch it is serve file as it is okay so let's see this in action against the assets directory so what we have to do here remember we have created a iphone 13 pro kind of page but we don't have a page where we can show all the iphones you can see 404 that means we just need to go on the pages directory and remember this pages directory does not start with capital p it should be with a small p and now i will just restart my server and because this is the issue why i have to start restart the server okay now since this iphone directory we have doesn't have any index dot view file and that is the reason it was not showing anything here and now it is having 404 but once i say template and i say div all iphones iphones like this and now if i reload this page you can see all iphones is there and i don't have to restart my server and that was the reason because i had the pages directory with a capital p so it should be with a small p now what we have to do here we have to show all the iphones plus let's do a little designing on the nav bar so right now it's something like this and i will go on the layouts default layout and first i will say text is going to be larger and obviously uh it's going to be the flex once we do this and it's not doing anything that's not good anyways uh what we have to do yeah so we can do a very nice thing is like we can provide a shadow of large here so this should give us shadow and padding of three and that's good now we have the flux we can say justify between this will going to move all the buttons like this among these buttons i also want to have one button for iphones okay now i have this phone iphones and i need to make sure it is iphone with a slash and why i need slash and i need slash on these places also i will tell you right now first you can see if i go on the iphone yes i can see i have this all for iphones which is the text we have given but if i open my console you can see it says no match found for the location of about now what's going to happen when i click on this about and you will see the thing here so if i click on the about it's actually trying to look for the about page after the iphone so that is the real thing because i have now have to say it's starting from the base and slash that means and now if i reload this page you can see the error is gone or warning is gone actually and now if i click on about it's actually taking me to the about page anyways okay so whatever it is now we have iphones and what i'm going to do i'm going to put all the cards here for the iphone with the name and the image so for the image i just search for iphone 12 right now so maybe i can open on amazon for this let's open it and we have iphone 12 and i'm going to copy the image from here so i think amazon will not going to mind this iphone 12 and yep i have it now i want to show this thing here so what i will do instead of putting it on the assets directory i will put it on the public directory so let's create a public directory and inside that i'm going to create a images directory and inside this images i'm going to move this iphone image we have and the name is iphone 12 dot web p okay but where we should show it obviously on the index page for iphones now here i can simply say i have a div inside div i can have a h1 tag which say i phone 12 and then i have an image which is going to serve from public directory but remember just like we did for assets directory which we had assets and then css but here we don't call public because this is now start from whatever you have inside it and then the name of the file so iphone 12 dot web p so you will not do something like this this is not with the public directory and the reason you will see very soon once we see this thing so maybe i can give a width of 200 only and now you can see we have nice little iphone here okay so why i'm doing this and why we are putting it on the public directory you can put it on the asset directory but what is the purpose of it you can see the url of this image will become iphone directly like low close 3000 slash images and then iphone now let's try to see what if we put the images on the assets directory now we have this and try to create another one so i'm having another iphone and maybe i can search for iphone pro or maybe iphone 12 pro is there any pro yeah so we have iphone 12 pro let's copy this and save this image actually iphone 12 pro dot jpg and now this time i am going to put not this one but iphone 12 pro inside the images directory okay so i can say iphone 12 pro and here it's also pro okay so you can see it's not visible because we have done something wrong yeah it has to be from assets and then images and then iphone 12 pro again it's not having it okay so it is start from slash and now it says hey it's not there um assets images okay so that is jpg actually now finally we have this and what i'm going to do is i'm going to open 12 pro and this time it's assets images iphone 12 pro jpg this is the this is the file which is actually showing that it is inside the assets directory but if i open the iphone 12 only you can see it is images it's not showing like where we have put it and if you have are putting it directly on the public directory then you don't even have to say images in that case your image will be like localhost 3000 slash iphone 12. so whenever you need a file name to be as after the domain name you can use the public directory now what is the real use case of public directory so let me move this inside the images and also move this public pro to public directory and do it like this oops slash and slash images now the real use case of public directory comes when we create robots.txt file robot.txt file is for seo purpose and it need to be almost always from the robots.txt it has it always has to be like this robots.txt it's empty and if i say asterisk like this so yeah you can see asterisk is here so google need that file to be here on your domain slash robots.txt and that's why you need this robots.txt kind of files which should be inside the public directory and not in the assets directory i think you got the point why we need assets directory and why public directory and how we can use both of them so let's move with our next three now is the time for head management what is a head management in nux3 so in nux3 out of the box you are getting the values for careset and viewport meta tags now what are they and how they are useful we will talk very soon but consider them as a good thing for seo purpose search engine optimization now every website need to be ranked on google or various search engines and these will be useful so this means changing the values of these things dynamically within the next three application is the real thing so you can override these if you need as well as customize other meta tags for your site in a different ways and to do that within your setup function you can use the use head you can use the use head and then change the information about the title the base script style metal links as well as the html attribute and the body attribute so powerful is this head management within next three so what we will do we will actually going to set the title for this tab for our page accordingly where we are so if i'm on the home page it should say next three course but if i'm on the iphone's page it should say next three iphone something like that so how do we use that as we already know we need to create a script with a setup and inside this we say hey i want to use the head so just import uh we don't have to import remember nux 3 is doing all the auto import for you now here inside this we can define the title now what is the title for this iphone's page so it's actually next three hyphen iphones okay let's see what we will getting here now very soon you can see now we have an x3 iphone here only for this page but we should see other pages so before going into that what i will do i will just do a little designing here so we have to div for the iphone's images and the name what i can do i can give this so first i will say grid grid of call of four and i provide a gap of 4 also by doing that these are in a grid now i need these two as a card thing so for that i can make a shadow for these and large shadow something like that and this is good and next is let's say text center okay large shadow is good but what happened after that anyways something is wrong with the vs code but code is working fine but for the images i need a div so that it contains as a flex and justify center just by doing that you can see it is here now very last thing is margin top of 10 so that we should have a little margin at the top which is not getting because i need to reload or restart my server and very soon we can see we have the margin at the top if you want you can also give some border so border and then rounded maybe large and this will have a little border around these things and finally i want these to be clickable and move to the respective iphones how we can do that we know that we can navigate using the next link so instead of this div i can try to have this as next hyphen link and in this i will provide the two part two is where you want to move so here this two is going to be first is having slash of slash of iphone slash iphone hyphen 12 and similar to this we can say here hey it's iphone 12 pro okay so this is good and you can see now it is uh clickable you can see there is a hand icon so now if i click it's now become iphone 12 go on the iphone it's now become iphone 12 only that was iphone 12 pro now from screen we need to change our header so for that we can go to the uh dynamic page we have created iphone and the name and here anywhere we can say use head inside that i say title now title is going to be dynamic title which we should get from the router parameter or this computed property let's see if this is working with the computed property or not so we know we need to first say next three and then hyphen and then we say iphone and whatever the route is so i think we just need to say the name but when i say name it is crossed it says name is deprecated but the name we have given is this name so it's not working because of some issue so what we can do we can just copy this thing and paste it like this and boom it's working 12 pro but we need to prefix here i phone and then 12 pro now what if i say iphone 12 only so its head is changed to 12. next important thing is the home and the profile and the about page what about these pages i don't want to put these use head tag everywhere on every website i just want to have a generic name like next three course and then for some specific pages i just want to change these head thing so what actually happening behind the scene if you can see the title is changing so now for this pages title is next 3 12 pro it should be actually iphone 12 pro but if i go to only 12 you can see the title is this one so basically we need to set the title for every pages in our website because we don't want to set the title for every page and go and use the use head so there are various way to do these things first we can go on our next config and here we just say hey i want to do some meta things and i want to set a title as next 3 course just by doing this it will going to restart since the next is change nux configuration is changed so now if we go and for the pages where we have not explicitly defined the use head it will going to use the next three so something like on about page on the profile page but when we go on page where we have explicitly defined the head it will do that it will use that thing okay so we know we can use the use head to define the head but suppose for any reason you don't want to use this kind of thing so what we can do we can instead of doing this and we can go on our template and here let's use a div and inside this div i use a head tag and inside head tag i say hey i want to set a title which is going to be the next three and name and since we are on the template we can easily use the computed property is this going to work you can see if i go on the iphone iphone pro and still it's not working there is some problem let's face this so here instead of normal title it should be the capital t with the title because it's now taking care by the next so nox 312 pro and we just need to say if phone 12 pro and now if i say 12 only so nx3 iphone 12 so this is the second way of changing any head tag for the pages now see it's not just with the title as i told you it can be various things just like the script meta link anything so you can actually add any meta tag if you want so once again if you want to use meta you can say meta tag just like that meta and you can define whatever you want to do or inside this you can just say hey i want to meta tag and then do whatever you want but if you really want to know how these things are working the next three documentation is always open for you and finally there is one more thing which is define meta so define page meta so with this defined page meta you can define whatever you want and you can see it's given like if you want to add any meta tag so suppose for seo purpose og title you want to give the name and the content so you can provide something like this in an array of various object so i think you got the point like how and why we have some issue here and i can just do undo okay so there's some issue if it just solved so i think you get the point how we can use the head and change the head things for the seo purpose now's the time for composables so first question comes in my mind what is composable so when building a front-end application we often need to reuse logic for common tasks so there is a reusability so a composible is a function that leverages views composition api to encapsulate and reuse stateful logic okay so with the nurse 3 there is a composables directory where you put anything automatically imported from view composible into your application okay so i don't think you are getting it too much so let's see how this is going to work in practice so what i did i have four different kind of iphones so 12 12 pro 1313 pro but one more thing i did is whenever you click on any of the iphone there's a iphone picture and then the name and there is a buy now button so what is my goal my goal is to have a cart here which will give me number of items i have on that cart and then when i click on the buy now this iphone will move to the cart cart value should automatically improve or increased according to if i add it or remove it it should change and it's like a state management thing but we will do that with the composible let's see first what you have to do you need to first create a composables directory inside that let's say i'm going to create a state dot js so because i'm going to create some kind of state okay so here i'm going to say export const and here i'm going to use a use state thing in this [Music] view js so this user state is a hook which is actually going to create a state for you or you can consider it as a data and here i'm going to return an empty array but this has to be some name so i say use cart so use cart i'm going to return which is actually creating a state of empty array so how do we use this composables whatever it is it's absolutely easy as we know nux3 will going to auto import if you want to use it anywhere in your template so where should we use this thing so first we need to create a cart here on our navbar so let's go on our nav bar which is on the layout so on the layout we have this nav now what i can do i can move this nav bar into a dedicated component called nav bar dot view and here i should put this nav bar so cut from there and put it here that's become easy and now i will use nav bar like this okay so that becomes so easy for the layout thing and everything is as it is now on the navbar i'm going to first make it 900 so that it will look better and also at the last after the profile i'm going to have a p tag where i will show the cart and for now let's say i'm having one here so this will look something like this so cut with the value of one but we know we don't want the one here we want the value of the real cart state the composable we have created so first create a script with a setup method and then we call it how do we use this composible that's very easy we have named our composable as the used card so we can just say const cart is equal to use card that's that's so easy now we can just log cart dot value since we are on the setup method we need to say dot value and it's going to show me but it's having some error so it says it can't use card is not a function and that is actually true so this has to be a function like this and now if we go reload the page and yep you can see we have this proxy and this is because we have logged here and now we just need to have the length so dot length of this value is zero you can see right now it's zero now what next we need to put this value here on the cart so instead of this i can say cart dot length when we are on the template we don't have to say car dot value so that's become easy and now card value is zero nothing in the card now next task is when we click on the buy now button it should move the information like iphone 13 into the cart so how do we do that let's go to the pages and inside the pages we have iphone and here we have pi now button which i have created on the click event of this i say add to cart that's become easy and let's create a simple function add to cart and here we need to say cart dot value but where is the cart yeah we need to say cost cart is equal to use cart and now i can add it dot push since we know this is a state with the array so it we can easily push some item into that and what i'm going to push i'm going to push name as whatever we have here so it will it would be like iphone and then i'm not going to use the name because the name is having replaced with the hyphen i want to have everything as it is so here we are now once we push something inside this this is going to update the state we have here in the compose composibles since we are using this composables on our navbar component so the value will also increase here let's try this so click on buy now and you can see instantly the value has become one so if i how many times i am clicking the value is increasing now this is not good so what we need once we have added to the cart we first need to check if that iphone is available on the cart we don't want that we just will say remove from the cart okay so in that case we first need to check whether we have any object with the value of name as we have the name here okay so maybe i can create a new computed property called full name and that's actually going to return this thing so something like this okay now let's use the full name here oops full name like this now what next we first need to see if it is available so how do we check inside an array so we can say cart dot value dot find now we will get the cart value so we can call it ct as the card and ct dot name is triple equal to the full name so if we say like um found so this will be this will just going to find it so find will give me the value so if i say log if i say found so suppose i'm not having that in my cart cart is empty so if i click buy now it says undefined but what if i first add it and then try to find so let's see reload the page click on it add it to the cart but it's still it's saying undefined and that is because we just need to say full name dot value now if i now click you can see we have something but suppose this name is something else then what's going to happen if i now add you can see it's undefined so basically what we have to do we just need to find it and we say that if and we use double exclamation mark to make it boolean so if it's not available then we will going to add it otherwise not okay so let's go and reload and click yes it's added if i click once again you can see it's not adding because it's already there but if it is there then we need to say remove from the cart so what we can do we can create a computed property which will say is added to the cart already in cart something like that so we can use it and since we are going to use the cart we need to create the computer property below where we have used the used card so say all already in or just say in cart yeah so this is just the in card thing and it is going to give something like this okay maybe we can use the single arrow just like this and we can make it boolean so if we found it uh if we found it then we can say it's in the cart so if this is returning something we it will be true so it will be in the cart so we can simply say uh like if in cart then don't going do not add it to the cart so it's not working right now maybe we have some issue here uh do we need to get the card like this that's strange so this is not working with the computer property that's not a good thing so maybe we can just create a function so we can call this as function is in cart is in cart and this is just going to be a function and function like this so it should return whatever we have so now i say something like this how about having this kind of a structure reload by now yeah it's added click again it's not doing it what we can do we can just use this function and here we create a span tag with the buy now and another with the remove from cart now when we say this remove from the cart we if is in the cart else buy now okay so you can see now it's turn to remove from the cart by now click remove from the cart cool now let's ex let's do the remove from the cart having the same button with the add to cart function exactly same function but if it is in the cart then add it to the cart if it is not in the cart then we need to remove this from the cart so how do we remove it so since it is again an array so we can simply say this dot card dot value is equal to an array but this array will going to have everything so card dot value but it's not having something like we can simply say card dot value dot filter actually filter and filtering ct and exactly same thing which we have here so we just need to say not of the value so i don't want this thing and the filter out and give me other thing and if we remove everything then assign that thing to the original card dot value good so by now remove from the card by now remove from the card that's working so buy now for the iphone 13 go to different iphone click on buy now that's working get back to the 13 and it's still there remove from the cart good that's really amazing the car system is awesome and working with the user state the composible thing in nextgs vue.js wow next three out of the box provide you the capability to do the data fetching so in next three when whenever we are building any application we always need to fetch data from any api servers so nuts provide use fetch use lazy fetch use async data and use lazy async data to handle the data fetching within your application isn't it really great let's see this in action for this for understanding this thing i have created this login page and a login button is added on this nav bar so right now it doesn't do anything but we have this res rec dot in website where you will get a dummy data so here you can see we have a post for login and when we do the post for this url and with all the email and the password we will get some kind of token this is a normal 200. so let's first see how we will make this login work for that this is the login page and don't worry about this it's just the styling and some tailwind css class we need to focus on the sign in button so whenever we click on this button it is going to submit a form which is holding this input field for email and another for the password so here you can see whenever we submit this form so at submit we want to first prevent the default action which is really submitting the form we don't want to submit we say just on submit this is a function we are going to create on our setup script like this and here it's going to be a function of on submit what we have to do we need to send a post request to this res req url so how this is going to work first what i'm going to do i'm going to say const url is equal to and i have copied it and this is the url now how do we use the fetch thing so first we need to say use fetch and now here we define the url but when we are not defining any other thing other than the url this means this you switch is actually going to send a get request so let's say const response is equal to from this use fetch now what if we hit submit like clicking on the sign in button and see what's going to happen so here we are and let's open our console and open the console click on sign in and you can see it is actually giving a get request to this login and you can see request method is get and since we are sending a get request we get this kind of data which is actually having i think the user detail and whatever it is so we don't worry about this so what we want we want to send a post request so it's very simple as a second parameter you need to just define the method and method is we know it's a post method okay so posting something on this url so reload this page and now if i click on sign in you can see it's taking some time plus we are getting 400 status code that means there is some issue so what is the issue it says the missing email or user name actually in our post request we are not sending any kind of data how we send the data so data will be from the body so what if i send email as sarthak at bitfumes.com now is this going to work let's try click on sign in okay i think i need to reload this page click on sign in pending still 400 and now it says missing password okay so we are sending the email but no password so password is let's say password okay now once again let's try this so sign in and this time it is user not found so there is no user so we need to have this user especially and not any random user and the password should be this one okay so let's once again try this click on sign in and this time we can see we are having this token with the status of 200. wow that's so great but we have this email and the password so let's bind some data what we have to do we have to create a form so form is a reactive form where we need email to be this one and password to be this one like here now i'm pre-filling it because we always use these details and we don't want any other things but we can change it so we just need to say hey there is a v model for form dot password and the same v model for form dot email and now instead of sending this email this body as this thing we just send a form okay so that's good now reload click on sign in and we are getting it that's cool so this is how we actually use the use fetch to not only get the like do the get request but also a post request you can also call this as a body if you want but that's okay now when we are getting a response so let's log response we are getting so now what if i click on sign in you can see it's a pending request that means we need to use a wait here and since we are using await we need to say this is an async function and now reload click on sign in and you can see we are having some data error pending and refresh okay so what next we can simply destructure the data and then we will see what we have inside this or we can get the error also so directly from here we can say data and error so let's log out the data and error both of them so let's click on sign in and you can see we are getting the data and the error also now data dot value if we do we will get the real data which we have so click on sign in and you can see we are getting this token wow that's great now let's have a loader kind of thing so that we will have a loading state so const is loading is equal to ref of initially this is false and then we say if is loading is true then return that means do not do anything but once everything is done is loading dot value will become false but initially we need to say the value is true so if there is something going on then do not do anything that means if user clicked too many times on the submit then it's not doing anything because loading is in progress but if loading is not is in progress then start the loading thing do the fetching part and once that is done then just to click on the loading as the done now we just need to say here that hey let's use a span tag and sign in and then say loading do so when this is going to be visible when we have the is loading true the else of sine in okay let's try this once again and i think that's not working some issue is there oh so we need to say dot value i forgot to use that now once again try this is saying loading loading loading loading loading and finally we have the data cool that's really amazing so this is how we use the use fetch and then now it's time to make the user really log in and redirect user from here to the iphone speech or maybe on the profile page because profile is only for the user also we need to make sure when we log in then we will keep the login state as it is before moving into the next big topic in next three my charges just dropped we need to make sure we keep the data actually we keep the user logged in state as it is so for that we have the composables and we have the state let's create another state and we call it use auth and initially it's going to have a object which says that is authenticated to false user is not authenticated initially okay so this is good but what next we need to use this auth and change the status of is authenticated once user is successfully logged in but what if user is not successfully logged in so if i change the email id let's see what's going to happen so loading and then we get 400 so how do we get the error for that you just need to say error dot value dot data dot error and why i'm doing dot error at the end you will see when i do something like this so if this is incorrect you can see we are getting an object of error and then we get the value for the error so first if we have error so if error dot value if we have something here then we can create a new ref or reactive data yeah let's create a reactive so error and i changed my mind and i want a ref because it's just a single thing so ref is initially null with the error is initially null and i think we need to change the name we can change the name um has error this will become boolean thing so so maybe i can use the underscore error so because this is also providing the error thing so if we have the error then we say underscore error dot value the underscore error means the error ref we have created which is like a error dot value dot data dot error a lot of things and now if it is successful that means if there is no error then what we have to do we have to redirect user to the home page so how do we do that navigate to home page and i just want to return if there is any error okay so that's done and let's try so if successful login if login is successful you can see it's redirected to the home page but if there is some issue on the login you can see uh we are not getting anything and now we just want to show that error something like here so we have the error so at we have here the form above the form we can say um we have a div and it's all only going to show when we have something inside the underscore error if we have it then we just want to show underscore error and make sure it has a background of red let's say 600 and text of red 300 okay and text off small okay let's see something like this i just want to give a padding of three maybe and looks good and if i make it 500 this is good so user has something something user not found okay but margin bottom of five yeah that's good and this is only visible when we have error so this means if everything is fine that's good if there is an error then i just need to give any error and you can see it is here but now we want to persist the login once the user is successfully logged in in that case we just want to hide this login button and only show this profile button so if the user is not login profile button will not be visible so for that what we have to do we first go to our nav bar and here just like we have a cart state we also create a auth state and we use the use auth state or composable we have created so let's go to the composable we have here and now it's actually returning this is authenticated is equal to false object but i think there is some issue if we are using arrow function we have to move this in a simple brackets or a parenthesis this object should be inside the parenthesis so that it will be returned okay so now this is good so what we can do just to show what we have here i say auth dot is authenticated and what we are getting we are getting false okay now once the user is successfully logged in before navigating the user we just need to say const auth is equal to use auth and auth dot value dot is authenticated will become true okay so we are making it true click on login click sign in and you can see now it become true so based on this true value of auth is authenticated we can show or hide our login button so first we should we say we if authenticated if user is authenticated then show the profile button otherwise show the login button okay so user is not logged in and that's why we have this login button so click on login click on sign in and you can see now login button is gone but we should also have a logout button right so instead of this thing um we have login button and logout button i can move the cart like here and like this so what i can do i should have two buttons so maybe i can give a div inside the div i move this profile page a profile link plus we should also have a button that button is for log out okay and if user is not authenticated then show the login so yeah we have log out we have profile so let's give a margin left of 4 for the log out yeah that's good and then when we click on logout i say log out which is basically changing the state so let's create a function and here i say auth dot value dot is authenticated is equal to false wow so this is good and click on login successful logged in that's good now we have profile and the logout button so if i click on logout yeah i am log out that's great let's remove this about button and move this iphone and card on the left side so how do we do that just removing this and making sure this thing is these three things is inside this div okay so we can make this as a flex like here and we can give a class of margin right of four same not same here yeah the home iphone and card login button click here profile and log out that's really amazing but next what we have to do we need to understand that when we are logged out that means user is not logged in then user will not be able to visit the profile page that's a bad thing that means we need to understand about the middleware middleware in next three is really powerful and essential thing so this concept is important and you need to understand it very carefully now in nurse 3 it provide a customizable route middleware framework you can use throughout your application ideal for extracting code that you want to run before the navigation to a particular route and in our case there are actually three kinds of middleware in nux3 first is anonymous route which are defined directly in pages where they are used so suppose you have created one middleware and you have to use that middleware in a particular page then comes the named route middleware which are placed in a middleware directory and will be automatically loaded via a synchronous import automatically import basically when used on any page so the route middleware name is normalized with a kebab case so some middleware become some hyphen middleware so anonymous means just defining inside the page name middleware is created inside a middleware and finally comes very important which is a global middleware which are placed in the middleware directory with a dot global so you can call it like mymiddleware.global.js something like that that will be the thing so there are three kind of middleware we will see all of them one by one let's start with anonymous middleware but the middleware used in our application is by having this profile page visited only when we have or the user is logged in so authenticated or logged in so we know that the first one is the inline middleware that means you can go on any of the pages we want for the profile page and then inside this define page meta we can define our middleware this middleware is going to be an anonymous function which is doing something so just for now i will say i am from middleware so if we try to visit the profile page then we should have a console log on our console so let's go here on the slash profile and you can see we have this i am from middleware that means it is working fine and also we have one more middleware one more console log on the server end that means this middleware not only works on the front end also works on the back end that means on the server side okay what actually we want to do is we want to restrict the visit of this profile page if user is not logged in so first let's see how we can restrict a user to not visit this page what if i return false inside this let's see what's going to happen so when i return false it says route navigation aborted to profile page and this is exactly we want now what if we do the login and then we try to visit profile page you can see i am clicking but i will not be able to visit since this is returning false so it's very easy we need to first say const auth is equal to use auth and then we can say auth dot value dot is authenticated whatever the value is that will become the middleware that means if user is authenticated it will become true that means there is no issue but if it is false then we don't have any rights to visit it okay so once again let's reload this page so it's loading infinitely what happened so if we can see on the server where which we are running we are getting 500 next instance unavailable so what happening is we are having this auth use auth outside of the defined meta or basically outside of this middleware and then we are trying to access that since this is running on the server end server doesn't know about auth because it has created on the client side only so what we have to do it's simple we just need to move that from there to here now we are running the use auth on the server end also and in that case when we run this we don't have any issue so right now initially is authenticated is false so we will not be able to visit the slash profile page yeah you can see right that now if we are logged in so try to access the profile page yes we can easily do that so this is about the inline middleware but next comes is the named middleware so for that you need to create a directory called middleware inside that you can create any uh file and i'm going to create auth.js and what if what we want actually we want to extract this logic into another file which is auth.js because it would be many other pages which need similar authentication middleware rule to be applied now if we just copy and paste these things that's redundant that's repeating ourselves and that's not good thing so we need to extract it in a named middleware so named middleware always going to export default and it's define middleware actually define next route middleware and then what we have to do this is defined next route middleware like this and it actually needs something like this and here okay so we have this middleware and inside this we can move our logic logic is very simple it should go from like there to here is this going to work and how we can use this auth middleware here now instead of giving a function we just need to define or give the name of the named middleware we want to use in an array because sometimes you want to have multiple middleware so that's why it's an array so here we are everything is fine let's go reload the page it says about it restart try to login click on the profile and i can easily visit the profile i log out try to visit the profile and it's not working okay so this is about the anonymous or not anonymous but inline middleware then named middleware and finally comes the global middleware which will be applied to full application so how this is useful some suppose you want to know how many times any pages are visited so suppose something like that so maybe i say page visit dot global.js remember to make any middleware global you just need to add the global keyword so export default next define next route middleware so here we will provide something like that and let's see if this is working or not working globally so it should log on every route change so we have this and let's reload this page oh one more thing is remember although this is working here but we should make it kebab case like this and now it's a global middleware we don't have to worry about this so working globally and working globally click on login working globally working globally on the server end because it's only the navigation on the client side not the server side so that's why two log here but only one log on the server end okay so since we want to count how many pages we have visited uh let's create another state and we call it export const use page visit visit count okay so this is going to be the use state and here we just return zero okay so right now initially value for page visit count is zero but here i say const page visit count is something like this and whenever we have a page visit then we say dot value uh i think value plus plus yeah so we are increasing the value that's good but we also want to show somewhere so maybe just on the left of login button we can show like here where maybe after the cart we can show total page visited is and we need to first add this so page visit count is equal to use page visit count and we just want to say hey whatever the page visit count value give me that so right now it's two initially it is two because uh one is for the back end and one is for the front end so page is visited or maybe you can call total route changed so something like that so margin right of four okay so total route change is two then we go to the home three iphone four and login become five sign in six and something like that so this is all about our global middleware and we have seen how we can easily flex easily move between the the states of our application so amazing i really impressed with the middleware thing in next three we are on the edge of completing this amazing next course and the amazing topic here is server routes so what are the server routes so as the name suggests some other routes which are only available for the server and yes that's true so nuts automatically scan the files like api for the server routes for the server and middleware for the server and these directory to register api and server handle with hot module replacement support each file should have export default function which is like define event handler just like we saw on the middleware we had the defined next route middleware we need to define define event middleware define event handler so basically we can create any api we can create any route and we can create any middleware for the server end only let's see how these things are going to work okay so first we need to create a directory called server inside that we need to create a file called api and inside api i'm going to there's a directory called api and inside that i will say iphones.js okay now this is the file which is there and these this is the iphones.js file is inside the api directory so it will be like a api now i say export uh default defined next um what's that define next define event handler so event handler okay what it is going to do so i'm just going to return and returning hello with the hello okay now this is a api that means we should call this api from our use fetch now what if we go on the iphones here we have a lot of iphones here but now i'm going to do one thing here i will use use fetch and see this amazing thing when i use the codes here vs code is recommending the api we already have and that is really good thing so const and i destructure the data from here and just log data dot value to see what we are getting and you can see we are getting hello here now since we are getting hello here this means whatever we return from here will be available on our application right so we have four iphones with the image and we can just create a array const iphones is equal to and provide the name so iphone 12 so iphone 12 pro and then become 13 and 13 pro now what i'm going to do i'm going to loop over these things so that we don't have to repeat ourselves so it's very easy v for and then inside this i say iphone in iphones then provide the key and the key is actually iphone and this two part for the next link will be now a dynamic thing and like here and then here also i need to say iphone and the source of the image also become a dynamic thing with images and then the name which is like phone but like here okay and that's it and in that case we can remove all the next link we have so right now we can see we are back with the same position but this time we have very nice one single element with a proper loop on these iphones now since this is working we can move this array and move that array here on our api and return this array instead of returning the hello this means we can let's uncomment it and this means you can see we are having all the iphones here from the api so what we can say we can say const iphones is equal to data dot value so i just comment this one and see what's going to happen okay so something is not wrong everything is fine and there is some issue here it says hydration div mismatch and there is some issue it says the key of slash iphone is not good so what happened here on the key part is the key is a slash iphone no anyways so this is a normal warning and we can uh look into it so what actually happening is i think initially it's not having anything and then after that it will have the data so maybe if i can say something like this yeah so now it is working so that's good and all the data of the iphone's information is coming from our api so this is we have done with the server api thing there is one more thing called server routes so what we can do with the routes thing now suppose i am having this iphones directly in the route so what happening here so now instead of giving as api route if we see we have a new route called just iphone not the api slash iphone it just the iphone so this basically means whatever you put inside the api is exactly same whatever you put on the routes it's just the content of the api is prefixed with the api so you have to say api if you want to get anything from the api directory but if you don't want to use api prefix then you can put any file or any server end inside of the routes directory in that case you don't have to do anything and everything will work absolutely fine and middleware you know how to do middleware thing middleware is easy so create a directory called middleware just to do same thing and whatever logic you want to do to restrict the user now since we will going to deploy this application on a front end or client client-side related platform so we don't want to use the server things so that's why i will use the iphone array on the client side and all these things is just for the learning purpose for you so we have learned amazing things in nurse 3 and this video this course and this project is really i believe helpful for you to create something better something amazing with next three so next task is to deploy this project on the server now it's time for the deployment we are going to deploy next three application which we have created to netly fire now with nux 3 if you go on the documentation and if you see on the deploy section here there are basically two types of deployment one is node.js server where you will have the back end also with the front end since next three is actually a full stack framework so it's not only provides the front end but also the back end but with netlify we are going to deploy as a static hosting so in that case you need to run the npm run generate so before moving into the netlify let's see how we can make our application ready for the production so if you go on the package.json there are two important commands written here one is the build another is the generate so let's see the difference between them and how this is useful so the first thing we will do is npm run build so when we do the build it will actually build not only just for the client side it's also built for the server side so you can see now we have this command node and output server index.mjs so all the build part is now inside the dot output directory and we have the public we have the server but we are going to run the server end on the public you can see there is no index dot html file nothing just the server file so when we run it we are having this localhost 3000 which is working absolutely fine no issue on this but what's going to happen when we say npm run generate so you will see two amazing things going to happen with this generate so basically this generate will create a static file for you from this next years where we don't have any server thing so if you go on the dot output directory this time you will see that server directory is empty that means we don't have the server and we have the public with the index.html but the build part for this or the static file is really inside this disk directory and we have this index.html so we can directly run this index.html and it will going to serve the application for us so we need to run this thing and then we will see how we will going to work on this thing okay so let's go on the netlife click on login and you can log in with any way you want i have already logged in so let's get here and now let's click on add new site import from an existing project which is deployed on which is actually hosted on github not deployed okay so you need to authorize the github and once it is authorized choose your organization and then search for the repository you want to have so i'm searching for the next repository and here we have the next course 2022 now what we have to do here we just need to say npm run generate and then the directory is this directory from where we are going to serve our application now click on deploy and wait for this deploy to finish so let's just wait and once it is finished we will come back very soon you can see it's now deployed so let's click on this link and you will see our application is ready with everything we want so it's having all the tracking for the route changes so when we go here and here now we have all the iphones we can click on buy now cart is updated remove from the card card is updated again and click on login so login is also working and since we are logged in we will be able to visit the profile page let's do the log out and try to visit the profile page and we should get the 500 error for the route navigation about it everything is so great but you know i can do one more thing i can have a custom domain which is next course 2022 and just to verify it says it's not available i can say next gs course 2022 and okay so actually this is not the thing we actually need to update for the netly file subdomain not the real domain so now let's try next three course 20 20 22 save this and yeah we have it so let's visit this one and we are having now three course app so this is how you understand the nux3 you deploy it and everything is ready i hope you like this video and if you really want me to create something else just comment below your views and whatever you want me to create you can just go to youtube.com bitfumes if you have not yet subscribed to bitfume's youtube channel and if you want to follow me on twitter here is the twitter profile which is twitter slash start savvy we will meet in some other videos till then goodbye

Channel: Bitfumes

Views: 50,250

Keywords: nuxt 3, nuxt 3 project, nuxt 3 tutorial, nuxt3 course, vue 3, vue nuxt, vue nuxt project, vue nuxt 3, vue 3 nuxt 3, nuxt 3 course, nuxt 3 composables, nuxt 3 components, nuxt tutorial, nuxt tutorial 2022, nuxt course, nuxt3 course 2022, nuxt 3 crash course, nuxt 3 full course, nuxt 3 beginner, nuxt 3 deploy, nuxt3 tutorial, nuxt3 project, nuxt3 server, nuxt 3.0, nuxt 3 js

Id: 5dQMQ1BwUyc

Length: 169min 16sec (10156 seconds)

Published: Tue Sep 13 2022