Vuetify Tutorial #3 - Vuetify Basics

Key Takeaways

alright then so remember that beautify is a UI component framework and we use those UI components to structure our code much like this right here we can see all of these different custom UI components now first of all very important at the top is this v app this is the root component we use in from of the UT file and that's important it has to be the root beautifly component and all your other beautified components should be nested inside that whether inside some kind of other route which is nested in here or directly like these things and that's because this is a bit of a mounting point for different beautified components okay now then we have this V toolbar next and that in the browser looks a bit like this but if we inspect then we're not going to see a V toolbar because that's not an HTML element what we actually get is a now first of all and then a div with a class of V - toolbar so this thing right here this V - toolbar this is a beautified component much like we create our own components over here beautify in its library has its own components and when we load these components in our template those components render some HTML ok so that HTML is what we see right here and not only does it render some HTML it also comes baked with some different functionality now how can we access that different functionality well we use props we can add props to these components much like we add props to our own components for example I could give a prop right here to the V toolbar of dark let's just do that and save it and then if we take a look at this we can see we now have a dark toolbar now props don't always need values assigned to them so this one for example doesn't say dark equals something it's just a prop name and that controls the functionality of this toolbar component it makes it dark we can also use the keyword light here instead but that is the default value if I do this then we're gonna see its light but that is what it was like to begin with we don't need to explicitly write this ok so we can also add different props which have values for example I could say height this is a prop that we can add to the toolbar and this height could be 150 so save that and view this in a browser and now notice this is a gigantic toolbar so this is one instance where we're adding a prop to the toolbar which has a value okay now much like materialized CSS we also get a load of classes that we can use as well in beautifying for example we could say class equals and then give this a class of indigo and what that will do is give this a background color of indigo and we can see that right here so notice that the text is still black and it doesn't really stand down so we could add another class for white text or what we could do is add back in that dark prop and this says hey we want to use the dark theme for the toolbar and it calls it black by default and it calls the text white but then what we're doing is overriding the black background with this indigo class so if we save that we should just get the light text the white text because of the dark prop and we still get that into your background alright so this is the crux of these different components we can add different props to them like this and we can add different classes to them to give them extra styling alright notice as well we also have this app prop right here and what that does is make our navbar right here our toolbar fixed at the top of the page so if I scroll down it's not going off the page it's coming down with us it makes it fixed if I delete this then preview in a browser again then it shouldn't be fixed at the top all right so all of these different props and classes do different things to these different beautified components now in beautify there are a lot of different components and each component can have a lot of different props so it's not wise to remember everything and I don't recommend that you do remember all of these different components and props unless you're using a copper mine but what you should do is check out the documentation right here it's actually really thorough go to beautify Jay s comm and click get started and I suggest this becomes your new best friend while you're learning beautify what you can do is scroll down all of the different components down here or you can just search with something like to your bar for example and then click on that and then over here it's going to give you some code examples of how to set up this and also we can see these different props right here so all of these things we've seen up and we've seen dark down here and height if we go down should be here as well all of these different props can be added to the toolbar component and they all do different things now like I said there are tons of different components and tons of different props and I'm not going to be able to cover absolutely everything inside this series so if you're unsure just always check out the documentation and see what other props you can add so what I'm gonna do now is go back and I'm going to delete a lot of this code so I'm gonna get rid of all of this stuff right here so we have now v-app remember that needs to stay there and that needs to be the root component for us we're going to keep that and inside v up I'm going to keep v content this is typically where we place all our actual page content so the nav bar might be above the footer might be below but all of the page content should be inside v content and what I'm gonna do is delete hello world we don't want that component anymore I'm gonna replace this with router - view because when we go to a certain route this is where I would like that route component to load so for example if we go to forward slash it's going to load up the home component if we go to forward slash about it's going to load up the about component and it does that because when we started this view project we wanted to set up the router and it's already created this router file for us so right here we're saying the path is forward slash for the home component and the path is forward slash about for the about component this right here is lazy loading I'm not going to cover that right now that's a view thing but essentially it does the same thing it just loads up the about component we go to forward-slash about so those now are gonna get dunked in here those components when we go to those routes okay so we no longer need hello world right here and we no longer need to register it right here either so let's save that I'm also gonna delete the hello world component so let me click that and delete it and then if we go to views now we can see we just have the whole and about again inside home we don't need hello world so let's get rid of that and let's get rid of the import as well and scoot this back in a little and here we don't need hello world either what I'm going to do is a simple template just a deer for the class of home and then inside that I'll do an h1 which says home page and save that and then inside about dot view that is fine as well we'll keep that as ease so now we've deleted all of this extra component stuff right here and inside these two here so these are the three components we have if we now go to forward slash on its own we get the home page and if we go to fold slash about we get the about page none of that beautify stuff is here anymore we just have the app which is the route beautify component and V content which is surrounding the route of view this is typically what we do okay so now we've got the basics out of the way let's start in the next video and take a look at how we can manipulate text and colors