hey welcome to bitfumes I am your host sarthak and this video is about really amazing beautify framework so beautify is a material framework for view.js it's really really powerful and it can reduce your designing time to half I can say that this is true because we are going to design this whole amazing beautify designs in just one and half hour so you can see it's having a nice little Carousel we don't have to Define it they have the carousel just add it and you are done then we have this link to get the home we have this link to the login page and there is a transition if you can see there is a fading transition for the paid changes that's really powerful inside this beautifier you don't have to worry about learning transition with the vue.js because it's inbuilted inside of the view Json it's super easy to use then we have this icon we have this batch on this icon and you can see whenever I click here there is a nice little transition for opening off all these messages for the notifications and all these messages are having different icon with the different color and this is coming from the beautify material design Frameworks so material design icon we are using here for these kind of Icon and the best part is it's a dark theme but if you are a fan of light theme I don't know if you are or not then you can use this button and we are doing this with the help of beautify hooks which is called use theme which is able to change the theme from anywhere of your project from anywhere on your application that's powerful but here we have a very little nice login page this login page include email password remember me submit button and register button all these designs we have done very easily with the global configuration in our view defy yes we can Define everything on the global configuration so here you can see this email field is required so just by moving out of that field without typing anything it says that hey required field is there and this design also coming from the beautify so if I submit you can see it say that you need to pass these things so I say hey okay I will pass this to here and password and you can see it's a nice icon there on these two fields and I can check remember me and click on submit there's a overlay and at the center there is a nice uh you can say circular progress bar which is indicating to the user that something is happening there inside your application and finally it's submitted so right now I'm just showing the alert button because this tutorial is not about backend is just about the designing so we have done this with the help of beautify I really like how it just have overlay of the screen and then have a nice little circular progress bar all these things yes all of these things whatever you see here is coming because of the beautify so let's start this amazing video but before moving forward I can tell you that if you have not yet subscribed to bitfreem's YouTube channel this is the time because this is the time you can subscribe and just motivate me to create more amazing videos because you know the subscription rate on bitfumes YouTube channel is very low but I want to increase it and that can only possible if you yes you can help me by hitting subscribe button if you have already done then that find your friends and tell them that hey just subscribe to bitums YouTube because this is the guy who is creating amazing videos on YouTube okay so now time to start or get your hand dirty with beautify to get started with beautify first we need to visit beautifyjs.com and then click on this get started so there are many ways to get started with beautify and the most common is using yarn create or npm create beautify command this is actually going to create a vue.js project and install the beautify by default but this approach is not good for learning especially if you want to use this beautify in your existing project of vue.js so before moving forward I can tell you that beautify is on version 3 so it's a beautify three if you want to go to view three by two you can visit this this means since it's a beautify 3 it's based on the view view js3 so choose the version of beautify according to your view JS version so what I'm going to do actually I'm going to start with a vue.js project and then see how we can set up the beautify in a existing view JS application so to get started with vue.js I need to just search for view view JS and then say get started and actually I need to do quick start and now npm create View latest so I can use that so first of all I can open the terminal I can go to the desktop and I can say make directory or I don't want to make directory because this command we're going to create a new directory for me so it says that you want to create view package yes so which what is the package name so it's beautify do you need typescript yes I need jsx support no router yes router is important Pina no you need y test not right now any other end-to-end solution no eslint right now I say no and you can see it says everything is done so just go into beautify project and open this with vs code now since this is opened with vs code we just need to say npm install and then run the npm Run Dev while this is doing all these things I can tell you that vue.js is now using white white is a package manager but it's more than that it is a revolutionary thing which is extremely extremely fast and you can define a lot of amazing things in the white configuration and that's why when you open the package.json the dev command is just white okay so you can see npm install is done and now I say npm run Dev to get a start with my vue.js application so my view.js is there but how this vue.js will connect to beautify so the first thing you need to do obviously inside the getting started with beautify section you need to go and you need to add beautify so I can use the npm command so I say first of all let's get in it and get learn beautify get learn beautify that's good and now whatever I do I will I can track so npm install beautify so View tify like this okay so this is good and it's going to install the beautify and once beautify is there it will be available in our package.json which is right here good so we already have the beautify now we need to configure beautify to our view.js application so first of all we need all these three things beautify style create beautify everything component from beautify and directive and then beautify and then say that app can use the beautify so copy that oops Yeah go here open the source and inside the main you can see here I can just say hey all these things are here but app can also use beautify which we have just given here okay so that's done and now what if I just restart my Dev server and see there is no issue even no problem with the console that means we can now get started with beautify but you can see right now we have a home page of vue.js how we can remove that for that we need to First understand the directory structure and then move forward in the beautify but before moving forward I can just see that if I miss anything okay so I have not missed anything I can now start understanding the file structure and go into deep so first to understand this directory structure of vue.js you need to understand from where this page is coming I generally start with any text we have and start to search here on the vs code and it says it is from the app Dot View so let's try to change it and see if it is reflecting on our home page and yes it's reflecting that means it is good we are going to start with this app.view which is actually available inside the source directory so here we have the source directory but from where this app.view get triggered everything starts from main.ts so if I open the main.ts you can see in this main.ts we are actually importing this app which is app.view and then we are creating a new instance of view and we have already added in the last section for this beautify and finally mounted this app on a div with the ID of app but where this div is available inside this index.html so here you can see this div is there which is having this idea of app now this is the page which is rendering this so you can see white app it's written at the top so I can say white app with Sims and eventually you can see we are having this as in the title so this is how it gets started but what about all other things and what this app Dot View include it include all these things but the important things to notice here is this router view so just keeping this router View and I'm going to remove each and everything written here okay once I do that I can also remove any styling we have because we don't need any styling and just by removing that you can see we are left with this only thing so there has to be some place where this is available so let's go and check okay so welcome to view but how that worked when I have this router view then this is going to load the routes so if I just comment it and see that it's just a blank page and that blank page is coming because of this CSS files we are having here so what we can do we can remove these CSS files also so we have removed the CSS files this means I can remove that from my main dot TS files also in that case we get the White Blank Page now I can give a div with say hello world and yeah we have this but since we are on the view.js it's going to be having router based approach so we can get the router back from this and I need to do something like this and then import so that it will be added and this is actually going to add since we have removed every styling you can see there is no starring so this is going to add whatever router says now all these things will be handled by a router this router view will be replaced by the page or the component we defined in the router based on the query parameter or based on the URL basically so where is the router here's the router index.ts file this index.ts file is saying that when you visit the home page then it's going to load the home dot home View when you go to the about page it will load the about page so let's go to slash about this is an about page wow that's so easy so where is this home view so home view is inside this views so we have this home view where we have this welcome remember we search for document and we got this component called welcome so we have that now since we understand how view Works basically it worked from the router I'm going to keep this about View and the home view but I'm going to remove this welcome and change it with hello view D5 okay so now we should have hello beautify here great and now from the component I'm going to clean it up so I'm going to Simply remove everything we have inside this component that's good so we get the knowledge of how vue.js app is set up what is the purpose of each and every file how we can get it started which is from main.ts then we land into app Dot View every page on this will handled by a router whatever route we Define we Define which component we want to load all these Pages component or view component is inside this views and sub component will be inside this components directory okay so that's enough tour for the file section or explore exploring the file structure let's now really do something with the beautify now to get started with beautify we can go here on this and you can see on the left section we have lot of drop downs one is the feature where you can define a lot of amazing things but before going into the feature let's directly land into the components because here components is all we need what I want I want to have a simple nav bar is there any nav bar here so I can just zoom it up and scroll about the nav bar so there is no nav bar but there is a toolbar so this toolbar is really really useful so we can use this Toolbar to have it on our application there are variations given here and I would like to use the simplest one which is this one so let's see how it is used so it is used and I can copy entire template from here go to our home View and then I can replace everything so it seems like everything is done let's see if we are having any toolbar just like this or not if I go I can see something is there title is there I can zoom out so title is there but we don't have that black color we have some grayish type thing here so let's try to explore what it says it says gray light and four so this is the color so I will say darken four wow this is good it's a card so I don't want to have the card right now so I can remove the card now I just have the title or toolbar now it says density is compact what if I'm not providing the compact okay so having width like large width or height maybe and if I say compact it's having less height now this is going to be interesting if I do something like this see whatever I do here it's going to be reflected on the right side change and it's very smooth now it says it need icon we can't find any icon you can see there is no icon and there is some warning given here we will talk about this warning soon but let's first fix the eigen so when you go on the beautify you can go on the getting started installation you can search for Icon and here it's given you need to install material design icons in your project so maybe I can use so we need to import like this import MDI font CSS material design icon dot CSS so let's try that so we can open the right side and open the main.ts here we can have it but it will going to say that we don't have the we don't have this material icon yeah same thing so how we can add it so there has to be some place where we can don't forget to install to install the material I can we just need to scroll down and here we got the npm command okay so let's go and run this command and very soon we will have all the material icon and since we have imported like this we don't have to worry about any other things and it should give me the icon which is like this wow that's really really nice okay so we get till this point like having a toolbar so let's go back and see how this toolbar is looking it's great but still I am not happy because you can see if I go the one I have copied it's having white colored with blackish or gray background it's having very light gray this could be the color option but we have not defined any color option here so that's because we are right now using the dark scheme in our beautify website so if I switch to white background or light theme you can see it's exactly similar so we have achieved or we have added a nice toolbar here that's great so instead of this title I can say uh view defy okay that's good and now we have three icons here so instead of three icons it would be good if we have a login button so let's remove everything and instead of icon I want button and we already have this button so I can remove the button and I can say login now you will say how do you know that you need to remove this icon field from here and what will be the effect because if I add this icon seems nothing happened so everything is there in the documentation if I go here and I can search for buttons here we see that we have the buttons in this button you can see that you can have variations in your button like this you can also add outline but you can also make it icon when I use icon it will be like a round shaped so even if I have written log in here you can see it is having round shaped when I hover over it so let's go on the button and explore it more so we can see that if I have any button how do I get the code for this button so yeah if I click here it should be available somewhere it says that it's available view source code yeah so view source code is there if I zoom it like this okay so we got it now variation is very important so let's define the variation so instead of I can I say outline so is it going to work no why because we need to add it as a variation so instead of this I say variant now when I say variation is outlined you can see it is having outlined kind of things okay if you want to get deeper into any component this V BTN API is really helpful so if I go inside vbtn API then you can see we can Define like a lot of other things we can Define it is block we can Define border we can define color so let's have a color here so color is going to be let's say pink but if I Define pink it's just having the pink but I want pink uh darken four so that's good and now I have a very nice little uh login button but I want this to be smaller so there has to be some size thing here so width is there and yeah size is there so X is small is small large so I can Define that hey I want to define the size also and size is X small extra small or maybe just have the small one yes it is now becoming smaller so after this you can have lot of other things instead of defining text as here you can Define text like this that's also going to work which is you can see right now there are a lot more things you can Define but right now it is very good but you say that okay we have the login button how we can add a login page so it's going to be the vue.js thing not the you can say beautify thing so I will go here on the router index and add another route and that that route will say path is equal to login name is equal to login and the component we will going to have a login view page now let's create a login view page so I say login view Dot View and add a template and has a login page that's good so if I go here on the slash login yes we have the login page and if I go here I need to now move user from login button to login page so there is one amazing thing in beautify beautify button also can accept the router link so when we Define two that will take you to another component or another router page of vue.js so I say hey this is going to take me to the login so now if I go reload this page and click on login you can see it's now moved to the login page and you can you have also seen that it's not just a refreshing page it's just moving to the new page and we have not used the router link which is a basic vue.js routing so we can also Define like here we can Define 2 as login and we can remove the two from here from the button and that's also going to work so if I reload this page click on login you can see it's doing that but that's the power of beautify we don't want to use the router if we are using our beautify cool so that's really really nice and now what I want I want this Toolbar to be available every in every page so if I am on the login page that also can have the toolbar so that if I click on this beautify I can get back to my home page so this beautify can be a button or a simple text with the with the router link as making to the home page okay so that's good but next I want to make it make it white we haven't talked about color how I know that there is a pink color for the button how I know that darken 4 is there let's explore some colors and also let's explore how to have a layout system in beautify so to work on the layout system first you go on the navigation bar and then go to the features inside this feature you can see we have the application layout system this is absolutely important to have all the component working properly now you can see for the application layout we have various things like we app bar it's a container for navigation branding search Etc then we system bar that replace the phone's layout then drawer then we have a footer and bottom navigation so let's choose the footer and V app bar so there is example and it's given right here what you need to do you need to have the app layout so what if I use the app layout and see how this is going to reflect but make sure since you are creating a layout you should not use in any simple view instead you need to go inside of your app.view and then have this so since we are using view 3 we don't have to worry about having a single element inside the template so that's going to work okay so now something is wrong here what happened could not find injected layout why that happened maybe we have chosen wrong no so what happened here is this this V app bar or any layout thing has to be inside this V layout is it like that so let's try V layout and move everything here and see yes it's working wow that's good but there is one missing thing see at the top there is a note here and this note says that when you are using in your real application you need to have the V app just they have replaced with a V layout to show you here inside the example because of the minimum height of the V app so now let's convert this V layout to V app and then it's going to have same system but this is having the full 100 DBP dvh actually the height okay so this is for the app uh application bar but what if I just remove the application bar you can see behind the application bar we have our nav bar so now it's up to you do you want the application bar or you want the nav bar what you can do you can go inside home and you can have this toolbox toolbar and show some hello home and can we put this inside of the layout and yeah looking good but still we have a border here which is not that good so either you can use the toolbar or you can use the app bar it's up to you so what I'm going to you do is instead of app bar I'm going to use the toolbar great now we have the toolbar everything is good but then we need the V main so what is this V main is going to do so remember we have this V app bar when we do the V app bar we don't see this hello home for the home view that is because we need to add the V main here and once we have add this V main you can see Hello home is there this is exactly a simple container which is going to hold all of your pages okay so that's for the V Main and this is good and as I told you we have to have the toolbar so toolbar is there V main router is there so that's nice we can easily switch between home and login page and then now we need to have a form in the login page so that the user can log in obviously we are not going to make any real authentication it just a form how we can handle that let's do this in the form section of the viewify so first of all we need to once again go on the sidebar the drawer and then go to the components in the components we will find we have a form section so here we go on the form section and then we can click on this forms so when we click on this forms we have a nice little form which you can see right here lot of variations are there you can choose different kind of variations and let's now have very very simple and then later on we can style it so first of all I'm going to grab all these things go to our login page on the login view I'm going to paste it and when I paste it yes it's there but it should be having the first name and the last name kind of things so we can have a script and this script is going to have a setup method and here I say const form is equal to ref which is the ref from our vue.js and this should be having a name not the first name plus just the name or maybe just email actually and the password okay that's good so we have this and now we say form dot email and there is no rule for this this is email and one more text field which is for the password now how we can make it a password field and right now it says pgs missing script tag okay so it says that you need to use the Lang and TS because we are right now using uh typescript so everything everything is good and we should see the form but we have oh yep we got the form so now this password field should label as password now there are many ways we can modify and make this look better first of all you can see if I go on the left side the sidebar we have file input checkbox autocomplete but we also have a text field so in the text field we can have various thing we can have the icon also so you can play around with the text field here so here is a text field with the outlined underlined Solo solo filled solo inverted so I like the solo so what if I just say solo here is this going to work no I think we need to do in a different way so we can find out by having it like this so that it will reveal the code sometime this beautify website is not that good it's not revealing the code yeah so variant is solo so it's going to have variant as solo not just solo so variant as solo and yeah this is good and same variant I want for the email wow that's looking really really nice now it says that you can also add any icon so prepend any icon so how we can prevent any icon so let's take any example from the examples section and we can then use that so maybe I can search yeah so a lot of examples here given so we just need to say prepend icon and then Define any icon so I say prepend I can MDI mail it it's for the email but this is prepending icon I want to have inside of that which is the third one so first second and third so it's like append I cannot prepend okay so append goes to the right append inner or maybe prepend you know oops inner like this cool this is nice so do we have the email yeah we have the email great so then we have password no there's a key yeah if we can use that now if you really want to find what are the icons you can use just search for material icon and you will get list of the icon you can just use the name along with that so like we have the search so I can say MDI search web oh so there are some different ways you can use that and then you can have a nice little form cool so this is good but still password field has to be with the asterisk so it's going to be the easy thing I need to Define type as password and when I type you can see it's typing so this is for our text field so text field is there and then we always need a remember me or kind of check box so let's have a check box here so go to the check box and obviously it's going to be different variations so let's grab any one check box and then we say hey this is a check box and form dot remember so I can add remember as false so this is good and we are having it now what is the label remember me great so you can see very nice little form we have now instead of red we can change some other color when we talk about the colors in beautify very soon we will talk about anyways so we have a nice little form we can add it but let's have some variation in the button so we have also talked about the button previously but this time I want to have some coloring in the button so button should be should have some colors but it's bad that it's not giving color here anyways what we can do we can define the color and color is going to be let's say red uh darken three cool so we're having dock N3 so like how about Dacon one looks good so red duck in one now we have the form and what if we submit this form so basically when we click on submit it's a vue.js thing so we say submit is going to handle by a submit method we are going to create here so let's create a submit method and this is going to just alert us the the form like this okay so I say SAR Tech ACT bitfilms.com password is password remember me is true hit it and you can see we have all the data so email is this password this remember me is red what so remember me is red that's not good so let's see so value is red right now so what if I remove the value and see what's going to happen so now it's true great and if I just uncheck it it's false so remember me is remember is false so this is how you can design a form but what next I don't like to have the form touching at the top I want to have first it should be at the center plus there has to be some kind of title that log in here actually we need to learn about the cards in beautify how we can use the card to have the card we first need to check out the card descriptions what are the cards how we can use it so first of all cards can be used with this kind of very nice tag or the component we can have the title subtitle text like that there are various things we can use vCard item v card title subtitle text action so everything is given here but let's start with this so first of all this form should be inside v card okay so that's good we are going to have the v card let's see how this is looking okay that's actually filling all the page I don't want to do that so for that what I want I want to have some grade system and we will talk about that grid later but first of all let's have some padding so I say padding is equal to four so padding all is equal to 4 yeah that's good now inside this I need to have a v card body is this a body or content what's that we can just see here so we card I think we got item is there so instead of this v card item cool and so inside this vCard item everything will go now we also need the title for this so then comes v card title title is going to be login here okay let's see how it looks good now that's looking good next is what next is we have the footer so in the footer we can have like go to the register page kind of that so it's called vCard action so or maybe what we can do we can put this form inside the week v card footer but in that case we will lose the power of the form so we can say we card action and here we can say that hey go to the register link and that's good but instead of this I need bbtn and BTN will be like two register and here I say register and no router link comes here okay so just like this BTN button we need the block so it should be block and you can see some things are outside of the layout of this form and some are inside so that's happening because of this width is equal to 300 and class mx300 so we can move this to into here and we can have the class like this and it should do the work and in that case we don't need the vshit so great that's that's really nice and I think we need more padding so we can say hey we need padding of it that's okay that's maybe I can have the four right now later on we can see how we can do that next title it should be at the center so I can say hey text Center is this going to work yes it's there okay so finally we have various things in the card but I want to see some example to get inspiration now is there anything yeah we can have a background a nice little background if you want then that thing we can do on the coloring part when we go to the color section of our beautifier thing so not much to inspire from we have a nice little form log in here if you want you can say underline I don't know if it is working so there is no underlying class anyway so this is good and we have done that and finally we can move to some different part of the beautifier but still we can see that submit and register button width are different why is that it is because of I think because of this v card item so if I move this and put it just below of the BTN submit yes you can see both are same width so we can simply say hey uh margin X of 4 so margin is not working margin all okay what about padding all hey so action says hey I'm not going to do anything for me so I can just see how this action works so anyone which have the action I can just take the example so we action is there but action is going out of the the layout always and the vCard is having width of 300 margin Auto so what else remaining the remaining thing is we can simply say a div and we can have the div with margin X of 4 and now you can see everything is aligned properly cool so this is completed with our login page now what next since we understand the login page what are the fields we have what are the things we have we need to just design a little bit more on our home page before moving to the home page I just realized that we can have this form in a better way using the grids so if I scroll down and I will find this grid system so grid system is a very nice way to define the sections in our layout or in our page we can have so first of all what I'm going to show you is what if I have like full width here and this is like at the center that's okay but I want this to be a properly aligned for that I'm going to use this kind of system where left and right are going to be empty and the center will be the only place where we have the login form okay so there are various examples given here you can play around with that you can check out each and every one so we are interested in a layout which should be having like this but at the center so for that we first need to have a v container and then we row so container is going to hold everything and then row will make everything inside the row okay so we have this card but we want this card to be at the inside the container so how this is going to look yes seems like everything is good but we can see we have little margin at the top that's how this container works so I can show you if I remove this width of 300 from here you can see it is having container like this if I remove the container you can see it's now filled fully great so let's get back and here what I'm going to do I'm going to remove the width of 300 we have the container and now inside the container we can say V row so inside this we have the V row now it's just shrinked because it's having only one element now inside V row we will going to have the V call or which is basically V column so V call comes here and now if we are not defining it will take 12 that means full width but now we need to Define that it's going to have only 4 so calls is equal to 4. now it's having 4 but it's moved to the left so I can say that hey it could be let's say 5 for now yeah that's good but I want this to be at the center so what we can do we can make this margin Auto inside the row but that's not working maybe we can say no gutters I don't know what this no gutters will do but basically we can have like justify and Center yeah justify Center worked and now it's having at the center it seems like nothing has changed but it's now having a properly aligned with our system we have defined here now if you want if you don't want to use container you are free to use that but then it is little stretched and in that case you will have to do some other things now there is one more thing inside this container which is called fluid now fluid is basically saying that I only want a little margin on the left and the right so how I can show you that if I remove this call you can see this time we just have a very little margin on the right also on the left so this is very very nice and you can have this container totally inside your app so now we have this V main inside this we can have the fluid and then we can get rid of the container from here and everything seems really nice now let's get back to four because that's how a standard size is and this is very nice looking login form we have made you can read more about this containers row and column and there is V spacer also so let's talk about the V spacer but here you can see it's just distorted so to learn more about the spacer we already have used it in our app.view when copied the toolbar so toolbar include this V spacer but if I just comment it nothing changed it seems like everything is fine that is because we need to add one more thing so if I add this another title you can see it's at the center but if I use this V spacer between here and uncomment it you can see it's now moved to the right so basically V spacer just add the space between left and right according to your design and it's very easy to understand and easy to use so that's it for the view spacer and the grid system now for the home page I'm going to have a very nice Carousel system in the verify page so it's very easy with the beautifier because we have the carousel here on our beautiful so let's go here somewhere we can find it and if you can't find you can just search so yep I got it I got it so here is the carousel the crystal is just a way of having a sliding images like this so you can have it like this and I'm going to use this one because I like this so I'm going to use this carusal like here and go to the home View like this instead of this div I'll paste this Carousel and now it says you need the items so I'm going to steal the items from here also I'm going to still full script tag and it should be having a lang of TS and that's good that's enough for us and if I go on the home page you can see we have a nice little Carousel that's looking really really cool and this is how you can make it working but you can see this is having the container and remember we added the container on our app.view so this is the point we don't want to have the container so I'm going to once again remove the container from here and add the container only in the login View so we should have this like here cool now this is full width looking absolutely stunning and wow that's that's so easy to have but let's understand how this has done so what if we remove this high delimiter so if I do that you can see there is a little icon kind of a circle black circle is here which is indicating how many images we have here inside this Carousel so inside the carousel V Carousel we have the weakerous item so how many images we have or instead of images you can have even the text if you want and as usual as with every uh you can say beautify component you can have the API for that and then you can use how you can add more features on this Carousel so it says that color and delimiter icon limiter icon you can provide if you want disable height interval and what I am looking is the previous icon and the next icon you can change like right now we have this icon so we can change that so that's that's very easy to understand and use the beautify that's why I love the beauty file okay so that's for our home page but what next beautify has tons of amazing and crazy feature let's move to the real amazing thing in beautify now as I told you it's going to have really fun with beautify 3 because now with beautify 3 we have a crazy amazing animation or transition effects available so you can have different kind of transitions so you can see like this card expanding or closing like that you can have this Fab transition fade transition on the X Side Y side like that a lot of amazing things we have but what I want to have the transition here is going to be like if I change the page I want a really nice transition to have so let's start with we expand transition so I'm going to use that inside my app.view and above this router view I say V expand transition and move this router view inside it now see the magic so if I just move to the beautify and you can see it's just moving from up to down like that okay now once again just like every component we have some Styles so it's like we can provide the mode which is defaulted to which is default I just want out in so let's say out in and how this works okay seems like similar but you can play around that let's try something different this time I'm going to try Fab so how about this Fab oh this is really nice you can see it's just moving like it's every time the page change it just have it but sometimes it's not that good to have this crazy animations on every page it's sometimes annoying so instead of this a fade is a proper transition for any transition from one page to another page so I believe this fade transition is really good for your changing of the pages you can have it for your application scale slide is also good so let's try the slide one because slide is really nice so if I go on the slide slide seems like not working so is there any slides so there is slide X actually so slide X is there yes you can see it's moving from left so I can show you in the full width yeah so this very very small transition but it's nice to have this kind of one also but I like the fade for that transition on the pages which is really really cool next one is very very important so whenever we submit the form you can see it's quickly giving me this pop-up but I don't want to do that I want to show some kind of loading which will eventually give me the result or make the user login so how we can do that first of all we need to find a progress bar so in the components section we can see that we will have the progress bar somewhere if we are if I am able to find it so here we got so Progress Circle is there it's Circle but we want the animated one so this is very nice and we can just copy this primary one go here and whenever we click on login so here so just at that time instead of this submit word or the string I want this circle like this it should not be the primary color it should be white colored like this and it should have a little padding so I say padding or make me margin all one sometimes margin doesn't work anyways this looks okay so what next we only want this to be happen when we click on submit button so we also need to have a submit written like this and we only want to have the submit we if we don't have the processing so let's create a new ref so is loading is having a ref of false right now and when I click on submit then is loading value will become true and at the same time I also want a set timeout which is going to remove this set loading after three seconds so I will say that I want to show this V load V progress circular when this loading is true otherwise show the submit button now this is good so let's click on submit and it quickly gave me this uh this if alert but what I want I want this alert to show once again after three second so let's try this once again click on submit one two and three boom we have the alert we have stopped the circular and loading icon great this is really really nice but you know we can take it to a next level how we can just want an overlay kind of thing what is overlay so let's search for overlay so here we have the overlay and overlay is going to have a dull screen or you can say uh grayish screen over your background and then it will going to have some kind of loading on that so if you go at the top launch application you can see there's a loading and everything will become gray so how this works it's very easy we're still going to use the progress circular but that's going to be inside of the V overlay so V overlay will going to hold all the card so what actually we want we want to have V overlay somewhere inside the container so let's say V over lay and this is going to have that Circle or progress bar okay grab that and now I want to say that this is the submit button and maybe I can just copy instead of cut okay and inside this V overlay I have it now let's see nothing is there because we need to say V model sorry model value here so colon model value is loading okay now let's make this is loading true for now so that we can see if it is working or not cool this is working this is on entire page and loading icon is there that's good because we are having inside the container if we want we can cut this overlay and put it inside of the V column in that case it should have worked once again but still it's having it there so what next we want we just want to have things at the center so this class we can add on the overlay like this and it will make it at the center in that case we don't need the loading on the submit button so let's just have the submit button like this and loading is here that's only thing we have to do and this means we can just make it false once again and when I click on submit you can see there is a loading and after three second we are closing that it and we get it and everything is nice so this is about the overlay thing on your login page with the progress icon because this is extremely extremely important to keep user stay updated what is actually happening behind the scene so this one is really important next I want to have a little icon for notification here so let's search for material icon and this time let's use mui and here I'm going to search for Bell icon so how about Bell icon so there is a bell icon okay so we have a lot of bell icons and the one I am looking for is notification okay so let's try it first of all I will go on the App View and here we have the login and just above the login let's have vbdn we BTN and inside that we need V icon of B I can which I can really need icon of MDI notification I don't know if it is going to work so it just not worked and let's see how they have used this Wii app icon no not that so let's search for the icons here icons go here and then we can see the code I can size color I can so there has to be what if I use the domain which is like this okay so that is there so it should have worked but it's not working maybe I can see this is the website where I can find the icon used in the material so click on continue and then search for Bell okay so Bell alert is there and just Bell okay yeah we got it now this has to be the color of let's say blue and darken 4. okay that's good but every Bell icon should have a notification like how many notification it has so in that case we need to have we call it badges now badges are just a batch above any icon so we have this batch and we need to wrap this icon with the badges so we badge and use this and now I need to say hey this is going to have a number so how we can add the number inside this so batch content is going to be the six so let's say 6 is the icon on the notification number so that's good but it's really big I want this smaller one so can we do this small as a size okay so it's not given here and it should be here color dot so if I say dot hmm dot just make it really a DOT not the not the icon so I'm going to have this and see so size is this so I can use the size okay so we have the batch size is X is small it's not reflecting that's bad that's really bad but finally I can use the icon in the button so it feels like I can and the color of this batch will be red darken two now once we have the icon then whenever we click we need a drop down for that so that we will have the list of the notifications in that case we need the menus so menus are very nice so you can see click and there is a drop down that's really really amazing so how we can get it so it's super easy we first need a activator like who is the component when I click on that then it will open up the the menus or the list so we have this menu and full menu comes like this and I'm going to copy it and directly paste it here okay and see what's going to happen first it says what are the items you need so I'm going to steal the script and items basically and here inside this script const items is equal to like here hey Jet GPD was nice on the items here I will ask it if I say like this great so now instead of items we are going to use the notifications okay so that's good and let's see how this looks this looks great and nice we have it here great so what next instead of this activator slot we want this Bell icon to be the activator so move this button and replace the button with the activator slot but keep this point that we need to have this V bind of the prop to make this button as the activator so if I click it's not working because now we need to say we bind and that going to be the props okay so now click and it should work so it should be vbin yeah so it's working very nicely next you can see chat TPT has given me the icon and the color this is really good so what I'm going to do I'm going to have the color and the icon here so V icon would be having icon of item dot icon and let's bind it and let's try to see looks good and also let's have a color of item dot color and bind it one more time and you can see very nice little icons with uh different messages we have we can also add some kind of transition here so if you scroll down you can see we have this transition and this time we are having the transition as a prop in our menu directly not using the V scale transition kind of component so now you can see it's scaling from that that icon you can also have like slide X transition so it's slide X but I like that scale transition okay so that's for the scaling and now what we need we need to work on some coloring system some theme system and then we will close this crash course so now let's get get back to the beautify and this time I will go on the features and this time I will check out the global configurations so Global configuration are really useful because in that case you don't have to Define every time in your component you define once and every time you use that component anywhere else that's going to work just like this so if I want the button to be always outlined then I can Define it here and that too inside of the card okay so let's try this and see how this is working so first of all we need to go in our main.ts where we are defining this beautifier and here we have create beautify and then we have a component directives and then which one we should use let's see so all the buttons we want should be like this so if I go to the login page as you can see that in the button we are using let's say if I say outlined that has to be variant so variant is outlined okay like this so this one is good and now let's make this button for register as outlined so variant is outlined okay that's good but what if we want this variant outline to be available every component of the button so vbtn should have variant of outlined so this will come on the defaults configuration and it should have all the component all the button with the outline this is extremely powerful because now we don't have to Define it like hey the button should be outlined everywhere now what if we don't want this outline just like on the submit button it should be solid so for that we can go on the components and the buttons I'll open on a new tab and then I want to see like what this could be so there is outline there is a tonal there is text and there is a plane but I want this to be default so can we say like variant tune is going to be default but I think is not outlined plain text elevated let's use elevated elevated okay so that's good it's like elevated one but all other button where we have not defined the variant it will take it as the outline one so what next what else we can do this text Fields so I want this V text field to have a solo variant so this time we say V text field once again variant variant is going to be solo okay in that case if I remove this no effect because we have defined it on our Global configuration so this is how you can play with the global configuration and Define whatever you want even you can Define the styles for that you can Define any default class for your button or for any other component you want that's going to be crazy powerful thing because you are controlling every component from a single component file that's powerful thing then comes the theme part theme is going to have like do you want the Dark theme or like theme so let's try the Dark theme here so if I Define that theme is going to be dark and see eventually it's switched to the dark one that's powerful once again so you can see I'm really liking this dark way but this button the the login button is not that good so let's go to the app and here we have this login button we are defining the color as pink docking I'm going to remove that and now it's becoming white outlined one because we have defined the outline for the default button so I can remove the variant from there and it should be like it should be outlined but it's not that's bad and I think that happened because the global configuration works for everything inside of this V main so what if I have a v BTN and I say test here and save this file and actually I need to put it inside any pitch or View so let's have this above the carousel on the home page you can see it is outlined but not this one because Global configuration works for anything inside of our inside of our V main so let's get back the variant to uh variant to outline variant to outlined for our login button at the top and that should be here on the app not there cool so we got that now with this we want to have uh icon which is going to toggle the Dark theme to The Light theme and that we can see we have here in our Dark theme variant way so how we can tackle this because this is not inside any configuration so for that we need to once again go on the beautify and this time I will go on the API section and you can see now we have various hooks in this we can see we have used theme hook use theme can be useful when we want to change anything in our theme part so what we can say like having a button for changing the theme so let's go here at the top we should have another one another button so we BTN inside that it's going to be V icon and icon is going to MDI of color I don't know color what's that so let's search for uh light eyes what that kind of Icon could be so this is the icon for theme and I can inspect this icon to see which is the real icon here oh that's not good it's in the SVG format so I cannot see exactly what name they have used but I can see that this is kind of a star this is kind of moon so I can say Moon and yeah weather Knight yeah I got it so I need the weather night so how I can use it whether night like that okay so that's the icon good whether I whether whether Knight icon is there great so whether Knight is there when I click it should go to the night version but we also want Sun Sun like this so sun will be having weather sunny wow so in that case we need some kind of ref for our view JS so const theme is equal to ref and in this ref right now it's light theme okay so I need to import the ref from The View and then we should say that whenever I click on this icon so at click I say change theme so I can say hey there is a method called change theme and now I say if theme dot value is equal to light then change theme dot value to dark are vice versa so instead of this can we do like true or false so in that case it would be easy I say theme dot value is equal to not of theme dot value and with this we can say that changing of the icon so icon would be like if team is true true means we can change it to instead of three I can say dark theme so initially Dark theme is false so I can say dark theme is there then what is will be the icon then icon will be if it is a dark I want to convert it to Sunny Sunny okay but if it is light or I can say dark is false then it will be Knight so let's go right now I need to change it you can see it's now changing very nice along with this now whenever I change the value of the theme I also want to really change the theme so in that case I need to use the theme so theme is equal to use theme from beautify and then I say theme Dot uh current dot value is equal to I can say if value is true dark is dark then make it dark otherwise not dark so default theme is dark I think we can use the name instead of current is it going to work now that's not working so basically we can go here and we need to see how to change so it should be like Global okay so we have the global name so instead of direct name we can say global.name dot value and now see this should work okay yeah it's working great so right now it's working and this you can see doing very nicely so right now team is dark initially it is dark so it's dark and I want to switch it to light switch to light just like this so right now it's dark and it's in right now it become light so I think this is going to be different in this way so Knight comes here Sunny comes here great so right now it's dark I change it to light you can keep this theme information in your browser settings browser local storage or cookies that can also be valid if you permanently want to make it the theme user has selected so that about the global configuration using the hook in the beautify and finally finally finally we need to make it responsive and actually it is really responsive so you can see it's right now having four and here it's looking good with all having full width if I go on the home page it have nice little Carousel and we have theme we have drop down we have login button which is working with the overlay of this three second and then we get the information but what we also want here to make sure that user can not submit this button if this is having any error so finally just for the sanity works I'm going to do I'm going to search for text to field and there is text field for the errors so a search for error and there has to be error message you can see like this or at below we should have that so maybe I can search for error once again yeah like this invalid email like that so we need to define the Rule and Rule will be available for the Fields so go into login and here we Define the rule rules dot required now from where the rules will come rules Come From Here we need to actually Define the rule so that would come here and let's define the rule so rule will be like this and what it says it says lot of other things so maybe I can say const rules is like this okay so it's a typescript so I just for suppressing the error I'm going to say any right now but you can have a proper nice little variations and it's not counter it's just required and the email so if I now go here and if I see it should work something is wrong here on the email so required required okay so it's required so I say something no and now it says required now if I try to submit it's still submitting so we can prevent this submitting and we say that if this is empty then we are not going to submit so in the submit we can simply say if form Dot value I can say form dot email from dot email dot value is not there then return no need to submit this so that's good is it like form dot value dot email like that so it should not submit but it's submitting oh it's submitting because the submitting logic is the just making the yeah so now see this is not submitting right here it's submitting it's submitting because I need to say like hey this if this is empty so submit oh yep it's not submitting and it says that hey email field is required wow so amazing things we have done now let's just make uh our password field required and we are done with this beautify we are done with this viewtify crash course so so if you like this beautiful course just hit like and don't forget to subscribe this video bit films YouTube channel and make sure you are sharing this video by course with others see you in the next video till then goodbye