Vue.js: Vuetify Component Library, Demo & Review

hello and welcome back to Faraday Academy in today's video I'm going to be going over the beautify UI component library for view Jas which is the most popular component library for view applications several people have requested that I do beautify videos and make a tutorial using the new beautify grid system as well as some other components if you are new here my name is Gwen and I make different coding tutorials I do coding live streams and talk about different programming topics so if you are interested in this kind of stuff then please subscribe to my channel and don't forget to like this video if you want to see more of this type of content so let's get into it this video today is a demo and breakdown of the component library just like my previous view view videos have been if you want a more comprehensive component by component tutorial then check out my free course that I just launched unscramble calm covering the Vita Phi framework over the past six months I've actually built two different beautify applications on this channel the curriculum app I'm currently working on as well as regex breakfast and then I also built the storefront application which I used for my beautify course that I just launched on screen be calm but I decided to quickly create another beautify application based off of the productivity theme just so I could compare it apples to apples with the last video I did on the element framework so you can see this is very similar I have a home page tasks calendar table and a form as well as some icons just demonstrating how they look in the view to find navbar and AD ramen you the 10,000 foot overview of beautify is that it's a view UI component library which i believe has around 90 components right now and as far as the stats and download show us it's the most popular one in the world for view Jas it seems like they are doing releases and commits and updates a couple times a week which is incredible they've added so many new components and frameworks even since I started using this maybe a year and a half ago and one great thing about it is that it has full support for accessibility in its components and theming now one thing to note about beautify beautify comes with so many design styles and patterns out of the box and they are all based off of this material design which if you don't know is a creation of Google it's a standard for creating digital interfaces that's supposed to be based off of ink and paper designs with extra features like elevation etc so you can see more about that a material Deo slash design the instructions for installing beautify in the getting started menu are pretty clear it first recommends that you install it via the view CLI package and then it goes on to detail how you can also use it via CDN or the NPM module if I know that I'm going to be using it in a project then the very first thing I do when I create my view project with the view CLI is to add view defi because beautify invasively changes files the original files that it gives you hello world and your app file it changes all of that to use beautify components so if you don't use it first and you've already updated some of your files or folders then it's kind of gonna mess everything up for you so it's best to just go ahead and use view add view to fight to install the view CLI package first before you do anything else in your repo let's start off talking about this top navbar here now the component for this in the beautified Docs it's called app bars and you can see there's a drop down for different types of bars there's this app bar there's also a tool bar and then there are system bars which aren't the same thing they aren't really used for navigation so this is an example so I'm just going to talk about the toolbars and app bars here I talked a little bit about this in my course on-screen be calm but basically both of these components say that they are used as the primary source of navigation for a site and that they work well with the V navigation draw which is basically the draw that comes out from the side of the page if you look at toolbars it says it's also the primary source of navigation for the site and it's great with the V navigation draw and when you look at examples you can see it's something that looks like a top navigation where you can have a draw and some icons you have different kinds of examples here and then for app bars if you look at this it's so so similar then what is the difference between the two of these and when would you use one or the other well if you look at the release notes for version 2.0 you can see that on the V toolbar component which you used to use for all navigation in your website there's now a new component that extends the toolbar and all scrolling techniques and main app functionality have been deprecated and moved to V app bar so you can see in V app bar there are extra props and options for things like scrolling animations so now if I scroll down the page it collapses but I can also hide on scroll I can when I scroll make it appear and so on so the V toolbar is more likely used for widgets or maybe if you're making a markdown editor inside of your application something like that this is a really good example for what you might use toolbar for putting it on top of a map and using it as a search bar and the icons neatly fit inside and it gives you this out-of-the-box so that's a really great way to use the toolbar in this site I don't have any scrolling animations or anything so I could really use either component for this because I'll get the same kind of styles it will resize my icons give me the icon hover these type of buttons etc now if you look in the code at that component going to my app and you can see I have this V app bar but inside all of these nested components are toolbar components and that's because v app bar extends from toolbar but keeps the same names so you have V toolbar title and then your navigation will be inside V toolbar items now I don't think this is really into it because when you look at the docs in at bars you can scroll up and down it doesn't give you an example of how to put text links inside of the nav it seems to be suggesting that you use this kind of tab navigation or that you just use a draw because these are the examples that it gives you as well as some icons and dropdowns and those kind of things and even if you look at the API up here it just gives you two components v app bar and v app bar nav icon and in toolbars that's where you can see the rest toolbar title and toolbar items now if you don't use toolbar items here and you try to style this it's a bit hit or miss it's almost like you have to figure out what to do for yourself with navigation so if you try to do like router links or divs for example let me uncomment this and see it squishes everything up against each other you could do your own custom styling but then you don't get the hover either that it provides by default if you nest them as text buttons inside of V toolbar items and since there isn't an example in the docs it's kind of like you have to play around with it and try out different things like oh maybe I use a list and list will align my items in the nav bar but you can look and see what a list does it just puts them vertically so I think beautify could improve their documentation a bit and add some more examples for how to use a standard navbar and make it a little bit less confusing so you don't have to dig through the changelog and figure out what the difference between toolbar and navbar is other than that they do have a ton of props and options that you can use for the navigation and a lot of common things that you might need like hide on scroll or show on scroll animations capturing events stuff like that so after my links I have these two buttons I don't have them set up for anything but again because they're nested inside of the v-app bar component beautify sizes all of these buttons and icons to fit perfectly inside of the bar including the hover states and I basically just added this button myself here's the button and honestly it was a little bit squished against these two icons so I added some spacing some margin in between them and then when I click on it it sets draw to true the draw comes out it gives me this overlay just as part of the draw component and then it displays lists nicely inside of here and gives you the option for hover States and links and that kind of thing this is just something extra I added from the beautify Docs because I think it looks nice it's basically aligned with their flexbox classes and then when I click outside it automatically handles closing it for me this job is very similar to the one in element UI except you can't have multiple drawers open which I don't think you'll need most of the time anyways I'm sure you could if you played around with it but it doesn't work out of the box these are some of the props I have set up for the nav draw and then you can see I just have a list of links nested inside with the V list component giving it the navigation prop because it's being used inside of a draw that gives me a nice hover State for the links and then inside the list I have these V list items and then this V divider adds a horizontal line in between items you can also pass a prop here to say vertical and that will put a vertical line in between items just a little bit more documentation and a few more examples a bit of rewording and I think this top navigation or those two elements the app bar and the tool bar are gonna be awesome all right let's talk about styling beautify has lots of built in classes to style the page from handling typography by changing the size and look of text to spacing changing margin and on elements setting the background and text colors and a lot of other things as well with beautify you're basically getting a whole CSS design class library plus almost 90 functional components like the nav menu and tables calendar views etc and on top of that you get lots of extra things like animations and built in accessibility features so with all of their classes here I think some of the most useful ones are the spacing class where you can easily set the amount of margin and padding on elements in increments of four and that kind of standardizes it across your application I also use their built-in flex classes a lot basically you set elements as this D flex which means display flex and then you can use all of your normal flex classes like justify content align items etc it also gives you all of these standard screen sizes to use in the Flex classes out of the box so you can style for extra small small medium large and extra large screens another interesting thing about beautify is that it comes with the V icon component basically what you do is when you're setting up beautify you tell it what kind of icons you want to use whether it's material design or font awesome or whatever and it will give you a standard size and styling for them out of the box if you look in the docs it tells you different ways that you can install the material design icons or if you want font awesome then it gives you the links for font awesome and then depending on where you put the icons it sizes the icon for you because I'm using an icon inside a button that gives me this nice circular hover State if I'm using the icon next to text then beautify also gives me a nice spacing from the text so I don't even have to set up styles for that basically the only thing that I do is use the V icon element and then say left so this will pull it left basically give space in between this icon to the left and the text to the right which is what you can see it's doing in these buttons here sizing and spacing the icons you can see that I didn't style these icons at all but they're different sizes from the other icons in the nav menu because the v25 framework has already styled least for me as far as using colors in the application beautify comes with these standard colors that you can use primary a success warning error and info as well as some grades black white stuff like that now what you will usually do for an application if you come here to my curriculum app that I've been building you'll see that I set a theme to overwrite those colors that beautify came with so if I look in my beautified J's plugin config file I set the theme cuz I'm using the light theme and I over wrote all of these colors here so when I use the primary color it uses my orange instead of the standard material blue color well they do have these color classes I really never use these color red color red text maybe for building a quick demo or something but you're probably going to set all your for your colors as custom classes or just in your theme the grid system isn't much to write home about it's pretty standard you have 12 columns and of course you have all of your break points for standard screen sizes so you basically have a V container and inside of the container you put your rows and inside of those rows you have columns this is built in flexbox just like almost every other UI component framework grid system except for I think the foundation XY grid so this works the same way that it would with bootstrap or with anything else except the keywords might be spelled a little bit differently or be in a different order it's well documented you can also mix these containers rows and columns with flexbox to get the exact layout that you want so you can use their flex box and their great system interchangeably and this is built in flex box after all the calls keyword works for all screen sizes and then for above extra-small you can also use other keywords like small/medium etc in this productivity app you can see that all page content I've gone ahead and wrapped in a container and then inside each page I have those wrapped in rows and then a column with offsets so it will be six out of 12 columns wide for any screen smaller up so anything except extra small basically and then the offset will be three columns so it will Center it on the page and you can see it does Center it you can see inside of this row that the container is giving me margin and padding and then inside of the row I have twelve columns available and then when I hover over columns you can see the yellow that it's giving me three columns worth of margin and that the content takes up six columns in the middle one more layout element you have available to you is the spacer which basically pushes things as far apart as possible so it works like justified content space between except you just put it in between the elements that you want to push apart for example I want all of these elements to go to the right in the nav bar and then I want my logo to be to the left so let me get rid of this space bar real quick and now you can see everything is up against each other nothing is pushed to the right anymore when I add the spacer back then you can see everything is as normal I have my links to the right and my logo to the left now let's quickly look at the tree view component this component is called a tree view because you can basically open up these lists and see nested elements and keep opening them up as you go down the line as an option here I have also added checkboxes and you can see there's some nice default functionality which is exactly the same as how it works in the element UI framework if I check off one here this will have - and now I can check them all off here if there are multiple nested elements then if I check off these two then all of the unique parent elements will also be checked you can also see in the docs there are a lot of different options that you have for both styling and functionality and tree view components one of the coolest things that they've included is the ability to search through these elements nested here which are just basically nested objects in your state so if I come here I can say R a and I can see in these two branches it gives me all of the are A's now if I say case-sensitive then it gets rid of the lowercase R a examples like these are so nice and the beautified Docs because you can see the live examples on code pen you can see the code on github and then you can also see the code right here in the browser to just copy/paste like this tree view most of the components you see on beautify are very well documented with good examples I just want to show you the nested objects here so these are the items in the list so it's basically an array with objects and another array with more objects in another array with more objects and it's searching through so many layers of nested objects without very much code because this functionality is built in to beautify so they basically just add this filter function now one thing that they have an element UI that I wish they had in view defy is draggable even if you search for draggable here there's no functionality for lists or this tree view element to be draggable in the beautify framework right now the recommended way to make things draggable and beautify is wrapping lists or wrapping the tree view in this view draggable library which actually has some really cool features for nested dragging and doing a lot of different things and it works well with view lists now I haven't gotten it to work yet with tree view but I'm hoping to use this component in an upcoming live stream for an app that I'm gonna be building so I'm still gonna work at trying to make these tasks here draggable otherwise I might have to build my own solution or maybe just pull in that one component from element UI but overall there's a really nice component hover about draggable style bowl and flexible with lots of different events and those kind of things the code isn't really interesting is just built off the documentation all it is this is one tree view component which is kind of amazing I'm just passing it the items and then setting it as selectable and that's what's on the page right now there are also events I can use so I know which items have been checked or clicked on and then use that information somewhere beautify overall does a really great job with events throughout the library so let's talk about their calendar this might be beautifies best component that they have you have all these different views you have month week you have a standard day view and then you have this four day view which i've never seen before and i'm not sure why you would want four days but it's there and you can modify it to a different number of days if you would like say a five-day workweek there are absolutely tons of props and styling options and different things that you can select as well as a whole bunch of so you can get all of the different information if a user is clicking on a day or somehow interacting with the calendar I mean look at all this information that you get and I've tried out this calendar in several different ways and it works amazingly well it's sensitive to exactly where I click in the information and I haven't found any bugs with it yet so I'm gonna be using this on an upcoming live stream as well which is another reason why I'm testing out all these calendars definitely a lot more robust than the options you have in element UI and actually any other UI component library that I've ever seen now another component that beautify has related to the calendar and that you see a lot of calendar apps using now is this V timeline component and it's basically a vertical timeline where you put different things that line up in chronological order with some kind of time or date you can see this with a very good example they have at the bottom here where it basically styles this timeline and gives you kind of an example of how you could use this as maybe an alternative view in a calendar application so let's look at the table and the table has come a long way since I first started using it and how I remember it initially so this is just a default example that they give you out-of-the-box it basically gives you all sorts of things like sorting it also gives you filtering and searching it shows you examples where you can add a new item with all the fields here edit pagination and it also gives you a lot of slots so you can customize every single cell you have access to the indices of all your data of course you can customize the header the footer appear every part of this one relatively new feature that they've added in these data tables is the ability to have a fixed header so you can just set the fixed header prop now it's a boolean and if you have a lot of data or a table with infinite scroll that's so so important I know you can do it with CSS but it's just easier if you have a prop right there and you can use it out of the box they have a crazy amount of components and examples for tables here such as you can edit in line it gives you this interface with the pop-up here to use content editable the only thing I think they're really missing is that there's no functionality for having fixed columns so you can fix the header so when you scroll the header will stay visible but you can't have horizontally fixed columns so if you need to scroll over let's say you have a bunch of columns that would be a nice feature to add and in fact people have been asking for them to add this for several years now this question is from July 2018 and there's still quite a bit of activity talking about this there are examples that people have made with using CSS or with forking beautified just to add this one feature so I definitely think that they will add this functionality soon it seems to be something that I use a lot and that's one area where element is ahead with some of the table props like having the ability to fix columns now if you look at the code for the data table it's expecting arrays of headers and of items so you'll just have to process your data before you pass it into the table to get it in the format it wants this template slot I'm using right here is for this header above the whole table which I can optionally have I have that vertical liner and then the button drawn all the way to the right a lot of the code in this file is for that V dialog that pops up so you can create new items or edit them yeah I have another slot here this is for the action items the pencil icon and the rubbish barrel so I get all of the information about the item the row in the column so I can perform crud operations on them easily here so let's look at forms in beautify of course you get all of your standard form elements different types of inputs and dropdowns checkboxes radio all of those things it also gives you basic ways to validate the form and the styling for these error messages and colors and everything just comes out of the box as well then you get access to these methods to reset the form and reset validation and also to validate so a lot of times you might not have to add a separate validation library if you look at the form component here the form is just wrapped in this V form element which renders to an HTML form element and then I have these V text fields inside now the default validation is to use this rules array which like it shows here is just a list of functions that try to validate the value inside of that input and if it's not valid it'll display whatever error is in this string here and then you can use beautifies built-in validation methods so you can use validate so you can reset the form or reset validation if you want a more comprehensive validation library and a lot more options beautify also gives you examples of common view validation libraries in the documentation so there's Beulah date and there's V validate now I think this example is outdated for V validate but I'm currently using validate in some of my applications and it works really well it's really robust and it has built-in options for things like validating email and other common input fields as I mentioned before one of the reasons why I've been testing out these components is that I'm using them in a Productivity application that I'm building and that's also going to be an upcoming live stream series for my view Jas and Django application on this channel I'm just trying to finish up the curriculum app so I can start that one I don't think any one video can cover all of these components in beautify there's just so many some of the interesting ones I think are autocomplete which automatically filters and highlights skeleton loaders which is one of the newer components you see this on YouTube and a lot of other sites now where it'll load these dummy cards and dummy components until your site can actually load all of the images and stuff it's a really good experience for users another thing they've added is spark lines so this is basically a simple chart and I didn't even know they had this before but you can basically pass in and display data built in to beautify now would I use this for charts probably not unless I just needed something simple on a dashboard or a small page but spark lines do allow you to make nice line charts straight and beautify without using something like draft j/s another thing to look at is if you defy is good on mobile of course part of it is up to how you design the application but beautifies grid and components are all mobile friendly and they also have some features specifically designed for mobile like this bottom navigation that you don't really use on a standard website but if you're putting navigation on a mobile app this would be great to put at the bottom as you're navigating around the v2 Phi application you will notice in some cases such as this modal here beautify automatically focuses elements which is great so I can navigate with a keyboard but other times such as when I open the draw menu for some reason beautifies not automatically focusing that and I have to tab over a whole bunch of times before I focus on the navigation and the draw there doesn't seem to be any proper functionality for v2 Phi to do this for you and it's kind of annoying when I have to tab over like 30 times just to get to the menu that I just opened but overall I can navigate pretty well with a keyboard also now that the drawers open I can't hit the Escape key to close it and I don't know why I guess after using v10 CIL's I realized that that was nice to have that they just built it into the draw menu now when I open the modal I can hit escape and it closes so that's nice now with all of these components you probably don't want to import this massive library and so many features into your application well the good thing is that beautify has tree-shaking built in out of the box and if you have created your project with the view CLI plug-in in other words you typed in view add verify in the beginning you have automatic tree-shaking enabled if you didn't do that beautify walks you through how to do it later on or you can also have the option to just import the components that you want into your library now I have heard some people say that beautify is a little bit slow or that the tree shaking doesn't work 100% so maybe it's something that they're still working on I think it's just a good idea in general to check your production build and make sure that everything that's in there is supposed to be in there and you don't have lots of extra code being bundled into whatever you're pushing up to prod now whenever I'm pulling in new packages into my project I try to take a quick look through the github and understand what they're doing and look at the code quality and stuff like that as with any open source library you can come into github and look at all of the source code for the components and directives and other things used in the beautify framework now the one thing about beautify is that this is a well written optimized kind of advanced code base so it does take a bit of digging to understand what's going on here so let me just pick a random component v-chip so I have my Eiling and then I have the main part of the component and you'll notice that it's just JavaScript because they aren't using template in here like you would if you're building a standard View project they are actually doing custom rendering here so you can see they're building the options object here is computed and data the lifecycle hook created and then you have methods and then you have this render function where they're building the component but I think it does take a while to get used to it and also start to traverse the codebase and say okay now I have the colorable file let me go to this file and see where it is and so on and so on down the rabbit hole if you're going to look through the actual github code then you're probably gonna want to pull it down locally so you can search and have multiple files open and stuff like that definitely a more advanced code base so overall I would say that beautify has very good documentation the examples are extremely good well maintains lots of features if you like material design I think it's hands-down the best option for that I use beautify in a lot of my applications that I'm building because it's just easy and things work out of the box and I don't have to worry about a lot of styling like spacing and creating even things like color themes until later on if you want to know more about beautify definitely go and check out my course on scrum be calm it's a free almost two hour long course where we go through a lot more components and also build an application and if you want to stay in touch throughout the week I'm active in the Faraday Academy discord server which you can join via the link below I hope you enjoyed this video and that you learn something new if you did then please don't forget to like this video and let me know in the comments below what you liked about it as well as if you have any recommendations or anything to add to the discussion about beautify or view UI frameworks if you want to see more content like this and please subscribe to my channel if you would like to support my work there are several ways listed in the description below and it also does really help me if you interact with this video so have a great day and I look forward to seeing you in the next video

Channel: Faraday Academy

Views: 7,991

Keywords: vue.js, vuetify, vue ui component library, javascript framework, vue, learn vuetify components

Id: ssOxW4DY9aU

Length: 35min 43sec (2143 seconds)

Published: Fri May 15 2020