Fullstack Ecommerce App: Laravel 10 and Vue 3 Js Auth User Login and Register

all right now in this video we are now going to unload the login and registration our components within our application so in this tutorial we're going to create the login and the registration part of this application so now where we're going to begin before even we go further uh last in the last video we just began with the view and I noticed something that we had the when we install the view this code was white I believe uh some of you saw this uh that is if you you checked well now there's an extension here which is called a prettier so PTR code for MATA you can install this extension the moment you installed it is able to detect the The View JS code and then of course it is able to add the format for the code that we are we are working with and this in this case interview so just come here to the extensions and then look for prettier and then install it and then you're good to go all right so um so before we continue further we created this components here which uh we are going to deal with them later so we have the add product edit um product details list View and so forth so we are going to come back to this and add chords whereby we are going to uh that is to create this Cloud functionality but for now let's leave them for now let's first deal with the login and registration which is very important for any View application now remember you need to have the laravel application running because we dealt with the last video we discussed about that is in the previous in the laravel path we discussed about the reliable authentication so we used things such as laravel Santa if you have not watched that video you can go and watch it now um so now let's now let's unload the authentication within View so the first thing we are going to deal with here is unrolling the is creating something that we call a store.js file and this install JS file is going to create in other words you're going to create what you call a view X store to under the authentication of our application so this will allow us to check whether the user is logged in from any component even including the navbar so this is what I'm talking about so when you go to view documentation and precisely when you go to vox.vjs.org there's something we call viewx if you have not heard of it before what it does is that is that it is able to to handle the state of of our application now what do you mean by state that means for example we have something that we call mutations so mutations are basically just functions that you use uh is basically the way you update a state of your application within a view X so what will happen here is that looking at this you can see here we have example State and then we give Define this particular keyword here which is count and then we give it a value of one so what will happen is that when you use mutation here we are able to call uh we are able to Define this uh particular function keyword here which is increment and then we call the state which is this one here and then here now we mutate the state by incrementing the count value so what will happen is that when we increment account value of course you know it's going to add up itself so here it's just going to detect the change and then the account will be incremented so that's how mutations work and you can also pass a payload to me mutation that is uh additional data within the um the mutation itself so for example you can see here within the state we can also add n which will be presented by this number which of course stands for for a number so basically um that is on the mutation so mutations basically they deal with the state of the of application and then now we also have what we call the so I'm explaining these two because are the ones that you're going to use in our application we have what we call the actions and what actions will do is that actions since mutations deal with the state of the application the actions will commit the mutations so committing this means that it will execute or run the particular mutation so here we Define the state count to zero and then limitation here wherebyte is able to to determine the state of discount by incrementing this count that is state DOT count then here on the actions part here we are now going to define the increment pass it with a context and then now we are going to commit this mutation by calling the increment here which is now the one which has this state and then now we are able to um to execute that particular action so you may want to come and check more about this in this documentation here read more about the they have also have nice videos on the same whereby they explain to you well about the actions and mutations but in this application I'm going to explain to you further how I have used it so as to create the login and registration of application so let's head back here and then I will explain more further on the same so I wondered before we create the the login actually we can just come here on the components part you can just come here actually we were supposed to create this in the last video so you create the login.view then the other part is create the register and go to view like this now once you have these two created remember now we are going to write code in them now for our store.js here what are our need us to do before we do anything else let's first install the view X because view X remember it is a state management library for VJs and for you to use it you need first to install it so here I'm going to run npm install and then view X then at next like this so here what we're going to open here is that now we are going to have it installed then our application all right so let's give it a minute all right now we have the the VX installed so once now that is installed what I would like you to do is to come on the source now within the source here is where we're going to create the installed Dot yes so here I'm going to click this so store.js and we're going we're going to have it created like this now within the store.js as I've said uh we are now going to create the that is now we're going to it is going to under the state um management um of our application that is for login and registration now so now the first thing here I'm going to do I'm going to import the going to import a create store here and then we are going to import it from view X so view X Crystal function is going to under the create store plus and then the next thing here actually um we are going to install a router so that we can also work with our router here because here I'll need to import a router so let's just do this quickly so let's um let's install the router so that now we we also work with it so let's quickly install the router I just forgot about this this is also very important so npm install so you're going to run this command View and then here we're going to have a router and then add next so that's what we have and then let's install this so this will take a while as well now since you have the router installed so now this is what I was meaning so on this part here we are going now to have this so we are going to in to import the router from our application so you're going to have import router from that is from this router here and the reason we are doing this is that we import the router so as to control the routing actions within our application here so we import the router and as you can see the router is found uh we are what we are going to create actually which we just created here so on on a source here let me associate just create this router.js however we also going to handle something within the router.js so don't worry about this or is going to be connected well so so let's import the router from the router um within our application and we have installed the router so here the the other part here is just to create a viewing store so here I'm going to add this export default so export default then you're going to call the create store is it here so create storage here I'm going to have something like that now on this first part of our create store here we are going to do we are going to find Define something we call a state now when you come back to the documentation here is what we call State here in this state what it does that it's it's it's like um it's like for example you have a toy and then the toy has um it has mutations it has actions and mutations could be for example let's say the toy has a button which has on and off that could be the mutation then the action is when a kid accesses that toy and he wants maybe to turn the the to press one of the buttons of that toy so that becomes the state so the state basically is now that toy so here what what we mean here uh is I use that scenario the toy or the analogy is that we are going to define a state object which is going to contain all the reactive data that we want to share across all the components and this uh and this reactive data is when the person is logged in and when the person is not um it's not logged in so for example logged in log out and so forth so that's what we have here so here what I'm going to do here I'm going to Define this state and then here I'm going to have that so here I'm going to Define this function and actually we are going to Define it as we continue so I'll show you where we'll call it from so here I Define um is logged in and then I check the local storage here I call get item and what item am I getting this is the token I'm getting from the remember in our laravel application we were able to to come up with a token using the laravel center so this token is the one that we are going to access from our server and then once we access it we are going to store it within our local um browser here and I'm going to show you when we'll be accessing the the settings here that is within our our browser so let's just continue so we are getting that token and then um so that is uh so we get the token here so I need to have that one there now here I'm going to define a mutation and as well and as I've said the mutations are just functions that directly mutate the state so here I'm going to up a mutation and then this mutation here what you're going to have is that I'm going to to give a state remember we have said limitations deal with state within our view here so here they just deal with the state here and what state is this the state here is when the person is logged in so we are going to need to Define one state here so I'm going to give this as this way then here I'm going to have um state so I give this one as a state sorry so I give this one as this state here so this is what we have so I give this one as the state now the state here I'm going to call that state I've just passed in within that node and then I'm going to call is logged in and then I'm going to do this one to be true so what I'm doing here is that I'm defining one of the stage and this one is going to observe when the person is is he logged in it is going to be turned on so here you can give it for example on so remember the analogy I've just used the state here is the toy example say we have this is a toy so the toy has on and off and then we have um so the mutation here is just a button here which has the on and off so here we could have this one is battle like this so I want you to understand this using this um analogy here now so once you define that now here we're going to to go to to login and sorry not login because you have already defined the login you're going to go to the logout so this is cups and then the log out you're going also to pass state so this is a state and then here we are going to have it like this so on the logout you are going to sort of Define state DOT is logged in and then here if the person has logged out of course it's going to be false that's what we are going to have there so that is on the mutation part so here is just on remember button scenario so on and off remember this is the state here can represent the toy now so once that is done we now need to go to the to the actions and then the actions here we're going to have I'm going now to define the action remember I've said the actions they commit the mutation and from our documentation here we have the action part not only this concept is very powerful when you are building large applications uh this is this is very powerful so here we have said for example you can see here we use context dot commit so that you can commit this um mutation here whereby we have defined the increment and we have passed the state so here I'm going to have this login action that commits the login mutation here let me just bring this one down a bit this so here I'm going to have the login and then here the login I'm going to pass this to Cali braces then here I'm going to have the commit and then the commit here we have the I'm going to commit this using so here I'm going to pass the login like that all right so here we commit remember I've said now here the actions here could present the kids who are now playing with this toy so here they the the mutation here odds for example the the instructions this one is just all the instructions and then here the kids here can decide either to turn this on or off and actions here are the kids who are able now to commit that action here so that is the the whole uh concept behind that part there so here I'm going also to commit the that is the logout action that commits the logout mutation and then I'm going to use something we call a dispatch which is going to lead us to navigate Dot Login action so when you look at the same concept here we have what we call dispatching actions here so because now we have we are now done with committing the mutation here now we need to dispatch the action and dispatching the action here is actions can be triggered with for example now when you call Storage dispatch we are just now dispatching that action and of course it basically means we are just now executing the the different action here so here we are going to have the log out and then here we didn't log out here we are going to when to pass that bit and then here we're going to have this patch so once we have this part here we're going to have the the commit so what is the commit so the commit here is going to be log out like this so when the person logs out out of this application and then lastly you're now going to patch this uh this action here by making the person to navigate to to login like this and that's what we do so so basically here once the person is um is what's the person has now logged in and then we also have another one so the person to log out so the dispatch here which is navigate to login we're now navigate him back to login uh page of this application so that is what we have on that part so let me just copy this now lastly here once the person is um is logged um out here now we will direct him to login to the application again but I am going to call the router dot push and then here we have this so here we have name and then here we have the login like that and this login of course we are going to create it within our application so that the person can be logged in it can now be turned to the login page again so as you can see here we have just done the commits for login logout and then we now send the person back again to log out of this application right guys so that is that is it on the store so this store is very important because the reason is to why I wanted to start with it is so that we can now undo the the state of application so that we can handle this place when the person is logged in logged out and so forth now I want us to head over to the the router.js and we are going to create several items here so within this router we're going to have this import and then here I'm going to have um create a router the second one here so create a router and then here within the create router here I'm going to have create web history and then from router just like the way it is now let's define itself now once we have that now here the next part is just to import several things that we are going to deal with now here for example here I'm going to import the login uh which is the login component so I'm going to import login from this so here we're going to add the components like this then slash login dot review remember we have this we defined it now so the import login from components slash login is of course this one because we can see it is on the Source folder and then the so the the dot just stands for the source folder and so forth so let me copy this one and paste it here for register which also going to do the same thing like that and here I just need to change this to register so once I have these two the next part I'm going to create here is what we call a const then routes so close the routes then this equals to now here what I want to do here I just want to define the parts for default for the different um um login and register and now we're also going to come back to add product edit product details list View and so forth but for now let's just Define for the two so here I'm going to define the first thing and it's going to be path and the pad is just for our login so where we can find the login so it is in cuts so here I'm just going to Define that or login and then here I'm going to set a component um so the component here is login like this and then down there we're going to have this meta which is going to be what do you mean by Meta Meta means that here when I say I Define meta here and then I Define true it means that here I want to mark this out as let me just add this comment mark this route as public so it means that I want this route to be accessible on the public because the person has to come to the login path so that you can now be logged into this application so here I mark this route as public so that the route can be seen but once the person is logged in you see for example when the password is logged in is unable to access the the is only able to see the logout right and as well as now when is not logged in for example this Adam routes for add product and details I'm also we also going to add a meta but you're going to make them first so that when the person is not logged in is unable to see them now I'll copy this the same thing here and then just down here we're going to have or you're going to have for the register and you are going to do the same thing so we're going to do this we're going to make it through them here I'm going to uh register like that okay and then now here now once you are done with that the next item is just here we need to add this uh semicolon like that then down here what you're going to do here I'm going to Define const which is route the router and then I'm going to call the create create router then here sorry here create route and then what we have here is this so here I'm going to have history to create web history should be this one here and then here just have this and then lastly the routes now this part is the one that is defined in here because here we want of course when the person like navigate to any route uh this is going to under the history of the routes that the person goes in and out so here we we need to have that one as defined now when I create const router and then it goes to to this history and then web history down here I'm going to have this item here I'm going to have um router before each then inside I'm going to add these two from and then next and then I'm going to have this so now this one is going to be when I'm Define router before each two from my next is so that we are able to check the different um routes within our application so when the person goes to the we are going to check if the person is for example is authenticated whether the if is not authenticated then we don't allow him to access the particular route so that's why we we want to undo this in this part here so the first part here I'm going to have const and this const is going to check if the person is authenticated like this so check if is authenticated which is equals to these two signs called storage so local storage of course here we just want to get the token or local storage so here we check um you check if the user is authenticated and if the token is stored so that is very important for us to do that now down here I'm going to add another if statement here which is going to go to and then dot meta remember the meta is the one that you have just defined here which is set in whether the route is public or not so is 2 and then meta then here going to our DOT public like this then here I'm going to add these two and then is is authenticated all right so we have that and then yeah we have to have this so here once we check so here what we mean here is we check if the route is if the route is not public and the person is not authenticated of course so this is what this pass this part means if the route is not public and the password is not authenticated then we are going to redirect him to the login page of this application so so here we're going to have next then here I'm going to have a name like this and then here I have this login which we have defined so far and then once the um once we direct him to the login page or else if the person then as the right credentials then will allow him to navigate to the next part of this application so here we just call the next yeah we just have next like that so this one is going to be this way then down here we're going to our export default like this and then the router so here we have this in this way we do have an around this part so here this one you need to have it as one so this one needs to be one and then so yeah so that now it comes to close on this part here so this is this is what we have so far on the router.js and that's what we need to work with so far so then now the next part we can come within our login.view and start something here now we are on the login.view so here we are going to have a template and within the template here of course here we Define our HTML within our view any view JS application so we're going to begin on the first part here I'm going to to create um so we are going to create a div class let me check this one out so I'm going to create a div class like that this div class because I'm going to add some CSS I'm just going to give it a container like that and then here down here now let's begin with something here now here what I'm going to do here I'm going to define a form so I'm going to have this like this so from add submit add submit that submit dot prevent then this one equals to login and then here I'm going to uh sorry I'm going to our class which equals to login form like this now what I mean here when when you are the the so this is the form now what you're doing here is that when we Define in any view.js application when we Define submit at Summit dot prevent what we mean here is that the form will be submitted and then we are going to trigger a login method which which is going to be triggered and then the dot prevent which is a modifier of course it would prevent the browser behavior that is the default behavior of the browser which is a page refresh so here we are just avoiding a page uh refresh so that is the whole idea behind this concept here so that is the main id idea behind here so here we have this is equals to login I don't know why I have an error here but we'll correct it as we continue so uh the next party I'm going to have is uh input type and input type here is equals to email so we are allowing the person to input email and then I'm going to call the model which is email here and of course here we're going to have a placeholder which says email and then required is going to be called as well so they're required here and then you close like this so the V model is used for two-way data binding within our VHS application when you talk about a two-way data binding is basically is going to observe any input that is going to be given by the user and then it is going to update whenever a user keys in a particular input then the model is able to detect that and update the component in other words the form of course so here um I'm going to have another input type this input type is going to be it's going to be equals to password and then here we're going to have a v model so the remodel here is going to be equal to password like that then of course you're going to have a placeholder which is going to say a password and then I have the required like that and then we close this that way now lastly we are going to have is the button or the submission the pattern type here because it's going to be submit like that and then here we have the login remember this is what is within all our well application when we created that place whereby we have the email and password so we're just now creating so that this can be identified within our laravel application sent back to the form now this error is going to disappear as we introduce the rest of the code so here I'm going to have the script but then or edges now the script part here what you're going to do here the first thing here is to do an import of the axios remember we installed at just sometimes that is in the last video so here I'm going to call the axios and should be able to identify it okay because you already have it installed so here address is now going to make HTTP requests within our application so the first part here we have is export export default remember we created the export default for example when we created it within our router.js so the work of export default is to make this to be available from to the rest of our application so the rest of our our components so that's what export default does so the the first part here we're going to Define is a data and then this data what it's going to do here it is going to return a given data so we're going to have this so here so what data is that the data of course is the email and the password Here and that's so true so we initialize the form input data which is now the email like this and then down here we're going to have a password like that and then here we are going to add this so once that is done we have that one and then we have that so next is to have this extra one should not be there so this should be there but um going to have it so all right so inside it it's all going to have the methods so the methods you are going to Define them there now what are the methods the methods are the ones now which are going to handle um we call them asynchronous methods which are going to under the login process because you are in a login.view so here I'm going to define the async then there's a sink is going to be a sink login which is now the function there we are going to put them in a try block statement whereby here we're going to find this or const response it goes to await members I think goes with a weight um if you have watched some of my tutorials I've done a tutorial on this so here we're going to add that okay so here we have this and then we are not supposed to have that one there sorry I didn't okay so here comes response so it is going to await so their weight here is just to ensure that we are conducting the server and then when you conduct the server we await the response so that now we can validate the credentials so here we have email like this and then here we have this dot email and then here we have password so here we have this password like that then once this is done let's close this like this now down there we are going to have um something so once we have that done we're going to have now so here we are now checking the we are now checking the the user credentials to the server validation so we are now identifying that so that once now we send this for validation so the next item here is just to have an if statement which is going to call response a DOT data dot token like this and then there we're going to have a local storage which is going to set item then take the token like this so here we call the response data Dot okay like this so what we what we are doing here is we store the token in the local storage for session management because here what we have done here is you have um requested for these two for validation and then once we request this for validation now we identify the the authentication we check for the authentication token within the server response once we check the authentication because we we are validating these two and then of course checking the token then now we store that token within our local browser so that now we can access it so that you can ensure the person is well authenticated now this next part here we're going to have is what you call this store remember we already have a store and then here we are calling a commit and then within this commit here we call this login like this sorry so what you are doing here the update stores are state we reflect the users logged in status so here we want to look at the from our store.js here you can see the we are checking the status here remember the mutation is all about the state so here we check the state is the person logged in which it should be on so if the person is logged in then you are going to allow him to access the rest of our application so here sorry this is small so here I'm going to add this dot at dot outer and then here we call that push like this and then this was this simply we are now we are now allowing the user to navigate to the home page so that is what we have on that part and then here we are going to have this catch Block in case there are any errors within in this part so here we get to to type any errors to our console which is very important so this error could say something like this an error or card so that is what we have on this part here so here how many should we be having so here we have this we need to close this this way this like this this two and then here I believe here we had how many so from the start here we have these two and then we have this one here so here we need to uh so here we need to have one more this actually I've just discovered this error should be is coming from here so this one needs to be closed that's this way and then down here you need to have one two three four so we need 12 of them and you're good to go so this is so this is now the login View uh down here we're also going to add some styling but not now so now let's go head over to the register dot review now within the register.view we are going to have uh the same items uh that is what we similar to login but just some few changes so here we'll go to our div which is going to be the div class we're going to give it a form uh container like that now within the form container here um okay so let's now begin with the form after that so here we're going to have at submit then remember at Summit is dot prevent which is equals to so we are calling the register method and then here we have class so class here is register four so you're going to use this one to style it okay so now we have that so here now we're going to have three input Fields the name email and password so name email and password so some of these uh they are similar to this actually I may want to copy this to that I don't keep typing them so you're going to add this let me push this a bit so the email then the so you're having the the name so the first one here is going to be name let me copy that one so here I'm going to our name then the view model here is going to change to name okay so the placeholder of course is going to be them like that and then the rest are going to be the same we're also going to have a button type here just like this one that we add here for register so you're going to have it going to have it there and this one I'm going to change it to register so that is our form with our three input we have the V model for the dial for the data binding as I've just spoken about so down here now we're going to go to the script part the script part here we're going to have is that we are still going to import our axis the one that we imported here so I'm going to just copy it then have it there at the start and then here we're going to have the export default which is this one here in the export default we'll still go to our data and the data we are going to uh return so what we are returning here is just the it refills the name email and password so this is just a data model for the form inputs so here we're going to have this so I'm going to uh this and event software email we have password sorry I'll stop this and then this one is going to be that way and then here we love so down here we are going to have the methods just after this so the methods here that you're going to have is um so we are still going to use their sync method that we have just spoken about so let's think now this this time is going to be the register here we are going to add try to try um block so what we're going to start here we're going to make a post request to the register endpoint within our laravel application with the name email and password as data so what we're going to do here we're going to Define this const response and then you're going to call your weight uh so their weight and then the address here and then the address dot post so here we are now going to the the register endpoint like this all right so this is what we have this one is going to close later let's add this so the first part you're going to have is name so you're going to call this name and then here we're going to have we just copy this so this one is going to be email then this one is going to be this dot email and then this one is going to be password now once we make this post uh request to the register endpoint now we then the person will be registered because now once you make this um they are sync register then now it does the access we are using the axis to do that so now we get to register that person within our laravel application so it is just as easy as that now the now once if for example anything goes wrong it's always good for us to to show errors and before we do that let's close this one like this and now let's go to after this one here in the cuts a block here I'm going to pass this keyword error here so that we can check out any errors and now what you're going to have is that if there are any errors you're going to put them within our console dot error then here I'm going to say um error card so we have something like that and then here we call the error that is you pass the error for us so once that is done you close this I'm also going to add an if error here dot response like this and then here we're going to have something like this so let me copy this one here paste it there now what you're going to do here we're just going to say this so here we're going to add the error details and the error details we're going to call them with error.response like this and then dot cut so here we are just outputting out the the errors that we have within this application that is um what are the details of the errors that we have then you're going to work so this should be one two three four five and then you are now going to Output them within our console so let me see here we need to have so this one you need to have this then close it that way so that is our register Dot View and that's what we expect within our register add view now once that is done we only have some several items remaining such as so the navbar is now the next part here within this application so here we now need to establish another which we already did you create no we did not create so we need the navbar so that we are now able to navigate through these different routes here so I'm going to create Enough by here now I'm going to call it now bar.view this number here is the one that now we're going to use so that we can navigate in our application so we're going to add a template there then inside it I'm going to add enough the two of them now this navbar are going are going to be based on if the person is logged in or not so we're going to start with what we call a router link like this and then it's going to a particular place so for our login and registration we're going to have something like this logged in that is log in and then we are going to use something called V if within our view JS which is going to check if the person is logged in or not so we're going to use is logged in like this and then we close that and then here we now pass the the link that is the navigation link so here we go to the register so the other one is for the register so I'm going to have this so within the register we're also going to check if the person is registered in this location like this now we can also add these pipe signs so it's just to make sure the two links are distinguished together now the last part is just to have the log out so here I'm going to add an href with an hashtag and then this logout is going to go to add click so when the person that is um when you click the logout button The Click will call the logout action and then that it is it will call the log out um button so that the person will be logged in remember we spoke about this one Within the state when the person the commit State when the person is logged out so that is what we have there so log out and then here we have the V if so V if is going to be is logged in like this and then here we close this then here we have the log out like that so this is this is very very important so we we're just checking this and then ensuring the person is we check if the person is logged in or not now within the script here we're going to undo something very important remember we we are dealing with them we are using view X so here what I'm going to do here let me import it at that place we are going to import two items with all our state and map actions and what map State and map actions does is that it enables to it it will enable us to convert what we call computed properties for example this one makes our code to be a bit cleaner so when we are using a map State and map actions what we are doing is that instead of using things like such as for example um the last time this Dot something um but now what this is what this uh when you use this dot something it means that you are calling a particular variable directly within your application but in the view address when we use that is in view X when we use the map State and map actions what we mean here we are avoiding what we call we're avoiding what we're avoiding uh calling this variables directly within our application so we don't want to do that but we use this view XL pass to uh to map the logged in state to our computed property so that is what we are doing so here I'm going to have these three dots and then here I'm going to have the the map State there and then here I'm going to have is sorry I'm going to have is logged in like that and once that is there sorry there's something you forgot here so on top here what you're doing because we are converting this map state is logged in to our computed property we're going to have of course the export defaults the export default like this and then here um let's add this before we do anything we're going to have we're going to have the computed property like that and then here I'm going to check this and then I'll paste it here because now we are going but in this map states like this to a computed property Remember map state map actions are view view XL pass so you just need to know that it's very important so here we close this like this and then here we're going to uh methods and what you are doing here we are using the map options so as to which is a VXL bar to map out the logout action to a method so in this case here we have defining the methods and then here we're going to Define map map actions like this and then inside it we're going to pass the log out functionality there and that's what we have within our we have the export default with the computed and then we have the methods that is logged in and is logged and log out and the reason is I've said we are using map State and map action is to make the code cleaner to avoid us uh accessing our variables direct directly within our application so that's the whole idea behind the map State and map map actions so you may want to check this within our view JS documentation here actually everything has been captured here within the in this documentation here link they do have so this this should be so should be able to find so you can see it's already here so this is the whole idea here right guys so now the last two parts is just to update the domain.js and the app Dot View So within our app go to view we're going to have something like this here so our app dot view um so I'm going to get rid of this like this um and then here I'm going to so here I'm going to call the navbar that we just created like this and then here I'm going to so let's have a space there so down here I'm going to have a div so this div is going to be div ID and then this is equals to up like this and then here I'm going to pass the router that we just create created this router puts in the router view in this part here so that is this is just down after the the div here within our template so this template needs to come here like that now on the script part here what I'll do here is that I will import the number so I'm going to import the number and then the number is going to be from Nava Dot View like that then export default there we're going to have this so here I'm going to register the navbar the navbar component within this application here now I may not need this so what I'll need here is this I need this knob here like this and then here I'm going to add this so that down here I'm going to give this as up in this then the script is going to be that way now when we do this is that we ensure that we are passing the number we are defined in the ID app which is our HTML that is our HTML elements and then in the router view is the one that is going to pass the different routes and remember they are the ones that we created this part here so these are the routes that we created here okay so what else do we need and then here we have we have imported the navbar from the navbar.view and then the components that we Import in here is the of course the navbar and then here we are calling our app like that now there's this part for main.js and there's something you need to do there within our main.js we are calling the create.ap from view which of course we have imported so then we have app which is from app.view which is okay now the next uh part here we need to do is uh let's close this one just like this so here I'll need to add this so here I need to import um store because remember we created store so I need to import store Dot store from it is like this so here we are this one we are just importing The View X so the other one here that we want to import is let me copy this one and paste it there is the router so import the router there then the router here is going to be router.js here it's view router so we import the router to Js so once that is done um let's do something here so here I'm going to have this let me uh before we do create app and then the mount so here let's create a View application instance so for example um I'll have something like this app then this equals to create app and then inside here I pass up like this then up to use here I'm going to pass store and then now now this one what you are doing here is that we are creating a View application instant which is updated which is an updation of um view 3 so we are registering The View extra and view router within the application so when you say up to you store we are registering the store The View X store and then when we say app go to use and then a route I hear we are now registering our view router like that and then lastly here we're going to mount the application to an HTML element within our application so you need to have this setup in this way for it for this application function correctly all right guys so let's let's um let's run this application and see now as we are running this application take note of um the register View remember here it is going to this endpoint uh last time we did a base URL so what I meant here is that instead of us are repeating this way whereby I have to copy that and then add it where add it here so for example I do something like add it like this so since I don't want to do this that's why I created the base URL here so we just have that one like that so that's the whole purpose of Base URL so here I need to run npm run sub and as well I need to also to have my laravel application open because you're also going to use the laravel application so that we can now register uh somebody within this application so this is our laravel application so I'm going to start PHP Artisans serve so I'm going to have it uh running actually I should have opened a new window I just close the other one and let me just open it again let's run it all right so now we have our view um started the battery you can see we have errors now these errors are brought by eslint remember we installed this one at the start so it is for example the first error says component login should always use a multi-word now this is not necessary because basically it means that for example you can have something like user login user register something like that so that's what we mean by multi-word So to avoid this what I'll do here is that I will go to view you have this file called view um config.js what I'll do here I'll just use this module dot exports and then here I'm going to give it a names on Save and then here I give it false so here I'm just disabling the as linked um which are still important but then for this application this is linked it should not be this one slint on Save so this Ctrl C let me run this again let me just open this up again let's run this okay so npm run so so that you can compile it again now you can see it as combined but the errors have just disappeared because I've got this line of code so what I'll do here is alt click and let's see if all is working well within our application we can come to the console here and check what error we are getting so we can uh so yeah we have linked on save so here this is set to force so what you can do here since we have set it on first we can right click and go to inspect and check from our Dev tools what are the errors we are getting so when I go to the console here try to run this again so the error must be here so the error is coming from let's go to main.js now main.js so what I need to do is that need to have this app so this update Mount what it is doing it is mounting the application to an HTML element with the ID app and of course this is what remember up dot view is the one that is responsible for rendering our application so it is able so it is rendering it as an ID because the initial one that was there I deleted it and I used this one so here so this must be the error that is coming out here so you can see here now what to be able to get login and register so here I can click on login and then I can click on register and I'm I'm able to navigate on the tool so now let's try to do some let's try to register example client then here we have tumor running at gmail.com and then password let me just give password like this and then let's try to register now we can go to the inspect here and try to see what is happening so let's go to the console so what I'm getting is that error could not establish a connection I believe my laravel is working now as I'm inspecting this errors as you can see here we so what I've noticed here is that the issue with the with the course policy is that my view application is on Port 88 but here it set it to 8 000. so what I need to do here for them to match I need to have them within the seminal cost so that they can so that the domains are not different that's the whole idea of the course policy so that this error will now disappear when I run because this is on Port 88 and this is running on localhost 8 and now 88 so both of them so when I log in with my details you can see now here I'm successfully logged in and we can refresh this so this error should disappear now I can log out but as a log out I can see there's an error here so the error says name login parameters so okay so this means that it cannot find the name for login so let's check uh let's check what let's check our um our router.js so here I can see I forgot to add this so we need to add the login like this I can copy this as well and add it to register combo router but then see what will happen so here I have these two and these two okay so now let me try to log out again and I can see I can log out and log in to this application and as well I can log out and we don't have any errors so those are the the errors that were there so the name needs to be there and then if you don't want to have the EAS lint issues you can disable this one but in this part of the code and then on the issue of the course uh you need to set your alarm to run on the same port or on the same domain with your view.js application all right guys so now in this video we have done we have successfully uh managed to create a login and registration and be able also to know something about the view X which I highly recommend you visit the documentation to learn more about it and then um so in the next tutorial we shall now be finishing up with this the rest of the components remember add product edit and then product details product list Dot View so when the person now gets logged in to this application is on is now able to be able to see um what is inside this um application so that's what we're going to do I'll tell you that forgetting you can also add some styling for our register and also our so let me do this quickly so for us to add this we are going to come up with something called Style and then it's going to be style scooped then here I'll paste this style in here this style in here will enable us to Under The Styling for this application of apps here so we're just setting the for example the form container you set it to display Flex justify content Center and then align item Center and so forth just some styling so I will I will hover the documentation for this entire laravel and vgs3 so that you can reference this style in here so I believe when I save this and run this we can have this this so that's what we have and we can also do for the registration like this so for the registration which I love something like this so let me just get it so here what I'm going to do here is here I'm going to work this time then it's going to be cooked like this then you're going to have this in this way so here we also set the form container display Flex justify content center line item Center register form display Flex Flex Direction column gap of 20 with padding for the radius and so and box Shadow and so forth so so that is for the register page so here when we log out you can register this application here right guys and I believe there is validation here so that is now on this application and remember there's something else actually I'm forgetting to show you now when this person gets logged in in this application for example when you navigate to the login and then we log this person in what we have here is that when I go to sources and then we go to sources then go to application then go to local storage and then localhost you can see here the token that we created within larabelle is now this one which is now stored within uh our browser here as the local storage here remember this we did this one when we we met the login this is what we have here so you can see what we came up with here well Bible said once the login details and are being validated then let us store the token and retrieve that token that token will be now used to when and when you are navigating through any component within our application all right guys so let's meet in the next video

Channel: Web Dev Trainee

Views: 3,508

Keywords: vuex, pinia, ullstack Ecommerce App: Login And Register Components With Vuex, Login and Register Components, Vue Js login and Register components, Laravel and Vuejs Fullstack Ecommerce app

Id: 1QIPlN70CFY

Length: 73min 53sec (4433 seconds)

Published: Thu Aug 17 2023