Intro and Overview of Vuetify.js (Build a CRUD client with Vue.js)

hello friends welcome to coding garden with CJ something's weird that yeah like that cool today's episode is an introduction and overview of beautify jeaious play that intro song awesome okay today I'm gonna try something I made a song about the episode and I'm going to sing and play it for you now bear with me you can just come back in a minute when this thing is over here we go [Music] [Music] but when you build something you J yes you probably need more than just CSS for that you'll need a [Music] here we go Wow and we'll unpack all of that stuff I just said that's me this is my computer thanks for bearing with me through that intro song alright so today we're going to build an app with beautify j/s and let's essentially review what I just covered in my intro song so first we'll do a quick overview of what is material design if you have not heard of it then we'll do an overview of beautify js4 that will create an app with the view cell i hook up beautify and explore all the different types of components that they have first material design by Google so if you're not familiar with material design it is a design language from Google so they essentially created the specification for how applications should look at me mute that and so this this ad spot kind of just shows what your apps would look like if you're using material design but it's important to note that material design is just a design language it is not an actual implementation of material design so if you look at Google's material design website it's basically a walkthrough of how you should build an app using the material design guidelines there's all kinds of stuff in here it talks about animations and what your UI component should look like if you look at components it tells us what our buttons should look like it tells us do's and dont's tells us what list should look like and if you've ever used like an app on Android or Gmail or something like that it uses material design so you may have used it without even realizing you were using it but the point here is Google made this specification this design language that said if you're building material design it should look like this but it is just a design language it is just a description of what things should look like in do's and don'ts but it's not actually implementation for implementation there are many different CSS frameworks material design Lite it's straight from Google and when I say CSS framework think bootstrap or I'll show materialize or foundation these are essentially a set of CSS rules well that will give you pre-configured components so if we look at these essentially we can get buttons that look like material design but all we have to do is add these classes to our elements and they'll appear like they do in the material design specification so they have classes for cards and chips and dialogues and lists and all the different things that are described in the design language you actually get them implemented with CSS so there's material design Lite materialized CSS is an extremely popular one again their website is very similar to something like bootstrap where you can look at different components and grab the CSS to use those and mùi CSS is another one again it just has other classes that you would apply but essentially you get that material design look and ultimately these are just CSS frameworks so they implement the designs and give you all the CSS classes to use each one implemented differently but ultimately attempting to recreate the design language will implement the design language created by Google and so those are CSS frameworks but typically when you're building an application in a front-end framework there are typically component libraries that exist that implement essentially all the things you saw on the CSS frameworks but they give you components that you can actually use in your app instead of having to add classes to everything for these there are quite a few so view material was the most popular one for a while but beautify j/s has become pretty much the most popular view component library but if we look at it and we look at let's say components of course they look like you would expect but if we look at the code it's actually a component you use inside your you app that will give you those styles so by default if you just do MD - button you're going to get this default button like that and so view material is one materialized components someone essentially wrote a wrapper around materialized CSS so you can use under the hood it's essentially using materialized but you get these access to these components like MD button there's also view MDL which is material design lite but they've implemented as CSS components well as components for a view JSF so lots of others but tonight we will focus on beautify j/s so I have the description from their website beautify is built from the ground up to be semantic easy to learn easy to remember and this means that whether you're developing your own application or onboarding a new developer beautifies or right as you speak components and properties make development a breeze cool an important thing to note is that unify implements the material design spec to the tee so every component is handcrafted to bring you the best possible UI tools to your next great app development doesn't stop at the core components outlined in Google spec through the support of community members and sponsors additional components will be designed and made available for everyone to enjoy fantastic let's check out their website so if you visit beautifies is calm it just presented as a material design component framework it's super cool you can click on getting started it tells you how to install it in an existing app they have templates for the view CLI that will actually create a beautify app will create a boilerplate app that has beautify already installed and just like those other things we're looking at we can look at components I always go to buttons as my example it's the easiest thing so you get buttons like that but if you look at the source code for it it's just V - button V - BTN and then you tell it what color you want I think by default it's just like a gray color and we can see some more examples down here yeah so like a flat button would be V button flat and that just appears like that we're just getting started but that is my break timer take a quick stretch look away from the screen get ready to write some code yeah so they give you the code for to use these components in your app I've got lots of cool things obviously the card this is probably the most well known material design component you see this all over the place what else expansion panels are cool like little Lisp you can click on them and they have content inside of them just like that it's pretty cool dialogues so you can open the dialogue that's a full-page dialogue which is pretty sweet it's just like a floating one another one a menu on a button yeah I believe yeah so this one if you click outside of it it doesn't dismiss you have to click the button to get rid of it menus like that all kinds of really cool stuff so basically I'm gonna build an app and as we build the app we're gonna explore the docks and use all the components that we can so back to the quick start and let's take a look at my checklist so what I am going to do to do is build a client for a crud API that I created in a previous video so if you tuned in to the coding garden kickoff or the second live stream I essentially built a back-end API that allowed us to crud products and then I built a front-end for it with vanilla Jas so I'm gonna use that existing API but build the front end with beautify and so if we just take a look at that API I have it running locally on port 3000 we can request API v1 products that gives us back an array of products every product has a title a description a price a quantity and an Associated image we can get individual products by going to products slash ID and that will give you one product we also are able to delete products by ID or update products by ID this API lets you do all of that so I'm gonna build an app but it's actually use this API to build yep all right let's get started in this directory right now I just have those markdown files but I am going to use the view CLI so I'm gonna do a view in it web pack and let's call this intro to beautify if you're following view you might know that they do have a seal a new CLI tool coming out I haven't tried it yet it technically is still in alpha or beta I think but it changes everything it's actually it actually seems really sweet it gives you a lot more options to customize but for now I'm just gonna use the existing one intro to beautify jus I'll do that I am gonna use client-side routing I don't think I've covered that in any previous view video but as I build out the app I'm gonna have separate routes for like the list all page the read one page the edit page the create page each one will be a separate route we'll use Airbnb no tests soon I will soon make a video where I use tests not today though let's go so we have generated the app let's take a look at the QuickStart on the V defi website so you can bring it in from a CD in if you're actually like building kind of a view app from scratch but we're using the CLI so we can do something more than that essentially we're going to install the v2 Phi package from NPM use it in our main j/s and then bring in the default CSS files so still generating but I can go ahead and do this so they do use the Roboto font and material icons so I can add this to my index.html here so up at the top I'm just gonna bring in that and essentially that gives us access to the default font that beautify uses and also any icons if we want to add some icons into the app let's change the title intro to beautify cool and it's done sweet so I'm gonna do go into that folder and do an NPM run dev this should start a web pack Auto refreshing hot reloading dev server on port 8080 there we go we got our basic view JSF so the first thing I need to do is install beautify so let's do that yes so make sure you're in the view directory do NPM install beautify that's going to grab it from NPM add it to your package JSON and then we can bring it into the app cool and now we need to import it in so that is what I need and if we look in the source directory and at mange is this is the entry point for our whole view app and essentially we need to import beautify up here and then use beautify right there and essentially by doing this it makes all of the components that are inside of you defi available to any of our components that we create so we have access to what's just thinking of the abbreviation the V dash button so like by doing this view use now anywhere in our app we can say V button and it knows where to find it so that's what that means okay so I added that I also need to add the CSS and we can just import this into our main file also so I can throw this right here and essentially this takes advantage of the web pack CSS loader that already gets pre-installed when you generate a view app when it comes across this it knows that that's not JavaScript but it'll extract it out as a separate CSS file and allow you to use all of the the Styles built-in to beautify so once we've done that we gotta make a layout so on the defy site if we go to application layout we can go to predefined layouts and we can see some various ones so there's the baseline layout which gives you like your top bar your bottom bar your nav over on the Left same thing but with your nav on the right complex where you have like a left nav and a right nav Wow look at that who needs that many knobs I know I don't also they have a dark theme which is pretty sweet you can just set you just put the word dark on your app level component and it inverts all the colors of I wouldn't say invert they have a dark theme pre-installed they show you like an example of how to recreate YouTube using it very cool I'm gonna go with baseline so I can go to this example we can click source to view the source of this page and essentially all of this stuff is what I want inside of my app template so I'm gonna copy this in and then kind of break it down like what's happening here so in my app top view for now I'm gonna get rid of that image in that router view and also this div and just paste that in and I believe I need to tab but this is all over one okay and so when you're working with beautify the top level component should be V - app and you only need one of those so by putting it inside of my app top view all of my routes are gonna get loaded inside of this so because this is the top level that's all I need and then my routes can use any beautify component that they want - you'll notice that the navigation drawer has a V model for drawer essentially this needs to be a boolean that's either true or false whether or not the drawer is open so let's add some data data is a function that returns an object and we're gonna say drawer is false so when the app loads up the drawer should be closed and cool we get a basic beautify app notice the drawer is closed by default if I set this to true the app will load up with the drawer on the left hand side open I'll leave it to false actually let's keep it true why not I like the drawer sweet let's update that copyright to be the current year and you'll notice right about here this is the like the center area where our content is going to be loaded and so right here is actually where I want to do the router view so I'm gonna get rid of that essentially right inside of the Vav layout will be router - view and this loads the view router so whatever component should exist on slash will get loaded into the app break timer take a quick break away from the screen stretch it out if you're watching live be sure to throw a message in the chat love to hear from you [Music] cool let's see what happened awesome so by adding this router view right there now when the app loads the URL is slash so by default it loads that HelloWorld component that comes built in with the app and it loads that right there you'll notice some of these other attributes these come from beautify so there's justify:center and align Center let's just get rid of those for now and it automatically just puts the component in the top-left if I want to do any centering I'm gonna do that inside of the individual components very cool and for now we'll also get rid of pretty much everything except for this one let's just call this products and yeah so it says products built in to beautify because I brought in the icons it allows us to use material icons so these are straight from Google material design icons let's see if there's anything for like product no list yeah I want to use this icon because essentially the home page is a list of all of the products so let's do that actually I'll use a view list if you click on it it'll tell you the name view underscore list and so in here what I need to do is view underscore list and this V icon is built into view defi and essentially you put any name of an icon from material icons and that will show up so now that I did that we get a nice little product list icon thingy right there let's look at the view Docs to see kind of what we just did there if we look in icon and they tell you exactly how to do it there's different sizes for icons you can make them larger you can color them you can put icons inside of buttons clicking the code here will show you how to do that and if we're looking at layout some interesting things in here so first the navigation drawer that is definitely in components we can see more information about it there but essentially this is what you see on most websites that nav across the side there's lots of options you can make it floating or permanent you can add nice little avatars you can make it a mini navigation drawer let's look at the code for that interesting many variants sync look at the script is there something let's let's just try to try it if I put this right there will I get a mini refresh equals true whoa oh well forget about it but essentially there's other attributes you can add in there that will adjust the stylings yeah very welcome edits at it says thank you for doing this is gonna be fun all right let's just talk about view as we use it so back to our checklist we installed and set up beautify we created our basic layout for any one of the layouts if you look at application layout and then predefined layouts lots of different ones to choose from you can also just create your own oh I will be using the grid it's a flexbox based grid it's a 1212 column grid system but I believe we saw in there maybe some V flexes actually I deleted them but initially it was using like V flex to create a grid where the content was essentially one column cool but that's pretty much it for this page let's update the title to say CJ's products and there we go so that's the title I can click that button it opens and closes that lets create some routes so the first thing I want to do is list all products with slash products so here's what I'm gonna do in my hello world component let's get rid of everything except the div and then I'm just gonna add a button that links to the products page so if we go to the beautified docks hey Erin thanks for stopping by let's grab a button and let's just use like an info button and right there I'm just gonna say products and essentially I want that button to link me to the products page so now initially when the app loads up on slash this loads but I want to click this and go to the products page so for that I'm going to create a new component and just while we're here let's rename this to like landing and rename this to landing view give it a capital of L just for consistency and then in our router will have to update that so by default when you generate the app it says the HelloWorld component gets loaded at slash we renamed it to landing so beautify is a view component library essentially if you're using view GIS it gives you lots of different components you can use in your app so for instance the button that I just used after installing and configuring beautify now anywhere inside of my app if I do V - button I'm gonna get a styled material design style button cool alright so that's the basic route I want to create a new route where we will show all of the products so for this I'm first gonna create a component let's call this products dot view and inside of here for now I'll just have an h1 that says products and in my router I'm now gonna bring that in so I bring in the landing bring in products if you're new to view Jas this at sign is an alias for the source directory so instead of having to do a relative file path if you do an import with an app sign it knows to look in your source directory so that's pretty convenient and then I want a new route so I want the URL to be products I want the name to be products and the component to be products so now on our app when the URL is slash products we should see the products page which we do very cool but what I want to happen is on the home page when I click this button I want to go to that to that route if you look on the V button there is too which is an attribute you can set which essentially behaves the same way as router link and actually I'll probably show it let me show it with router link first and then show you how we do it with with that so on the landing page instead of a button let's just use a router - link so this is provided by view router it essentially allows you to link to some other route so we're going to do the router link we're gonna say - and in here we can say the name we want to go to is called products and essentially it will replace this element with an anchor tag that links to the products given whatever the path of the products is so because I'm referencing this by name it automatically knows what the actual route is so now that I've done that I get a nice little link and if you look in the bottom left of the screen you see it's linking to hash products so if I click on it that actually takes us to the products page but because beautify is awesome instead of having to use a router link I can just put this - attribute directly on the button and it behaves just like a router link so now that I put that on the button if we go to the home page this button now still links to the products page and let's also make this thing in the navbar link to the products page so in Aptos view not sure if I can put it on a list tile let's see if I say two products can I click it wait well I go there can I click this no I may have to put like a router link inside of it let's see yeah let's try a router link and inside of it it's gonna be products no params for now and the name is products Oh No Oh gotta gotta put that closing curly there we go I don't like that it does make it actually look like a link but it takes us there I'll leave it for now maybe we'll come back to it I always say that we never come back to it but now I have a new route for just products cool so now inside of our products page we want to make a request to get all of the products so let's do that for this I'm gonna create a first a folder called Lib which is short for library and inside of it I'm gonna create a file called ap IAS and essentially all of my API requests are gonna be in this one file that way if I have multiple routes that need to make the same type of request they can just bring in this file and they have access to it so this is just going to export an object and inside of the object I'm gonna say get products is gonna be a method and this function is actually gonna make an API request so for that I need to make a fetch request and I need to specify the URL so let's say API URL is HTTP colon slash slash localhost colon 3000 slash API v1 slash products cool now in my past videos I have used fetch so to use fetch we just say fetch pass in the URL making the fetch two and then we get back some response and then we return that response into JSON so this should work I'll get this working and then I actually want to show you a library I created which makes it a little bit easier to use fetch but for now this is a method that makes a request to get all of the products so now inside of our products component we will add a mounted method and so inside in a view component whenever it gets essentially mounted when it gets added to the page this function will run and we can do stuff inside of there so this is essentially where I want to make the API request but I'm not going to do it directly in there I'm going to create a method so we add our methods we create a method called load that makes the API request essentially this just makes it so that if later on I want to refresh the list of products I just have to call the load method and I wouldn't have to duplicate any code okay so in here I want to bring in that API so I'm gonna say import API from at /lib slash API and now I have access to it so I can say API dot get products let's put it all on one line it looks nice that way and then I should get back some products and then let's just log it to the console products cool so if everything worked correctly it did not the error I'm getting is cannot read property then of undefined what did I do wrong well cannot reap Robert and so it's telling me that this function is returning undefined actually it should not return undefined it should return the fetch so put a return there see what happens hard refresh cool and that makes the API request and I get access to all of my products let's fix these errors so in my products component you need to make sure I got some parentheses around that it is also complaining about the click in my app dot view essentially this just makes it so that when I hover over the item in the left hand side it has a nice little hand instead of a pointer it doesn't matter I'll get rid of the that just so I don't have the linter error and then a console.log cool okay so when the products page loads I make the API request I get all of the products before we add them to the page I want to introduce you to EZ fetch so this is a library I created that is essentially a wrapper around fetch because one thing you see yourself doing very often with fetch is parsing the responses JSON the other thing you probably don't do what you should be doing is handling any errors so by default fetch does not throw an error if the request was okay so even if there was like a four oh four or a five hundred status code fetch will still allow you to parse the body response but this library I created if the status is not okay so if it's not two hundred it will automatically throw an error so you can handle it with a catch and it automatically parses the body as JSON if it is JSON if you're posting JSON and automatically stringify as the body and it gives you this nice little interface where you can just go easy fetch get and then use the response so I am going to install this and use it cool so in my beautify directory I'm going to install easy fetch and then I can use it inside of my API file installing cool and so now up here let's bring it in so we'll say import easy fetch from easy fetch and now we can do easy fetch get the API URL and that automatically reparse is it as JSON so that should be all I have to do and then on our products page should still work hopefully didn't break anything let's see what happen Harbor fresh cool and we still get back our array of data but we're using a new library awesome ok so here's what I want to happen I want to show all of these products on the page so let's find a component to do that my guess is we're gonna use a card so we can have like the image of the product the title of the product the description and then we'll throw like the price and quantity on the bottom of it yeah let's use this one as an example notice so this is using V flex and then V card and essentially this whole row will take out 12 columns but have an offset of 3 so that's how this kind of like shows up in the center I'm gonna grab all of this and then we're gonna tweak it a little bit so now inside of the products component let's throw the layout in there just see what we get yeah so we get this card it doesn't have an image that's fine but essentially I don't want this to take up 12 columns and I don't want it to be offset I want this to take up let's say 4 columns because that way I can have 3 products across yeah so there's one and essentially I want to repeat this card for every product in the Proctor a cool so for that I need some data on my component so this is going to be a function that returns an object and the data here is just going to be products and we'll initialize that to an empty array and now up here I essentially want to repeat this V flex for every card in my for every product in my products array so I'm gonna do a V for this is going to be product in products and initially products is an empty array so it's there it's not there a linter error I'm getting right now is that V 4 also needs a key so let's just say the key is going to be product ID let's do a hard refresh get rid of those errors cool only air right now is a console.log let's make it happen so we get the products back now we'll just say let's do this as a one-liner give back the products and then this stop products equals products so we set that on data and then we automatically get cards for each one and it looks ugly why does it look ugly I don't like it I think I might have used this wrong I think I need to do it like that maybe no oh and then repeat this okay that's also not doing what I want it to do let's let's look so in I believe application layout and then grid we can see how the grid works so essentially we need a ok so V layout row so I want my V layout to be for each row and yeah then I do actually want this V flex on the card like that so this says should be a row each one should take up four columns what does that give me like that but I also want it to wrap I think there's something in here for a wrap yeah allows children to wrap within the container if the elements use more than a hundred percent so if I say a row wrap this should yes okay so now each card takes up before column four columns exactly and it's nice like that cool so let's actually use the data inside of that we can look at our view dev tools to see so the content and then the products page so we have title image description so let's throw that stuff in here so the source is going to be a product image and we'll bind it the title is going to be product title and then right here we'll throw the product description take a quick break look away from the screen take a sip of water okay so now we've got some products I really don't like that it's cutting off my images regardless we should have a button instead of saying share it should say probably like view and we only need one button so I should be able to click that button and it should take me to the product page let's increase the height let's do like 400 pixels that's a little better we can pretty much see the image of of each product awesome let's look at our to do so we made the request we added them to the page each product links to products /id so essentially I want to create a new route that's gonna be like products / - and when I go to that route we only want to show an individual product so first let's create the component so I'm gonna create a component call it product dot view and it's gonna be a basic view component yeah I'm thinking we might want to reuse some code from the previous one I don't know though let's let's look at our other options for components so they're like media media with text what just happened you know I think I'm just gonna use the same card but maybe I'll have a bigger width so essentially I want this on my product page but we should take out 12 columns and we're not going to repeat it we're just going to have access to the product and it's increasing the height to like 600 or something like that cool and now we'll just initialize our data to be you know just an object an empty object that that that okay we'll come back to this but for now we have this product component so let's create the route so in here we need a route for we're going to do products slash ID and this will just be the product page and then we need to bring in the product component cool so now that I have this route we want to link to that on the products page so this is what we'll do this V button remember that two attributes we're going to use that so we're gonna say two is an object and the name of the component we want to go to is product and in this case we're passing a parameter go to this specific product page so you can say params is an object and ID is going to be product because when we defined our route we basically said the ID can be anything but it comes after the word products and now that we're repeating over the products for each individual product it will link to the product page for that specific ID so let's check it out let's make sure we don't have any errors in the console just warnings for now Harbor fresh but now if I hover over the View button notice it says product / - product / for product / 5 and if I click on that it takes us to the product page very cool so back to our to do we did that we did that now we want to show one record with product / ID so this is left over from well no it's not inside of the product component I need to get access to that ID that's in the URL so that I can make the API request to an individual product so let's let's just create the API request first so in our API we we want get product and this will take in an ID and then now if we do API URL / ID that will get one individual product and so now on the product page when this thing is mounted we should have access to and let's just log it this dot dollar sign route params so with the view router inside of your components you have access to dollar sign route and this will tell you the name of the current route any params that in their URL other various information but if we log params we should see ID five right and if I go back to the products page and I click this well that was ID five this one which has ID 4 it logs ID 4 so inside of the route in the component we have access to the params view router already took care of parsing all that for us it's great now we can use its ID to make the request so I'm gonna say ID is this stopped route params that ID but I want to use destructuring so the way that works is I can get rid of that and just throw some Curly's around there and now we get access to the IDE when the component mounts so for very cool arrow functions should not return an assignment uh-huh let me just fix that real quick we can do a cool and just one warning about the log okay so when the product page loads it grabs the ID from the URL now we want to make the request to the API so let's bring in the API just like we did before so it's gonna be at /lib slash api and let's also create a load method on here node and win the component loads we're gonna say API dot get product with ID and essentially right here I want to call this dot load with ID so when the component mounts grab the ID from the URL call this function with the ID so that it then gets a single product and we'll say that then we'll get back the product and we'll say this dot product equals product just like that Oh it loads up so now if we go back to the products page we can click this product we see that individual product we can click this product we can see that individual product oh yeah so in the chat they're asking why I used destructuring so this is an es 2015 feature the main idea is to reduce code verbosity so route params let's actually just log this again so route params is an object and we'll do a refresh so it's an object that has a property ID and typically if we just want to create a variable that has that one property from the object we might say ID equals route params dot ID because we know this is an object that has an ID property but yes 2015 introduces this destructuring syntax which essentially allows us to shorten this up so instead of having to do ID equals this stock route params that ID we get rid of the property we want to access and on the right hand side we wrap this in curly braces and what this says is get the property inside of this object that has the name ID and create a variable called ID that I can then let use below I know as a beginner and the first time seeing this it takes a while to kind of wrap your mind around it this is a very simple application of it if I had a more complex object I might do the same thing to pull out multiple properties so like pull out the title pull out the description and essentially this creates three variables that are equal to the values of the properties inside of the subject I will get you a resource on that so if we search md in 4d structuring the structuring assignment I don't like any of those examples because it uses like array syntax these are horrible examples horrible like you can use it with an array but like technically yeah this this is what I've listed what I'm showing here so like we have an object it has two properties P and Q and then this line creates two variables P and Q that are essentially equal to the values from inside of oh it's a little weird I actually love it may it makes your code a lot shorter cool so that gives us our ID we then get the product and then by setting it on our data we and we have access to all of the information inside I do also want to show the the price maybe so let's do a product price sixty-nine nine let's not do it small let's do you like nh4 cool let's put a dollar sign in front of it cool and then we also have the quantity so let's do product quantity quantity in stock so two in stock cool and I actually want to do the same thing over here and I have a feeling I'm gonna refactor this into an even smaller component but because I did that now on this page we see the prices of everything and and how much is in stock for each one cool let's look at our to do list I feel like I'm being a bit scattered today okay we made the request we got the idea we added it to the page okay now we want to link to slash edit so on the individual product page we do not want to save you we want to say edit let's make this the primary color and just like before we can link to another route we haven't created it yet but we do want to link to it so I'm gonna say to and then in here we'll do the name we want to go to is edit and the params are gonna be this products ID so yeah and we are getting a warning right now that the route and it doesn't exist but it still creates a button for us will have to go create that route okay we displayed a link we showed one record now let's create a record crink we're gonna create the component so let's do a new component we'll call this a create view and you're probably watching to learn about beautify we're gonna use lots of beautify components in this in this component because this is gonna be a form it'll have validation States and stuff like that it'll it'll get more fun I promise I promise so we created the create view just as a quick thing let's throw a header in there now in our router let's add the create route so we'll do products slash create this will be the and actually let's let's see the error real quick so I want the name to be create I want the product I mean the component to be create and then we'll bring in our create component and so now when the URL is products slash create load the create component okay we do need to link to it let's link to it in our app top view so right below products we're gonna link to create create product so now we got a nice little button when we click on it it takes us to the create route I thought that was going to break mainly because if we look at our route definitions this says products / : ID and my thought is when it sees slash create it would actually think that create is the ID instead of a number that didn't happen I am just gonna put that there just for sanity because this if the thing after slash products is create we want to load this component we don't want to load the individual product component cool and so in our create route some basic stuff let's look at our to-do list we want to display a form okay back to the v2 Phi J s Docs let's take a look at inputs and controls tons of really cool built-in stuff for working with forms has that nice little animation you can have validation like it's required notice how when I well when I did it when I moved my cursor out of it it like shook like it was incorrect yeah he saw that shake very cool validation with submit and clear you can call reset on a form which essentially clears it out that's fun V validate view Allah date interesting let's take a quick break yeah so if we look at how this thing renders got a nice little text box it does say that no more than 10 characters and it is required if we look at the source code for it it has counter and then error messages and if we look at our script name errors is a function that if the length is not is passed the mask is not the always passed the max length it pushes in an error if it's required it pushes in an error interesting well we'll use some of this validation and kind of like break down what it's actually doing but let's look at the source code so Oh Beulah date I guess is a totally separate library let's look it up I've never heard of it interesting simple lightweight model-based validation for view jeaious cool ah okay and then what we were seeing in the script I believe this is viola date because we set up our validations up here interesting I'm gonna create the basic form and then maybe we'll come back and add validations okay so I need a form it's gonna have a text fit let's just copy this whole form for now and so on the create page want the form just like that this should show up it's like that but let's put it in a V layout so just like our other pages we have a V layout at the top level and then a V flex so let's do that in here so I want a V dash layout and then inside of it I want a V dash flex and this will be 12 columns so that way the form will fill up the full width so this whole form needs to go inside of the V flex like that boom Harbor fresh yeah so right now it's looking at all these bindings and stuff like that for now let's just have a simple text field we'll get rid of these these validations and set up our form so the label here is going to be the title of the product the model will be I'll just say product title it is required we also want the description and this will be product description description is not required if we look at the beautified docks I want a text area where can I find a text area so textfields loading single line here we go something that like this like with multi-line a multi-line text field is useful for larger amounts of text so you just add this multi-line attribute and that is totally broken let me make this make sense so essentially what I want to do is on this component I'm gonna have a product object on the data that has all of the properties that a product should have so like title description price quantity image all that good stuff so let's create it we've got our data this returns an object it has a title we want a product property that has a title that's empty then it has a description it's empty and for now let's see what we get cool so we can put the title in here Lucroy we can add some description we also want to add title description quantity so for quantity let's use well well we'll use a text field but we I think we can we can set the type to number with icon character counter validation required fields prefix for dollar currency well that's pretty sweet let's see what they're doing in here prefix suffix I'm just curious if there's a way to specify that this is a number field nope interesting I mean I guess we can we can handle that in validation because we only will only allow numbers in there okay so right here we're gonna have price hold your product up price will initialize price to zero and let's try to use that prefix thing so prefix is dollar sign what do we get well that's cool so we can add the price and then lastly we want the quantity quantity and v-model will be product quantity no prefix on this one quantity is required quantity we will initialize to zero cool and then lastly we need the image URL image product dot image image I believe is required and will also add the image which defaults to an empty string so this is our basic form to create a product actually I don't think I'm gonna do any validation in the interest of time at least using the validation library we'll do some basic validation before submitting the form okay now we want this submit button to make an API request that posts it to the server we have displayed a form with info boxes for all the fields we have a button we can click to submit now let's make it happen so this is referencing a submit function on my methods which doesn't exist so let's create it methods submit inside of here let's just log this dot product we should see all the values the other thing is this Clear button let's see how that thing is working this dot ref stopped formed reset pretty cool and so on the form we give it a ref of forum for whatever reason that was just warm okay so [Music] v - form no yeah V - form ref is gonna be form and then we also need this clear method on our methods clear let's do that see what happens Harbor fresh okay we click that well with this type some stuff click the clear button and it clears the form what's fun what's built into view I like it okay now we want this submit button to actually submit right now it's just logging out the product all those values are no so let's do some validation so I really don't think I want to use the built in well not the built I don't I don't want to go through the the effort of doing all of this actually yeah so this this just use it uses built in validation that's that's what I'll do this is a little bit easier I won't have to bring in a separate library but notice on the field it's referencing rules and essentially rules is an array of functions if the function returns a string it is an error so let's do our validation like that so let's have some rules for the title so I'll say rules are gonna be title rules and then on our data we want title rules and so this should be an array of functions this is going to take in the title and then we can use some sort of validation so we can say if title trim is an empty string then we're going to return title must not be empty else will return true meaning it's valid I think that's how that works let's look at their script so if there isn't a name then it's required if the length is less than 10 then it tells that let's see what happens unexpected console statement yeah let's get rid of that for now what are some other linter errors that I'm getting this is saying expected space after if expected triple equal this thing is picky trailing comma so if I don't type anything and I tap out of it title must not be empty but if I put something in there and tap out of it it is valid so this is an array of functions that take in the property we're validating it'll return a string if it's not valid and you can say why and if everything is good you return true and that means it is valid cool so we did that for the title no validation needs to be done for the description because it's not required let's do some validation for the price will do price rules and so price rules is an array of functions this takes in the price and we'll say if thank you Ben Benjamin Castle Eno says go CJ and go view I appreciate the encouragement I am getting a little tired I need to keep coding okay so we need to make sure that the price is a valid number so let's say if price if well let's say if is nan price then we are going to return price must be a valid number okay or if so if it is a valid number then if we parse the price as a number and if that is less than or equal to zero the validation we want is price must be greater than $0.00 else it's valid let's see what happens okay so if I don't have a title title must not be empty look boy description is fine watch if I tap out of this price price must be greater than zero dollars so if I set that to 100 it's valid we want to do a very similar thing with quantity so let's add rules that's gonna be quantity rules these are gonna be very similar to our price rules but just a little more specific to quantity and we'll say who wanted T so if quantity is a not a valid number we'll say it has to be about number let's say if it's less than zero because quantity can be zero or greater otherwise it's good to go so if we do this in the price it must be a valid number if we do this in the quantity it must be a valid number if we do a negative 100 must be greater than zero if we do zero it's valid that's fun so these validations are built in to beautify j/s so this rules attribute accepts an array of functions if they return a string it'll show that error message if they return true then it's a valid it's valid cool so now that we are validating things I believe let's say we try to we try to submit without the form being valid will it let us oh it does I don't want that to happen [Music] let's see valid is true and where are we binding that V model valid okay so essentially we want to bind something on our data let's just call it valid mm-hmm stretch away from the screen so we're gonna lies valid to true because when well let's initialize it to false well no true because we don't want to show errors until they start typing so we'll do that and then on the form our model is going to be that valid property and essentially if we want in here we can check to say if this stop valid then basically make API request else show an error or something cool let's just log so not valid and valid okay so initially if we try to submit the form not valid if we make it valid get a Dalek Roy deeply Shh I don't know how delicious just a tasty beverage cool price 299 got ten of them we'll grab an image but I believe image is required if I click Submit Oh his image not required it is hmmm let's create some image rules too basically it's gonna do the exact same validation as our title because we don't want the image to be empty so look for Aaron mentioned lacroix I realized for people watching this not on live stream you think I'm crazy because I'm like reeling yelling random stuff alright now if we try to submit it's not valid but if we tab out of here it says image must not be emptied cool we've done our validation let's make this API request so here's what I need to do I need an API request to create the product we're going to pass in the product and because of my handy-dandy easy fetch library I can just do easy fetch post against the API URL and pass in the product to be created and that should do it so here's what we'll do we will if it is valid we want to make that request so in this file I'm gonna bring in my API again import API from at /lib slash api and then we will make the api request right here so api dot create product and i want to pass in this stop product because that should have all of the properties of it and then we should get back the result and for now let's just log that results okay let's try it out so i'm gonna go to my products page i'm essentially just gonna recreate this the core look for let's grab that image URL cool that's what i want so i'm going to create a product the title is Lucroy description a tasty beverage price 199 quantity 20 image that let's look at our console we're hoping to get back a response submit invalid product what's not valid about it I could be specifying the properties wrong let's look at our network request though so if we look at this was a Oh Oh it doesn't show up okay so this is a post we're sending description image price and quantity why is it not valid I need to look at my server-side code real quick actually let's also compare this with all of the products because if we make sure I didn't spell any of these properties wrong description image price quantity and title description image price quantity and title Oh quantity and price well quantity should be a number maybe because it's not a number it is not passing it in let's do this let's say this dot product dot quantity equals the quantity as a number because we know it's an we know it's a number let's try that again okay you're gonna create the product title akroy a tasty beverage price $1.99 quantity 20 that's the anot the image we'll grab it from here submit okay I think it was because our quantity needed it wasn't I don't not that I think it was because our quantity needed to be a number so that made the post request and then just responded with the ID so it actually did create it so if I go to the products page we now have a new Lacroix very cool but if we look at our to-do list we validated everything we made the post request now after it's done creating it we want to redirect to the page that shows that individual product so for that we can use this dot dollar sign router dot push and that will essentially push URL I actually want to go to a route I'm gonna go to the view view router Docs view router the router instance methods router dot go I believe is what I want I'm guessing in is the route let's try it so router dot go I want to go to the route that has the name product and our params are going to be ID which is results dot ID will this work stay tuned to find out all right create product I mean let me fix all these winter errors apologies okay hard refresh expected to have that okay I'm going to show you something super interesting so notice how right here we're accessing result that ID I can use D structuring inside of my fat arrow parameters so I can do this and that it's just like that looks weird right it's crazy cool though it will essentially pull the ID property out of that object and then I get access to it right there okay a space is required after curlies missing trailing comma [Music] okay let's try to create another Lacroix Lacroix description a very tasty beverage price 399 inflation that's the image we want submit and it didn't you didn't go where I wanted it to go so we said go to the product page with the prams ID I'm guessing that router go might not be a thing or that might not be how to use it [Music] can I search for go pragmatic navigation oh okay I can use router that push but then pass in that same object let's do that so router dot push I want to go to the products page and the ID should be the idea of the thing that just got created let's take a quick break okay this should work and now if we do go to the product page we're getting overloaded with the turquoise that's okay it's create another Lucroy so title Lucroy description tastes tastes tastes great price 399 like I said inflation 21 we need the image where can i grab the image so the in the chat question is what's the name of the app I use for breaks I use a thing called time out by a company called age all it since you can configure it for how often you want your micro break micro breaks so I have every 15 minutes a 10-second micro break and then every hour I have a five-minute break as you've noticed I haven't been taking those five-minute breaks probably should probably should get out of my chair yeah this app is great I've been using it for four years and I love it check it out I'll throw a link in the chat so okay we were in the process of creating a Lacroix let's grab that image again and it's going to work this time oh no summit because the idea is when I click Submit it'll make the post request but then this line of code will hit which should redirect to the individual product page of the product I just created go yes okay so notice how it redirected to products / 13 and now we're seeing the information about the product that we just created and if we go back to the products page all of those the Croy's are listed here ID 11 ID 12 ID 13 and we can still view those very cool all right on the to-do list successfully created that update one product update one record in products / ID / edit all right this form has all the behavior I want except that on submit it is creating a product instead of updating a product so I'm gonna do a refactor I am going to essentially create a component that contains the form and all of the validation but then it allows us to either pass in a custom function to create or update and we can also bind the form data to it okay this is gonna be a fun refactor okay so let's create a new component actually we'll use this component let's rename this create component to be create well let's call this product form okay and that should break some things because now the create component doesn't exist so our product form is basically the form it does all of this stuff we will not contact the API because we want to pass down a function to call we will pass down the product as a prop so that the product can exist externally so we'll say props is an array with product and for now there will be no submit of it will put that elsewhere so let's make our create component so new file create that view and this thing is essentially going to bring in the create product so sorry the product form that that component I just created but it's going to pass down product to be the product we define here and so now this data will have a product that is that so basically the the blank product and so when the create page loads it'll pull in this component and just pass down this empty product to use as the product inside of that component now to actually use this we need to import it in so we can bring it from at slash components slash product form and then inside of the component we tell it components and that and that gives us access to the product form inside of the create page okay if I've done everything correctly we should still have a create pre page cool we do and essentially this is a component that's loading a child component but now we need to make those functions make sense so let's pass down the submit function and so we're gonna pull out this submit from here and we'll do something like this on submit and so on this side will say on submit is going to be a function on my methods in here called submit and I won't do the validation I'll do this stuff I realize I'm doing a lot in a second I'm gonna take a step back and review everything that I just did so we need to bring in the API at /lib slash API this now has a submit function which actually does the creation but we're passing that down as on submit so inside of this component we also need to declare a prop of on submit okay I think I've done it let me make sure there are no errors missing trailing comma missing trailing comma right there okay if I've done this correctly we should still be able to create a product if it works I'll review what I just did okay so let us create some Altoids because I have some right here so Altoids description curiously strong its price 299 ten of them let's find ourselves in Altoids it's image one degree yeah that's the flavor I have let's just upload this image to image or a real quick so I get a small clean URL there we go okay so I want to create some Altoids there's my image when I click Submit it works okay so we have successfully taken that form component that does all the validation and everything and put it into a separate component so let's kind of review what's happening there and then I'll show you how easy it's going to be to create a form for editing an existing product okay so now this top level component create essentially just brings in the product form directly and these bindings are essentially props just defined on that component let's say data can be passed down to the components so we're essentially passing down this object to the form and then when the form is submitted we're passing down this function which it will call from inside of the component so now inside the form component when it gets submitted we essentially call this dot on submit which is a prop so when the form gets submitted we call the function of the parent component that passed that function down and that's great now watch how easy this is to be is going to be to create an edit product page okay so we're gonna create a and actually let me just duplicate the create component will call this edit and yeah and now instead of create product we want to call update product and we should be able to redirect to this stop product that ID cool but for the the edit page when the component loads product is just empty but when it's mounted we want to get a single product and then set that as the product so for that we can use something very similar to what we did on the product page where we essentially do this exactly because when it's mounted we want to grab the ID from the URL and then get an individual product with that ID yeah watch watch this okay so now when I go to edit everything breaks because I need to create an edit route so simple enough we'll do we need a route like this this is going to be called edit edit and the URL is ID / edit and then we need to bring in the Edit component that goes there that goes there okay app loads we can view our products we go to a product we click Edit and everything breaks I think I messed that up though oh yeah I duplicated methods this needs to go inside my existing methods apologies that's what I get for copy and pasting let's let's do this though we do we do want to initialize the Edit component we'll give the product some basic properties to begin with so it loads and notice it prepopulates with the information for the product that has ID 4 and that's simply because we're passing down that product information so the moment we get the individual product from the API when we set it on data it passes it down and then the form just fills in with all of the properties of that of that object cool now we need this to actually create the product so I need to create an update product method in my API update product we'll pass in the ID and the product will do router dot put against the URL slash ID with the product that I want to update and we that'll do it so in the Edit view I need to pass in this stop Product ID and the product itself that should make a request to edit it and then redirect to the individual product page let's see what happens okay so if we attempt to update the price to be $29.99 and click Submit it worked so notice oh what's happening here missing per am for named route edit expected ID to be defined believe that's because anywhere I'm referencing edit let's see I'm gonna search in my product in the source directory edit oh this should be uh sorry searching intro - beautify slash source [Music] so that links to the edit page and then also curious let's see that so now I should be able to go to any product and update it so let's update this MacBook Air we're gonna edit it we're gonna change the price to be $99.99 click Submit and it loads that product oh I think I know why or do I it's a weird error I'm gonna ignore it for now but it's working so we can click Edit we can change the price or the quantity it's changed the quantity a laptop for cool people like me submit description and everything updates if we go to the all products page we also see all of that information cool I do realize this is turned more into a building a crud client with view more than a beautify tutorial but you're seeing real world application of beautify essentially you need some component go to the docs copy it in adjust it to your needs I'm gonna close all of this stuff that I have open and then we'll take a look back at our checklist so we displayed a form we validated all the inputs cuz we reused our logic from before we made the put request and then after the update it automatically redirects to the individual products page fantastic last thing we need a delete button on the products page which will delete the product so on the individual products page we have this V button actually I'm not I'm not I'm gonna copy it it's gonna be pretty simple so V dash button and right inside of it will say delete and I think color you can do warning I don't know let's see so if I go to an individual product page yeah so it's like orange I want a red one let's see what that property would be so if I go into buttons error wait we have close that close that close that yeah that's cool and I actually don't want my edit button to be a flat button so that way it'll show up like that cool so if I click Edit takes us to the edit page if I go back does that now I need to add a method on my component which will delete the product easy enough so on this button we're just gonna do an act click will say delete and then on my methods in here I need a delete method and we'll have to create it but we'll say API delete product pass in the ID and then on successful deletion we will redirect to the products page so this dot dollar sign router dot push and the name of the route we want is products now we need this delete product function and also we should grab the ID from the params so in here we now need delete product which accepts the ID and then just does a router oh so easy fetch delete against that URL okay what is beautify complaining about that looks good that looks good let's see what it's complaining about avoid using javascript Oh delete is a reserved word yeah let's call it delete product will call this delete product that's is wondering what syntax theme I'm using so I'm using something called bra hollow syntax let's look at it this is specific to to Adam I'll send you the link for it I am getting some like deprecated warnings with it like with latest version of Adam it hasn't been updated in a while but I love this syntax theme it's it's vibrant and clear and yeah it's really great okay that should do the thing hard refresh linter errors I am missing a trailing comma right there hard refresh okay cool I want to delete one of these extra I have so many lacroix is in my store let's let's delete this one so if I click the delete button it's gone sweet let's also delete this record delete it's gone let's delete this one delete it's gone sweet all of that links broken yeah but it's called bra Hollow syntax actually I haven't found it for vs code I have started messing around with vs code I mean I may recreate it for vs code cuz I really do like it that's really great let's close all of this stuff awesome we have reached full crud on the client so our delete button deletes the product and then redirects to the products page Wow we did it let's just take a quick second to review this whole app and all the things that it does starting from Maine yes so in Maine j/s is where we actually bring in the beautify library so we import it in we import the default CSS files CSS file and then we say view use beautify and that essentially makes all of the components inside beautify accessible and usable inside of our app and then in our app dot view let's take a quick break cool so in our we have reached full crud yes we have so in our app top view our top level component is V dash app so this is provided by beautify but essentially all beautify components must exist inside of this V app and you only need one so there's no need to like create one on every route have one here and then all of our routes get loaded in to the container right there this default layout I just pulled from the docks and then the left-hand side I have links out to grab those well to go to those specific routes question in the chat what are the Chrome extensions that I'm using I have a ton remind me after I finished the review and I'll go over a lot of them yeah cuz there are a bunch in there a lot of useful ones cool so we've got our navigation drawer on the left the v-model for the navigation drawer is essentially just a true/false value as to whether that juror is open or open or closed so we can click this button to open it go to the create product page go to the all products page that kind of thing and right here is essentially the x marks the spot so this is where all of our routes are gonna get loaded and if we look in index Janus of our router this is where we've defined all of our routes so we describe what the path is and then what component to load when the app sees that specific path so we have our landing page which is just a button to the products page we have our products page we have our create forum we have our individual product page and then we have our edit product page and each one has a unique URL and some URLs also specify params so we can essentially pass data in the URL to use it inside of that component so on the products page we're using beautifies grid system to essentially create a three column grid where each card takes up three columns so in beautify this V layout and V flex or how you essentially create your row and then your individual columns are in V flex this says on extra small devices take up four columns we could actually update this we could say on extra-small take up the whole row and then on medium devices take up four columns let's say yeah and so now if we go really small then it's one column and then once we get to a medium size device it bumps up to three columns and essentially this gets repeated for every product in our product array and we're showing the image the title and all of the relevant information about that product the component itself is super simple so whenever it gets mounted we just make an API request to get all of the products and then once we get back the products we set them on data and that automatically repeats them in the view this button here is using the to property so this is built in to beautify and essentially creates a router link under the hood which links to another route so this says this button will link to the product route with this products ID as the params for that route so on the product page if we hover over any one of these buttons in the bottom left you'll notice the the ID is listed there as product slash six products product slash eight product slash three etc and if we click one of those that takes us to the individual product route and if we look at that super simple template it's just basically displaying the data and its component is also fairly simple as well whenever it loads we grab the ID from the URL so when you're using view router inside of your component you have access to this dollar sign route and that represents the current route and then params are any params associated with the URL so because this has a five as the ID we can access that under the params object and then we just get the product that has that ID and then set it on data once we set it will see that products information and then there's also this delete button when you click that it makes a delete request to the API against that you to delete the product and then redirect to the products page but if you click Edit product this links to the edit route which with the ID of the product as a per am and if we look at that route for this we essentially encapsulated all of the form validation and form logic in this other component but we essentially bring that component in pass an empty product down and then when the form is submitted it'll call our submit function here I'm sorry not we yeah so I'll call our submit function here which actually makes the API request to update the product the other thing is because this is the Edit view whenever the page loads we get the product with this ID and by setting it on data that gets passed down to the form and then pre-populates all of the fields with the properties from the form if we look at the form component we're using lots of built in components from beautify for the form itself V text fields and beautify have the ability to be validated with this rules property rules are essentially an array of functions they take the property you're validating and if they're valid returns true if they're not valid you return a string describing why it wasn't valid so we essentially created rules for all of our different values in our form and then when it's submitted we called the prop on submit which was passed to us by our parent component so in the case of edit it's passing down submit as this function here and essentially inside the product form when it when we click Submit here it invokes the function from the parent component and then we're also using that on the creation page so create is very similar we bring in that product form but in our case the product we're passing down is just an empty product because we're creating a new one it doesn't have any properties and then when it's submitted we actually want to call the create product method rather than the update product method and that will actually make the API request and then when it's done creating redirect to the individual product page I believe I have done a review of everything I will definitely push this code up you can take a look at it yeah I and honestly this has been more of a build a front-end credit app with view more than a beautify thing but you saw my process you saw like looking at the view Docs figuring out what we needed pulling it into our app all that good stuff any last questions comments thoughts on the chat before we end this stream and also those of you that joined midstream you missed my intro song that I created so when it's done you can rewind and see the the song I created about material design in beautify j/s cool that's pretty much it for the stream thank you so much for watching let's do this Here I am hello yeah this has been super fun thanks to everyone that tuned in and sent messages on the chat if you have not subscribed please subscribe I need a slow clap in the chat I need a thousand subscribers before I can actually start basically adding new features to the chat and being able to monetize my videos and stuff like that so subscribe if you haven't subscribe tell your friends and yes sponsored by Lucroy actually if I could get sponsored by Lucroy that would be fantastic somebody look into that for me yeah thanks for watching I will leave you with this goodbye

Channel: Coding Garden

Views: 28,637

Rating: 4.9181104 out of 5

Keywords: debugging, programming, web development, mechanical keyboard, vscode, live streaming, full stack, learning, full stack web development, full stack javascript, learn web development, css, backend, beginner, how to code, educational, coding, learn node.js, frameworks, learn javascript, debug, lesson, frontend, node.js, learn to code, html, live coding, javascript

Id: 5GfpGaHKfyo

Length: 107min 34sec (6454 seconds)

Published: Mon Mar 12 2018

Reddit Comments

[u/bdeo]

If you're interested in more Vuetify, we have an official sub now /r/vuetifyjs