Vue JS CRUD with Laravel API | Laravel with Vue Tutorial for Beginners

Hello friends welcome so in the previous video we created the laravelas API and I have used insomnia the make a get request post request and so on now in this video I'm going to create a vue.js project and use that laravel API and make a crowd for skills so here in the insomnia we have made the scale get skills all the skills and we have a empty data and we have links because we in the controller so let's open HTTP controllers API skill controller we return paginate let's remove this because I'm not going to create pagination and let's say all the return of the project all the skills sorry and now we have an empty data good let's go and make and create a new skill so in the post request send skill created now if I come here we have one data and also as you can see I have changed the name the biscal name and the area and the slack the B URL so this go and also change them back the name just I want to know here is the name and here is the slug nut the URL what we are going to create we can leave it like this but just I think is more okay that and we can update of course so if you come here you can see we have laravel.dot and laravel and again we have name slack react react and if I update now to the level Dot and laravel send feel updated come here we have react but if I click again yeah we updated and we can delete so let's send go now and yeah not found because we don't have we deleted that good okay now let's open my item I think I have here and let's say npm in it View at that test hit enter give it the name of view arrest API no type script no jsx yes view router no Pina and no no no CD in the rest API now sorry The View Rest API npm install and then run the npm random but first i'm going to open the project with vs code and then let's run the and then let's run the npm around the and as you can see by default the vid is coming with the port five one seven three if you don't like that you can change in the vid.config.js so here we can add server and we need to change the port for example the three thousand save this and yeah now we have the three thousand let's go in the browser and let's navigate in the localhost 3000 here is our project okay we need to make some changes here so first I'm going to uh go in the up.view and remove this component here remove the image remove the hello world and also the Styles here I'm going to install title CSS go to the components because I'm going to remove all of them let's say delete in the views we have the about view we don't need that so let's delete this and I'm going to leave the home view let's remove this from here and welcome also here and inside the router index uh yeah now we don't have that so let's change the home view for now like this just do not have an error yeah we have on the home and about okay go to the assets delete the days and the logo and go to the Mind CSS select all and delete them okay now I want to install the Italian CSS to this project so let's open titancss.com get started choose the framework guide we use vid and also we use View let's run this npm install title in CSS both CSS and Auto prefixer so I'm going to terminate and paste that in then npx wcss in it okay then we need to add these two lines in the content inside the Titan config so here inside the content save then add the base components and utilities inside the Styles in our case in the mind CSS and the last thing is the run npm on depth so let's go here npm run Dev and I have an alias for that yes like this and open the yeah we have some changes as you can see now let me go in the app and instead of something like this I'm going to give it a class of marks with the B7 XL MX Auto and if I come here yeah also this router view I'm going to cut and paste in the main with a class Max width 7xl Max Auto and I'm going to give it a mean edge of green like this and paste that let's go inside the index and here in this div I'm going to give it a glass BG plate 200. close go to the browser and yeah we have something like this okay now let's start and work I'm going to leave it on view just to be home like this and as I said the about is not going to be about it's going to be skills the name is going to be skill index but let's go in the views here and create with create a new folder and I'm going to name it skills and here I'm going to create the skill index Dot View the skill create Dot View and also the skill edit skill edit Dot View okay now let's go in the index here and the name is going to be also skill index you can name it what you like I want the name like this and now let's import inside the views we have the skills and then the skill index okay let's remove this commented here and let's copy this paste three times two times this is going to be uh skills slash create also here we need to change that to be scale create for the name and also kill create the component here the same thing we need here to be skills and we need the ID and then edit and change the component which is going to be skill edit okay I think we are okay right now let's go and see if we have any errors no error yeah we don't have the about where is this about coming from it's coming maybe from here yeah we need to say skills and skills here refresh and now we are okay we need some Styles here so let's say just add the class to be margin or PX 4 and Pui two I'm going to give it a margin right of four and let's say PG indigo 600 on Hover the B BG indigo 700 or 800. okay and I'm going to say around it like this let's save and let's see how it's going to look something like this oh we need to say also the text to be white text White very good and let's do the same thing or this one yeah in the knob now I'm going to add at last B margin 2 and padding two only padding yeah okay friends now let's if I click here we navigate to the skills and we don't have any error but we don't have the template as you can see here so let's go in the skill index and I have a shortcut for to create a view script with setup and template here and save now refresh we are okay and let's do the same thing for create so we set up and save and in the scale did V setup save okay now we need when we go to the skills I'm going to display a table here this to get the skills and make a call to the rest API level so the same we make in here and get all the skills and display them in the table I'm going to use styling CSS for the styles and when we add the button also navigate to the skills create and create a new skill and also the buttons the edit and delete skills but all the logic I'm going to do in the we can do in in the views here so in Seal index we can make a little logic here but I'm going to make the logic inside the I'm going to create the composables only for the skills so let's go inside the source and I'm going to create a folder I'm going to name it composables and here let's create a new file I'm going to name it skills dot Js and here what we need let's first create the composite the create possible let's say export default the function and we need to give us a name okay and for the name is the common convention type say use and then the what name you like so use I'm going to name it skills okay and then what we need here we need also the return an object with a properties we need to import for example in the skill index or create an edit so what we need here in the for the logic we need first as I said when we come here I want to get all the skills and display in the table so we need the skills for that we need to import the left from view so let's say import RF from View and now let's say here uh where to get a constant the B kills it'll be evil with a ref and initially it's going to be an empty array good next I'm going to create also another constant for single skill and let's say he post their left and an empty array again and let's start with them and we are going to see the work so I'm going to create a consent and say get skills is going to be equal with a sync function and we are going to use actions here so let's say open the terminal inside and I'm going to say npm install axios like this close and now we need to import the axios also here import access from axios and make a call we need to make a call so the this URL so let's copy and say const response to be equal with a weight axios Dot get and give it URL which is this URL then I'm going to say gills and dot we need to access the value because the skills is there left here reference skill dot value is going to be equal with response dot data dot data again because uh we have data returned from laravel resource okay now here I'm going to make also get kill to get single skill so let's say const get skill is going to be async and here we need the ID to get a single skill so let's add the ID and let's say a weight axios dot get and the URL now for the URL instead of repeating this I'm going to cut this one and go up here and say axios dot default dot base URL is going to be equal with this URL here and then we just say get skills down there just get skills and we need also the ID so plus the ID we have here and we need also the create a constant response to be equal with that one and then you say a single skill dot value because it's a ref it's going to be even with response dot data dot data okay so we have skills and get skills we need to store new skill so let's create that const and I'm going to name it or skill you can name it what you like is going to be equal with an async function and in here we need the data we are going to send so our skill we need the name in the slack and with the name of data here and also we are going to look for the errors if we have error so let's say try and cut right and then Cuts if we have any error and if we have and with the check first if the error dot response Dot status if error response status is 422 I'm going to say let's create the const for errors up here const errors to be equal with RF and I'm going to assign with an object empty object and now down here I'm going to say errors dot value is going to be equal with error dot response Dot data dot errors like this and if we don't have an error here up here we can say wait axios post axios Dot post and we want to post this URL so we have here post just we need that skills and we need to add the data here okay now after we creating a post we need the returned back to the skill index because this store skill we are going to use in the store create page and then we are going to return to the index so let's say we need the router here so let's import the router import they use router from view router now let's create a constant here and say const rotor is going to be equal with use router like this and here we can say or Elder push router Dot push and where we want to send that we want to send to the skill index so let's say let's give it a name which is skill index and also I'm going to await this and I think we are okay with the store skill so we get the skills get single skill and store scale now we need to update and delete so let's come down there and say create a constant I'm going to name it update skill which is going to be equal to an async function and also here we need the ID and the data to update the skill but for the data I'm going to use the skill because when we go to the skill edit I'm going to make a call gets kill and then display the skill name and uh Slack so for that we are going to use that skill I'm going to show you so just don't worry update skill and I'm going to say trying cards again here try and then as for the errors if we have if we have any error so let's say error the same thing as up here if we have any errors if the error status is two or two we are going to say errors that value error response data dot errors now we're going to try first send the request so say wait axios dot I'm going to say put and the URL is skills slash plus the ID we have here and we need the data as I said but here we have it up what we have in the skill dot value okay and when we are dating again we are going to return to the skill index so let's paste that in I think we are okay now the last one is to delete the skill so let's come here and say constant let's name it destroy skill also this one is going to be a sync function we need the ID that delete that and let's say wait axios Dot delete give it the URL which is skills slash the ID plus ID here and when we delete in these skills now we need to update the all the skills so we need the code the get skills again let's see again a weight and get eels and also if you want to show a pop-ups so let's say here if window .confir uh are you sure okay and are either so if we are going to say console is going to return or the device is going to send that and I think we are okay now so destroy update store get single one and get all of them skills single skill errors a router let's return now them because we need to import in the skill index create and edit so down there we can say return skills single skill all the skills get single skill I get all the skills store skill update skill and I think we have the delete skill oh yeah and the error so delete oh destroy sorry sorry destroy scale and the errors we are going to return all of them and now let's go and see if we don't have any error no I'm going to open a flowbyte.com just to copy the table and display in the skills so go to Docs and I think we have the table somewhere yeah tables and let's copy this the first one the default one so let's copy go in the skill index and inside the template I'm going to add a div with that last B uh margin top of 12. and paste that table in let's save and let's go and see yeah and we have something like this okay now we need to get the skills there in the index and display make a V4 and display all the skills so first let's go up here here we are in a template in the setup I'm going to import the EOS skills use skills from skills the composables and I'm going to also import the unmounted from View and then I'm going to distract what we want in the skill index from the use skills and let's say const what we need here we need all the skills we need most of the cat kills because we are going to call here and that's it I think for now let's say use scales that's coming from the use skills and now unmounted I'm going to call that get skills here and let's see if I save this and let's go and the refresh because of The View scale index We Have Skills but we right now is empty I think let's go and got a scale index click Send yeah we have an empty skill let's go and create one save you Js vue.js here one more and laravel also for the slug laravel and now let's go to the skill index we have three of them I refresh and yeah we have three skills in our skill index now let's go and make a V4 inside the table we need to display uh the name and the slot so let's say name slug remove this one and remove the price here this is going to be because we are going to add the edit and delete buttons there so I'm going to remove this one here and these two and I'm going to say V4 kill in skills we need a key which is going to be ill dot ID and here display the skill name and let's copy and paste this change the name to be clock like this and if I save and go and refresh yeah we have the name in the slug and we need to add also one more for the delete edit and delete so let's copy and paste and let's say right now just edit slash delete okay we have something like this and I think we are okay right now uh now we need to add a button here and go to the skill create and create a new skill so let's work with that in here I'm with that a div with the class the B Flex and I'm going to say justify and margin 2 and padding two and then I'm with that a router link it's going to go to the we need to bind this because I'm going to use name router link from name which is skill create I think is let's go inside the index yeah click create so give it the name skill create okay we need to give it some classes but let's leave it for now like this and let's say a new skill I'm going to say and I think we need to add a single quotes here refresh we have that new skill just we need to design a little bit so let's give it some classes and I'm going to say PX or py two let's give it the BG indigo 500 on Hover we're going to change that to be PG indigo 700 text is going to be white and I'm going to give it some rounded classes around that sorry around it like this and let's see like this okay and as you can see when we hover we say here skills create now if I click we navigate of scales create and in the skill create right now just let's say here create and yeah we are in the create good let's go and come here to the form inputs because we need to create a form and uh I'm going to select this default input here let's go and create a form so inside here I'm going to add a d first so let's say div with the class the B margin of 12 and inside let's paste the form and for now just add the form and then we are going to design that I'm going to give it a div inside the form with a glass that be base y of a six and paste that input two times let's save and let's see what we are going to get yes something like this and we need to change this a little bit so in the form I'm going to give it some classes so let's say class that'd be a Max with MD I'm going to give it an MX Auto and padding of four let's give it a White MD and rounded MD and let's save and yeah we have something like this now we need only to add a button and let's go in the skill index and I'm going to copy the classes we have here because we're going to do the same after this div let's say a div with the class margin of the B or and paste that no sorry we need to save button first button with class and let's say store save and we have this kind of form here okay now we need to create a form so for that I'm going to import from View now we can use wrap or reactive what you like so let's let's use react and let's create the constant form to be equal with reactive and we need to create a name which initially is going to be empty and clock also initially and empty three then we need to send that form so when we clicked this we are going to say on submit call the door skill and the star skill is going to come from the skills composable so let's import that import use skills and from the use skills we are going to distract what we want so let's say const and here we want the store skill and also we don't want the errors because we need to display the errors people with use skills okay and here we are going to say store skills and add the four okay now label for let's say label for a name not default input but name here and in the input ID is going to be name and that let's say now V model form Dot name okay let's go down and say label or slug let's say slug here not ID in default input but ID Slug and let's add the V model to be form dot lab like this let's say type submit to this button and I think we are okay now on submit we need to say also.prevent they're not the prevent reloading and we are okay I think oh we need to show the errors as well but let's go here and click Send we have only three let's try now if we can create a new here and with the site test and test say store and you we redirected back very good and we have also the skill as you can see okay and if I open and click Send yeah we have the very good we don't have any errors okay now let's display the errors because if I just say send we have 42 and nothing happened here so in the in here when we have the label let's close this we have the input or the name after this I'm going to say let's add the div and let's say here not us but V if if the errors dot name if we have an error for name I want to display a spawn and why we go there so let's I don't know so if we have that I'm going to say a span and say a class the B first give it a text to be small and then text or red 400 and inside let's say errors dot name and give it the first one in the array and let's copy this div here and do the same thing on the second so down there just change from name the B plug we need to check for the slack let's save it let's go up here and refresh click store okay cannot read properties up on the fines name errors dot name very good so we check if the errors have name but yeah we have imported the errors from the use skills or any store skill we say errors that value errors response I dot errors and I think we had the same thing here save and reload here go to the console they store and now we have the name field is required the slack field is required let's say uh Test 2 here but for the slug I'm going to give it the same slack and we in the Lara value we checked for The Unique so let's say now say store yeah the slug has already been taken let's say test two store and now we have that okay very good I think we are okay with the store now let's work with the edit and delete we are in the skill create everything okay let's go to the skill index and here let's work with button down there when we have delete and I'm going to copy that uh the button we have here lists or we need a link not a button just copy the class and let's go in the skill index and say remove this and say here uh router link and it's going to go to the name skill edit and now here we need to add params so let's say params it's going to be an object where the ID is skill not the kill but skill dot ID and let's give it some classes oh we need to paste that what we have here and say edit like this click save and yeah we have the edit but maybe just change from indigo the B green yeah and I'm going to add the button now after this one let's add a button with that class and say delete okay and I'm going to say also here or on up here I'm going to say uh space X2 like this change the color to beard and I think we are okay now if I click the edit we navigate in the skills to edit let's go to the skills let's go to this one skills for edit and so on okay let's go now and work with the skill edit I'm going to copy the form we have in here so or let's copy all the diff let's copy all the div and paste it in the inside the template but we need to make changes of course at first let's import what we want here we and we don't want the store but we want to update update skill so let's import here use skills and also on mounted import unmounted from view because I said uh when we update a skill we are going to add here the skill dot value so in the skill edit we are going to make a call get single skill and if we make a call we assign the skill value to this response so we have a skill and in here we are going to get from the distract from the use skills the skill is single one also the get skill the update skill and also the errors like this and now let's say unmounted called the get single skill but here we need the ID we can access the ID we can because in the index.js we say here skill indeed ah we added ID and we can add also probes the B true with that now if I save and let's go up here and I'm going to say const probes not like this but bro like this is going to be equal with Define props this is going to be an object and we need only the ID here we accept on the ID which is going to be required for sure we need that but true and let's give it a type of thing and then we can say here props dot ID okay now down there when I say we model not form name but skill dot name because now when we make a one amount that we call the get skill and it's method is going to assign data with this skill and we said we display the skill name and there the skill plug here now when we say update skill note form we call the update skill but we need the hot the skill we need that ID sorry not the skill because in the update uh update skill we need we accept only the ID here so let's go and say we need add the ID we can get ID from the road so it's a dollar sign Road Dot params.id the get the ID here now if I refresh okay what is this version skills ah yeah we need to add in the skills the get single skill we need that here slash enter refresh and yeah now we have laravel here go to the skills let's select this test too we have test Shield that's you good skill edit and on click we say update for the errors we display them just let's see if I leave it empty store the skills is required and if I let's refresh we have this show and let's update only the name so let's say dot dot dot here and yeah we updated everything okay let's go and edit again and I'm going to change this the bit test to so that we just test and this is used here so we're going to get an error let's see something like this and let's go back to test to store the slab has already been taken if I say test to like this store and yeah everything okay we are okay with update with with errors now let's work with delete let's go to the skill index and when we delete on delete we are going to call the destroy skill and here we need the ID so let's go up here and let's import that so let's import the destroy skill and down there on the button we're going to say add click call the destroy skill and add here the scale ID let's save it only that we have imported the destroy skill okay refresh and let's delete this yeah are you sure no okay nothing happened are you sure okay uh yeah we updated the skills and again okay I think we are good now so we display all the skills go to the home first skills we display all the skills here we can create a new skill let's say test store Okay click edit if I remove we have the errors and if I update just say dot dot dot dot dot here we have both of them let's go back to test and let's go back here okay we need to change that not store so in the skill edit the B update the button like this okay and now for the delete as you saw we can delete that's it about this video friends I hope you enjoy and see you in the next one all the best

Channel: Code With Tony

Views: 4,499

Keywords: laravel, vuejs, livewire, laravel 8, laravel 9, laravel crud, laravel 8 tutorial, laravel 9 tutorial, laravel rest api, laravel rest api tutorial, laravel api tutorial, laravel api authentication, laravel api project, Laravel rest api crud, laravel full rest api, laravel 9 rest api, laravel 9 rest api tutorial, laravel 9 rest api jwt, laravel api with vue js, laravel vuejs crud, vuejs laravel crud, vuejs laravel tutorial, vue js laravel, vuejs laravel project, laravel vue 3

Id: kFw1uRvJwIg

Length: 57min 43sec (3463 seconds)

Published: Fri Oct 07 2022