The Vuetify 3 Tutorial - A Vue 3 UI Library

foreign hello everybody and welcome back to the channel in this video we're gonna try to cover beautify 3 in as much detail as we possibly can now I'm on the website right now and as you can see right away it says that beautify 3 is a material design framework so essentially it is a view UI Library where we can get a lot of different components that are kind of beautifully hand crafted and let's actually just take a look at some of these components so if we were to go over here let me just zoom in a little bit and you can see here beautify three as the time if I'm recording is in beta so this is kind of premature but nonetheless let's go ahead and take a look at it so you can look at all of the different components you can look at maybe the alerts and you can see right away we can kind of get this really nice component without styling it or anything by very simply just utilizing the alert so for example if I were to go here and I were to look at the code you can see all I have to use is view V alert and I get this component right away and I don't have to do any of my own styling so you can see that this gets a lot easier especially when it comes to kind of complicated things like maybe a Color Picker you know I this Color Picker would be really hard to implement myself however with view all I have to see is this piece of code right over here and you can see that there's just a bunch of different things that are just going to make the development lives of our front end a lot easier so with that being said what we're going to be building is this application right over here with beautify so this is just going to be a image gallery slash image selector application so we can go over here you can take a look at all of the images we can well click on a particular image so let's go over here maybe I'm really interested in this image I can go ahead and click it and as soon as I click it I actually get the URL copied to my clipboard so if I were to go over here I get that image and I can go ahead and do whatever it is that I want with it what's really nice about this is we have this navigation bar and we can either get the images in color or we can get the images in grayscale and notice that we get this kind of really cool loading effect and actually if you scroll down you can see all of the different images and let me actually go back to color here and I'm going to go ahead and refresh so you get this really nice loading effect of the images and actually the images don't render if you haven't scrolled down so as you scroll down you can see that the images start to load and this is actually just going to make our applications performance a lot better so you can see that this is actually going to be a relatively difficult thing to do if we were to build this out with CSS and View kind of just naturally but with beautify we're going to use all of these UI elements and it's just going to make the application really nice and really simple to build so this is what we are going to be doing and well I hope you well stick with me till the end of this project alrighty in this section what we're gonna do is very simply just create our view project so in order to create the view project we're going to create it by utilizing the view CLI and this is actually very important because we're then going to utilize the CLI to add beautify into our project so please make sure that you have the view CLI installed to install it just go to your terminal or command prompt and run npm install G to install it globally and then over here add view Dash CLI so that is going to install the CLI for us and then what we can do is we can actually create a view project by utilizing the CLI so we can say view create and then my project so I'm going to go ahead and do that now of course I already have the CLI installed so I'm not going to install it again I'm going to go ahead and do a quick clear I'm going to move into the directory where I want to create my view application and very simply I'm just going to do view create and I'm going to call this image app I'm going to go ahead and create this application and then I'm going to open up this application inside of a text editor now specifically I'm going to be using vs code now for this default option we're going to utilize view 3 of course and I think that is all it is that is going to ask us so I'm going to go ahead and spin up vs code I'm going to go file I'm going to say open and I am going to open that application that I just built if I go over here it is called image app there we go so I'm going to go ahead and open this up inside of vs code and it might be empty at this point because it's still installing so you know we're gonna have to wait a little bit and then it should install so I'm going to pause the video and come back when it's done okay so the application is done installing so now what we can actually do is add beautify to our app so I'm going to go ahead and open up the integrated terminal over here and let's actually go to the documentation so we're going to go over here to the documentation and it says to add beautify what we can very simply do is say view add beautify using the view CLI so I'm going to go ahead and copy this let's go over here and we'll just add beautify so we're going to go ahead and paste that into our terminal and it should ask us a question here in a bit so let us wait it's going to ask us which beautify version do we want to use and it kind of defaults to beautify two now we're using a view 3 application and I want to learn you know about view three so let's review the five three so let's go over here to view five three and that is what we are going to select so this is going to take another you know a few minutes or actually no didn't take anything at all so it has actually added viewify to our application now if we go to our package.json and let me zoom in here a little bit zoom out at least once more if I go to my package.json you can see here that we have a bunch of different beautify things just kind of right there installed and if I actually were to go to my uh my welcome hello world component you would actually see that it is actually using beautify itself so let's go ahead and actually run our application to kind of see it in action so I'm going to go ahead and run npm run serve and as soon as I run npm run serve it's going to start the development server everything seems fun and dandy and now it's running it on localhost 8080. for you it might be different but for me it's 8080. so what I can do now is I can actually go there and right away you can see here that we are getting our view defy application let me just kind of get this out of the way here all right looking good okay so now we have our beautify application so before we actually get started with our app let's just do a little tiny bit of cleanup here so the first thing that we're going to do is we're going to pretty much remove everything that we have inside of our app component so we have the V app view main let's just remove everything and just have a div for now just a div an empty div we're going to remove the hello world we're going to remove all this stuff here honestly just remove the scripts entirely and we are going to delete this hello world component now one thing that I want to do and I really do not want to worry about this is eslint I don't want to get any linting so what we're going to do is we're going to go to our package.json and any reference of eslint we're just going to go ahead and remove it so just do Ctrl F es lint we're going to remove any es lens packages so we just don't have to worry about you know how we write our code we're just going to go ahead and just remove everything related to EOS lint let's remove this whole block here and that's pretty much it so what we can actually do now is just do a npm install again so let's do npm install just to get everything up and running again and we can even close our server so we can close our server and just run it up again so now in a few moments time we should get our application and we shouldn't have any eslint problems so let's go here and if I were to run this you can see it's kind of an empty application and well that makes sense now with that being said let's actually go ahead and move on to the next section where we're actually going to start coding out this wonderful where is it I think it's on 8 000 the final version or it's not actually well we're gonna start coding out our app so let's go ahead and do that we're gonna talk about layouts and how we can actually lay out our application so let's go over here to our final app and you can see here that really the way that our application is laid out is that we have this side navigation over here that when we hover over you can see it exposed and then we kind of have this main section right over here that we can scroll down on and that's pretty much how our application is laid out however our application can be laid out in numerous different ways so for example we also could have a navigation bar up here maybe we have certain contents a hero etc etc and when talking about layouts it's really important to understand how you want to lay out your application before you kind of dive into all of the other UI elements so let's actually go to the view documentation and right over here it shows us some different ways that we can lay out our application and how we can use the beautify built-in components in order to go ahead and well get that layout across your view app so over here you can see that we're going to place multiple different components to achieve this layout so right over here let's say we wanted a layout where we have a nav bar at the very top and then we have this right over here kind of this content right here we can actually take a look at the code and you can see here that we start off with a V layout now for our application instead of using V layout we're going to use the app and as you can see here we kind of have a reason why that is so they're using V layouts just for stylistic purposes but for our hour application we're always going to use the app to root our layout so instead of the layout we're going to use the app and then over here we have the app bar and they give it a specific color you can see here that this is the app bar right over here and then within every V app we're also going to have a v main that is going to contain our content in this case inside of the V main they have this v card that has this particular height and that is that right there so now that we think about this I think what we're going to have is a v app we're gonna have this bar right over here and then we're gonna have a v Main and then within the V main we're gonna have multiple different V cards so we're gonna actually go ahead and code that up but before we do that we can kind of take a look at other examples so over here you can see that uh this card right here is kind of overlaying the uh nav bar and you can see here that the way that they did it was they have this nav bar over here and they have this V navigation and they also have this bar right here and you can just take a look at all of the different layouts honestly there is so much with beautify that I can't really cover every single thing I'm just gonna go ahead and kind of build out a project with you and hopefully once I build out this project and you kind of learn you can go ahead and just start viewing the documentation to see exactly what it is that you want and that's pretty much what we're going to be doing throughout this course we're just gonna kind of flow look at the documentation see what we want and then go ahead and kind of apply it to our own app because again there's so much to cover here and we're just not going to cover at all so instead of teaching you everything that there is to know about beautify I'm going to go ahead and teach you kind of how to well kind of learn on your own and use the documentation to build out everything that you want okay now with that being said let's go over here to our app.view and what we're going to use is the V app to kind of root our application Whole so we're going to say here V app I'm gonna instead of using the app like so I'm going to use the capital syntax the uh what do they call this I forgot what syntax they call that but whatever it's it's when they have two capital letters separated the the keywords here okay so we have the V app and over here we're going to have a component for our sidebar so some sidebar component for now we'll just go ahead and kind of comment this out and then over here we're going to have a v Main and over here we're gonna have our cards so we're going to iterate over our cards that's pretty much all it is actually that we need to do and notice here that we didn't have to import any of these components mainly because when we installed beautify if we were to go to our main.js it actually loaded all of these components to our app already so it's kind of globally inside of our application as a whole all right so now that we got that out of the way if we go back to our application over here you can see that nothing is displaying because these are just components that we can lay out our app now what we need to do is to go ahead and actually start building out these components and we're going to start off with the sidebar so let's do that in the next section alrighty so now that we have laid out our application let's actually utilize if you defy to build out our very first component now specifically what we're going to build is this component right over here so this sidebar that kind of expands on Hover well you know I really like it it looks really good and you can probably imagine how difficult it would be to actually build a component like this by using plain old view without any UI libraries so how are we going to build this well anytime that I have a component idea that I want to build what I do is I go to the documentation I then go to the components section and I start scrolling through the components until I find the one that I want now specifically for the sidebar it's actually called navigation drawers inside of beautify so I'm going to go ahead and click on this and then I'm just going to go ahead and just find look at all the components and see if there's one that I like there's this one right over here so when I click on this you can get this navigation effect not the biggest fan I like this one right over here where we have this sidebar and I hover over it and ta-da there you go you can see that you know kind of everything expands really smoothly it's just really awesome you can see that there's other ones out there there's like this one over here that expands when you click it and then you can of course unexpand it expand it again there's floating values are just kind of always there but again I prefer this one and I want to incorporate this one right over here into my app so how do we do that well what I want to do is I want to incorporate this component into my actual application so what I actually end up doing is I click on The View source to see how they built out this component with viewify so you can see here if you kind of don't mind the V layout because we already have a v app you can just kind of start over here here you can see that they have built a v navigation drawer component they give it the option of expand on Hover they give it the option of rail and then that is pretty much going to be the component itself and actually we can just go ahead and quickly test this out so over here let's actually create a component called sidebar Dot View we're going to say template templates come on templates autofill for me there we go okay so we're going to utilize this component which is going to be V navigation drawer and I am going to change it so it's title case so we're going to say V navigation drawer like so we're going to go ahead and utilize this component and I'm just going to say hello right in there and now what we're going to do is we're going to go right over here we're going to create some script tag so we're going to use the setup function and we're just going to go ahead and import sidebar from and we're going to import that from components dot sidebar and over here let's just render our sidebar so we're going to say sidebar like so so now if we were to take a look at our application you can see that we have this sidebar so we indeed are getting this component so now to kind of have it have this really cool effect we can start adding some props specifically let's do the expand on Hover so it doesn't expand right away so over here let's say expand on Hover and there we go now if I were to go here you can see that it's not quite working that's because we also need this com this prop right over here which is rail so I'm going to go ahead and save that and right away you can see now we have you know it's a rail and then it expands on Hover you might not be able to see it but you can see that there's kind of this like faint line right over here and you can see that it is indeed expanding on Hover okay so that's pretty cool but now what I want is I kind of want this Avatar so to utilize the Avatar they utilized a v-list and then within the V list they have a v list item and what they're doing is they have this prop called prepend Avatar so what I'm going to do is I'm going to go ahead and just copy this and paste that right in here so I'm going to paste this Avatar right here again I'm going to just change everything to title case because it's just what I prefer but you don't have to do that and then over here we have this V list item so the list item and then the list item like so and of course here we have an avatar now you can pick whatever Avatar you want I'm just going to change the name to lathe harb I'll just change the email it's just to make it nice and personal to lathe gmail.com so now Tada we have an avatar how cool is that if I hover over it you can see that the Avatar kind of gets bigger and my name's display all right so now what we want is we want to have the ability to go ahead and uh well click on either the colored option so you can see here the colored options or the grade list options so how do they do that over here well the first thing is that they use a divider to divide the avatar from the actual list itself so let's actually do that ourselves so over here we have our V list and we're going to say V divider divider and then over here you can see now we have this cool little divider and now what we're going to do is we're going to add another v-list so we're going to say V list and we're going to give it the prop of density compact we're also going to give it the nav so we want to treat this one as a navigation and then over here we're going to give it a v-list item but instead of prepend Avatar we're going to give it the prop of prepend Icon so what's actually really nice about beautify is it comes with a bunch of icons right off the back so we don't even have to install an icon Library so let's actually just go ahead and copy this or maybe you know what we can just write it out ourselves so we can say V list so V list like so we're going to give it the density prop of compact or actually is that the yeah density prop of compact and then we're going to give it the nav prop as well so we're going to go ahead and save that and then within it we're going to have the V list items we're going to say V list item like so and this time we're going to go ahead and give it some other props so the prop that we're going to give it is going to be the prepend icon so prepend and then Dash icon like so I believe that's what they call it here yes so prepend icon and over here we're going to supply it with the icons that we want now where are the icons what we can actually do here is of course let's open up a new uh documentation here just a new tab of the documentation and you can go to Styles and animations I believe the icons are somewhere here let me go ahead and just search for icons themselves there we go so you can see here we can click on these icons and you can go over here you can see that there's multiple different classes for these icons so you can see that this is MDI domain we'll get you this icon and then you can just kind of pick whatever icon it is that you want now you can go to the documentation figure out exactly what I want but in in my case I want the image icon so I'm going to say MDI and then Dash image like so so I'm going to go ahead and save this and let's take a look and right away you can see that we have this image icon now of course what I also want is I want to add uh I want to add let's go back to the code here I want to add my name there or whatever it is called so I can go over here and actually provide it with a title as well as a value so let's go here and actually maybe we can even make this self-closing because it's all props so I'm going to say title I'm going to say color and we're going to go ahead and save that and then right away now if I were to go here you can see we got color and maybe we can say color Gallery just to make it nice and gallery like so we can also give it a value in case we want to have a value for this I'm just going to call it color like so all right so that looks pretty good now I need another one so I'm going to go ahead and click on this again and we're going to click on this once more and now when we append another one you can see we have two so of course it'd be nice if you can have two different icons one for color one for gallery but uh I could we can kind of change this to whatever it is that we want let's just change it to something else because I don't think they have uh something good for that so we can go over here and let's just change it to what can we change it to uh let's change it to this kind of dot dot dots which is going to be uh which is going to be this one right here this one let's copy that just so we can have a different icon we're gonna go over here we're gonna say it Gray gray space gallery and now we're going to go over here to our application you can see here we have the gray space and we also have the color and that's actually all it is that we need to do we really just have to look at the documentation and then adjust it the way that we want it to so you can see here that's pretty much all it is that we need to get that navigation and just look how easy that was imagine how hard it would have been if we had to build this out on our own and that's actually all it is that we need to do so now that we got that out of the way let's actually go ahead and start working with the the main so the V main of course is going to be this portion right here where we're going to append all of our cards alrighty my good friends now that we are familiar with the beautify components we actually went ahead and built a very nice and beautiful sidebar component let's actually move on to another concept that is very very important in beautify and that is the grid system it's actually really really important that we understand this because you're going to be utilizing the grid components throughout your viewify journey so before we actually move into this let's quickly look at what we eventually want to build so we have this sidebar which is nice but eventually we want to have these images and you can see that these images are kind of divided into rows and columns so we have these rows and then within each row we have 12 different images so what we want to do is we want to build a grid system exactly like this so how do we do that well let's go to the beautify documentation and if you go to the beautify documentation go to components and go to grid you can see here the grid system so if you were to look over here you can see that this is sort of what we want to build we have a row here and then within a row we're going to have multiple different columns now of course what we want is 12 but we want is 12 uh kind of columns within a row but in this case they have three so let's go ahead and just take a look at how they did it and then maybe we can go ahead and modify it our way so if we were to look at the code and let's just ignore the V container I want you to focus in on these two components I'm going to really try to zoom in here we have the view row and we also have the view column now in the view row we don't really have a lot of props other than this no gutters that we're not really going to talk about but over here in is the view column and this is where I want to focus in on so over here we have just a regular V4 directive we're just iterating over three so we render three cards and then over here we're providing it with a key but specifically I want to focus in on this section right over here calls 12 and then small four what does this mean because this actually means a lot and it's very very important and instead of just kind of iterating or it's it over to you I'm gonna try to explain it through a diagram so let's go back over here and let's talk about exactly what we want to achieve so we want to have well 12 cards in a row each card is going to house an image so this is eventually what we want so what are we going to do to achieve this with the grid system well we're going to have a v row which makes sense to me we're going to have one V row and then within this view row we're gonna have our cards now the V row is assigned an arbitrary length of 12. so you might not really understand what this means but if you are are familiar with the grid system as well as flexbox you might be familiar with this but right now you could just say it's given an arbitrary length of 12. and now what we want to do is we want to start fitting columns into this row so what we actually need to do is figure out the length of each particular column now let's say what we want to do is we want to have well 12 different and cards in the row then what we're going to do is we're going to give this a length of 1. so because the row has a length of 12 what we're going to be able to do is fit in 12 different cards inside of this row so this length of 12 again is arbitrary so it actually depends on how long the V row is so let's say our V row is 100 or 1200 pixels just to make the math easy then right over here our V columns over here each particular one is going to be 100 pixels as you can see here that's exactly what it is let's say our V Rose length is 2 400 pixels then each column is going to have a length of 200 pixels so again it's arbitrary but at the end of the day we're always going to fit well 12 Cards into this row but let's say this is not what we want to achieve instead what we wanted to achieve is maybe we want to have six cards in a row so instead what we would do is we would say the calls length is two so we're going to say it is going to be 2 out of 12. so you can see now it is doubled and now we can only fit six inside of a row rather than having 12 like we used to now you can imagine if we want one or we want three or whatever we can just adjust this column value and instead of kind of looking at it let's go ahead and actually just code this out so I'm going to go over here and I'm going to create a new component I'm going to call this image Gallery like so image gallery Dot View let's go ahead and create that I'm going to create a template tag and then I'm going to create a v row like so so I'm gonna have a v row and then within this V row we're going to have the columns so we're going to say V column like so I'm just going to say hello for now and actually maybe just to really make this nice and apparent we're going to say v card inside of the column and then in here we're going to say hello so let's go here and we're gonna instead of this comment let's get rid of that comment we are going to say image gallery and notice that I just went ahead and auto imported it so image gallery so see how that looks right now so you can see we get this kind of uh I'm gonna zoom in here a little bit you can get this card that spans the entire thing okay so that makes sense but maybe I don't want it to span the entire thing what I wanted to do is I wanted to span just uh maybe 1 12 of the entire thing so what would I do here well what I would need to do is specifically tell the column that hey I want you to be 1 12 of the row okay nice and easy I can just pass in a prop here that says calls and I can just say very simply one and if I were to do that now you can see that it is indeed 1 12. and we can actually see this if I were to add a V4 directive and I were to say n in 12 you can see that all 12 are actually going to fit perfectly inside of this V row if I were to change this to 13 for example we're going to have one more right over here okay so I hope that is nice and clear now of course let's say I want to have um let's say I want to have four cards on a row well in this case we're going to change the column to 3. so because this is going to be uh well 3 12 of it and the 3 12 is going to be 4. so we can fit basically four threes in a 12 unless we're gonna have one two three four so I hope that is nice and clear and it makes a lot of sense now of course we can do a lot of different fancy things with our column so we can kind of use the flex box to decide where we want to align them do we want to align them in the start in the center in the end you can see here we can have different kind of patterns over here you can justify them we're not going to go through all of this because again it's just way too much but really whatever kind of uh layout you want you can just look through the documentation and try to see if you can find it now nonetheless now that we actually understand this let's go ahead and start building out our images right over here so I am going to go right here I'm going to build out this image so I'm going to go here we have our v card and within our v card we're going to utilize the the image a component and if we were to go over here to our documentation we can of course go to images and actually there is some code here that is going to really help us out with building out our images because this is pretty much what we want so you can see here that they're also using the V4 or V row and they're also using V columns and over here you can see that there is this V image this V image this V image component that we can utilize so let's actually just go ahead and utilize this so we're going to go over here and then within our v card we're going to utilize the image so we're going to say V image like so and within here we're just going to accept a lot of different props so the first prop is going to be the source prop now the source prop is something we're just going to kind of automatically generate we're going to be utilizing what they used over here which is pixum which is just kind of a lorem ipsum pixel so you can see here this is just lorem ipsum you can just get any kind of images that we want just for just random images so this is what we're going to use we're going to use this endpoint right over here and you can see that the format is ipsum.photo and then the the size of the photo and then we can specify an image by doing image is equal to whatever the ID of that particular image is so what they did was they kind of just iterated over um you know an arbitrary number so they did nine in this case we're gonna do like 200 because we want a lot of images so let's go over here and let's just say V in 200 and then we're just going to copy this here and just paste that in there just paste that right in there I'm going to go ahead and save that and there we go we can see we get these wonderful different images now of course the um the sizing isn't the way that we want it to so what we can do here is change the column to one and that should make it nice and small and another thing that I actually want to talk about is the aspect ratio because so let me actually make this a little bit bigger here you can see here that the aspect ratio is a little bit different than what we had over here you can see that over here they're all squares whereas here they're kind of uh well they're rectangular right so what we can do is actually change the aspect to be one and that's going to make them nice and square so if I were to refresh here and they're not squares sorry the prop is aspect ratio and if I were to save that now you can see now they are indeed squares they don't look great they don't seem like they're a fitting in as well as I want them to so what we can do is add the prop of cover and now you can see that they're covering the entire card itself okay so that is actually looking pretty good now I'm going to go ahead and kind of move this back to one just so we can kind of have this again now over here you can see that there's some cards that are not rendering so you can see that they're just they're not there maybe we just couldn't find them or we're still making that request so I think it would actually be nice if you know instead of when we refresh we're just not rendering the cards they're all white we kind of have a nice really cool loading state and we can actually do that extremely easily by utilizing slots so right over here excuse me right over here we can actually have a template and this is just a very uh common thing this is slot so we can add this is just a view thing rather than a uh a beautify thing we can go over here we can say slot we're going to specify the placeholder slot and then within here let we can add whatever component it is that we want so I'm going to actually add a v Row in here and we are going to give this some classes so you can actually see what they did over here so they have the class of this so there's a lot of built-in classes over here that we can utilize we can go ahead and just paste that in there paste these classes in here so we can give this the V row and then within this V row we can also utilize this right over here which is the V Progressive Circle which is kind of a loading state so we can go here here and here and if I were to hover over this and we're going to change this to V Progressive Circle V Progressive circle like so all right so now we can go ahead and save this and now if I were to refresh you can see that we get this nice really cool loading state I think it actually would be also pretty nice if what we can do is instead of having this white background at the very end we can have some sort of image maybe uh I don't know just some sort of image in the background and so what we can do here actually to do that is we can also provide a lazy source so we can say lazy source so lazy Dash Source we can say that that is going to be equal to maybe this image right over here but we can say that the uh the the the quality maybe is not as good or the size is not as big so over here we can say something like um ten by six or something like that so 10 by 6. so by reducing the size it's actually going to make the quality not the best so now you can see here we kind of get this really low quality one that's going to render immediately and or Maybe not immediately but pretty fast and then the higher quality one is going to go ahead and render so you can see it's just a nicer experience and what's really nice about beautify is that if we're actually not rendering the components it's just going to go ahead and start loading them out as we go so we don't have to get all of the images for all of our different things just going to load them out as we scroll all right so that's pretty cool so because of this we were able to achieve this awesome effect of having our grid system as well as all of these different images all right so now let's just do a little bit of more modification kind of clean this up making it a little bit better and then let's make it functional and then we are all done actually before we do that I want to tell you how we can make this grid system responsive so right now if I were to kind of inspect it and decrease the screen size you can see when we get to Mobile it gets really really really small and honestly it just it's not very feasible so I think it would be nice if it could just increase the width of the columns when they are well when the screen size is this small and luckily actually we can do that with the grid system really easily by utilizing props so right over here you can see that small is between 600 pixels and then 960 pixels and over here we can specify the length of the columns so for example we can just leave it by default as six for example over here and by default what that's going to do is if we were to go to our application it's going to make it a two by two and then let's say once we reach the 600 pixel Mark or actually what was the Mark here it was from yeah from 600 pixels to 900 pixels then what we want to do is maybe we want to change it to become three rows so what we would do here is we would specify the small and we would say 4 for example and then over here we would increment this until we reached the 600 pixel Mark and there we go so now you can see that it has three and honestly that is kind of not looking all too great with two so maybe I can change this one to four and maybe I can change this one to be three so now you can see here we got four and over here you can see you know on mobile view I think this is actually a pretty good size all right so you can see that this is actually working A-Okay and maybe you know after after we hit the medium we can change it to like two by two or uh let's go over here once we hit the media maybe we can make it two and then once we hit the large I think at that point we can make it one so you can see here that we can get all kinds of responsiveness so let's just make this a little bit larger here blah blah blah maybe even zoom out because it's a little bit too zoomed in here okay so you can see that you know it's working the way that we expect it to so that's how we can kind of make our grid responsive now you can just work however way you wanted to but this is just what we would utilize tin what we're going to do is kind of modify our main component just to make it look a little bit nicer and what we're going to do is we're going to utilize some built-in beautify CSS classes to do so so what do I mean by this well what I would like to do is I would kind of like to wrap all of this inside of the card component and then I would like to give it some margin as well as some padding so that it's not kind of old to the side if we were to look at the final version you can see maybe very very faintly and if I were to zoom in here maybe it'll be a little easier you can see that all these cards all these images right over here are wrapped inside of this card and you can see that there's actually some margin and padding between the uh zoom out a bit between this portion right over here as well as the card so we're going to figure out actually how we can do this and apply these Styles so let's go back to our version right over here you can see not the prettiest one in the world and what we're very simply going to do is right over here inside of this image gallery component we are going going to wrap everything with AV card so we're going to say v card and we're just gonna wrap everything with that so we're going to say v card v card like so all right let's tabulate everything here and now if I were to save this in order to go back uh it might be really hard to see but we are indeed wrapping everything with AV card if I were to scroll down you can see kind of there's a line there however it's really hard to see because there are no paddings there's no styling no whatever so you might be thinking okay that's pretty easy what I can very simply do is on this vCard component I can go ahead and add a class and then add some margins some padding Etc and you can most definitely do that if you want to however I don't suggest doing that I instead suggest using some of the built-in classes that come with beautify so over here what I can actually do is say class is equal to and I can utilize some of the beautify classes how do we know what the classes are well of course what we do is we go to the documentation over here we have styles and animations you can see all of the different classes and now over here maybe I want some CSS spacing helpers but again there's more there's some for text for example so if you want a specific text maybe you want a really big text you're going to use this class over here which is text H1 text H2 text H3 maybe you want you know some cool transitions you would use classes for that maybe you want sizing classes so you want maybe the height of your cards to be 100 VH so you would use H screen now in our case what we want to do is some spacing so CSS spacing and specifically we want to add some margin as well as some padding so let's go ahead and start adding some margin to the card and I want maybe some margin just horizontally so just on the x-axis so from left to right so over here you can see that this is how the classes are going to look so it's going to be if I wanted to apply some margin it would be M and then a is for all so for all directions but maybe I don't want all maybe I want just the top I would say t for that bottom bottom and then L is for left then right s I'm not really sure what that is but if I want just from the horizontal I would say x so you can see here uh if I were to go back to all if I were to go back to all here you can see that if I go back to all we're going to have some margin as well in the in the y direction so you can see it kind of moves in the y direction whereas over here we only have the margin in the X Direction and over here we can actually specify a size meaning how much margin do we want so you can see here if we want a lot of margin a little margin Etc of course we can do the exact same thing with the padding so let's go over here and I'm going to specify a margin of X and we're going to say five so margin x five and as soon as I do that you can see that now it's not like completely spaced out right over here and actually maybe we can even just do a margin X all just to kind of have it you know from the top as well as the bottom because I believe that's kind of what I have over here and actually I have a little bit less over here so what we can do to kind of fix this is have two different styles so margin X of five and the margin y of two so now we got that done and of course now I want some padding so let's add padding in all directions of three now if I add that padding Tada so you can see now it's not kind of shoved in there at all so this is looking amazing this is pretty great alrighty my good friends at this point we are pretty much done with the beautify portion of things right now we're just going to kind of work on our typical view knowledge in order to well make this application functional so right now of course it is looking pretty good but what we want to do is we want to make this clickable and as soon as I click this I want to copy the URL to my clipboard and I also want the ability to kind of click on either one of these and then change this to be either gray or color so again this isn't really going to be anything beautify related but what we're going to do is we're going to kind of tie in all of the typical view knowledge that we have and all the typical view functionalities that we have with these beautify components so let's actually go ahead and do that and so what we're going to do is we're going to start off with are these right over here so we're going to kind of figure out the logic for either making this gray or not gray now in order to understand this what we need to do is we need to go to the lorem pixum and you can see here that this is the URL in order to get um just a regular image all colorful however what we can do is we can actually add the query param of grayscale and that's going to change the image to gray so if I were to go to my image gallery right over here and I were to add over here I would say and and grayscale so gray scale like so and did you use it okay the I was wondering if they used an e or an A if I were to do that and I wanted to go over here you can see now all of the images turn gray so what we need to do is basically conditionally add this portion right over here to the URL depending on what state we are in so let's go to our app component and what we're going to do is we're going to import ref so we're going to import ref from View and what we're going to do is we're going to say const and we're going to say is with color and that is going to be equal to ref true okay so that is what we are going to do and what is going to change this over here well what's going to change it is going to be the sidebar component now because the sidebar component is a child of the parent components which is the app in order to change this what we're going to do is we're going to listen to a specific event and whenever this event occurs we're going to go ahead and update and change this so inside of the sidebar component what we're going to need to do is actually emit an event anytime that we click on either of the list items so let's just go ahead and do that and again this is just kind of typical view knowledge that I do expect you to have already so over here let's create a script setup and what we're going to do is we're going to import Define emits from View all right so that's what we are going to go ahead and import and over here we're going to say const emits is going to be equal to Define emits and we're going to call this emit what should we call this we're going to say select option so that is going to be the emit that we have here and so whenever we click on let's say this right over here so this one's color let's actually add a click Handler to this so we're going to say act click so we're going to add this click Handler and what we're going to do is we're going to call a function and we're going to call this function select option as well we're going to invoke it and we're going to pass in uh true for this because that's true and over here we're going to have another function we're going to have another click Handler and this time false and so over here what we can do is we can actually create this function called select option and what this function is going to do is except obviously you know is color the parameter and what we're going to do is we're going to emit the select option event so we're going to say Emit and then we're going to say emits and what are we emitting here we're emitting select option and we're also passing the value of is color so now what we can actually do is we'll take advantage of this emission inside of the app component so in the app component let's go back over here we can actually listen to this event so we can say at select option and we can call a function called I don't know on select option we can just call this function over here now of course we haven't defined this function yet so let's just say const on select option and this is going to take in the value that we have passed in here so whether it's whether it's true or false where is that right here so whether it's true or false so we're going to say is color and then over here we're very simply just going to update is with color dot value to be equal to is color and just to kind of prove that this works let's just go here just double test it we're going to say is with color and initially if we are to refresh something has occurred here that's causing an error let's look at our console select option is not defined where is that so add select option over here okay let me comment let me get rid of this just to see if this is the one that caused the failures you can save that all right alrighty that's not it so it's inside of the sidebar so select option I didn't Define oh oops see Daisy we should say const here so let's go back here now and there we go so you can see it's true now it's initially true so true to color and where did it go it was there okay when they zoom in you can see it but now when I click this zoom in now you can see it's false if I click on this again you can see it's true okay so that's good so indeed it is working so now we can go back over here we can get rid of this so now what we can do is we can actually pass this to our image gallery so they can say is with color as a prop over here so that's going to either be true or false so over here what we can do now is very simply go to our image gallery and conditionally render that query parameter depending on our props now of course to do this we're going to need access to the props so let's go over here we're going to say script setup and we're going to say import and then from view we're going to import Define props so Define props like so all right looking good we're going to say const props is going to be equal to Define props then over here the prop that we have want to Define is going to be is with color so now we have access to this prop over here so what we can do very Simply Now is go to our URLs here and we can add that conditional rendering so let's go right uh let's go right over here and now we have a problem actually we have here this is called props and this is also called props so let's just call this uh we'll call it P for now just to make it nice and simple so over here what we can do as we can say dollar sign curly braces because we're using template literals here and we can say prop dot is with color if that's true then what we want to do is we want to kind of show nothing however if it's not true so if it's true we we don't want to render anything however if it's uh if it's not true if it's actually grayscale then what we want to do is add that grayscale so we're going to say end and gray scale like so so this is what we are going to add let's actually add that over here as well so we're gonna add that here as well so theoretically now this actually should work so uh but we're getting an error so let's see why that is refresh so we're getting some module error okay I see what that I see what this is this should be just a single quote like so let's get rid of these double quotes now do a quick little refresh and of course we still have these double quotes let's get rid of those there we go there we go okay so that was the problem now another issue that I'm seeing here is why do we have two template literals here let's get rid of that one okay so that looks pretty good to me let's go ahead and save this now let's go back there we go okay it's working now if I click here you can see now we get the gray images okay so that is the very first piece of functionality now the other piece of functionality that we want to add is the uh whenever I click I want to kind of save this to my clipboard so let's go over here and I want to click on this card and I'm just going to say whenever we click on this card I am going to call a function called copy URL so let's go here and let's actually create this function so we're going to say copy const copy URL and this is going to take in a parameter called URL now let's actually go ahead and actually pass this in right over here so we can just kind of grab this one right here and just kind of paste that as well now why did that change the color of it uh maybe I didn't copy it correctly let's crack copy the whole thing from template literal to template literal there we go so now we have passed this in so what we can do here now is actually kind of copy this to our clipboard now do I expect you to know how to copy something to your clipboard probably not so the best thing that you can actually do is just go to stack Overflow how to copy a text to clipboard to clipboard in JS something like that so you can go to stack Overflow and stock overflow says oh use navigator.clipboard and then dot write text so this is what we are going to utilize now this over here I believe this is asynchronous so we're going to actually make this async as you can see here access is asynchronous and it uses a promise so over here what we're going to very simply do is make this a sync and then what we are going to do is we're going to utilize what we have just learned so we're going to say await and then we're going to say navigator and then dot clipboard and then dot write text and very simply we're going to pass in that URL and at that point the functionality of our application should be completely done so if I were to click on let's say this image and then I were to paste it in here I hope that does work and as you can see it does indeed so hopefully you guys learned a lot and you guys are proud of this part particular project I think it's a really neat project and it really gets you learning about beautify

Channel: Laith Academy

Views: 66,930

Keywords:

Id: PzXaFXgsp60

Length: 58min 41sec (3521 seconds)

Published: Sat Oct 08 2022