First Steps with Vuetify | Vue.js + Vuetify + Firebase FULL PROJECT

00:00:01 well again to this video my name is Max
00:00:03 and in the last video of this series we
00:00:06 actually got started with our beautiful
00:00:08 project we installed it and now we have
00:00:11 it here I open that in webstorm and if
00:00:13 we have a look at the running project
00:00:15 this is how it looks like now that's
00:00:18 default setup and as you can see it
00:00:20 already ships with a lot of components
00:00:22 and I don't want to use these instead
00:00:25 I'll go to my app but view file and here
00:00:27 I will simply start by deleting
00:00:31 everything which is in there now I will
00:00:34 re add some of these things
00:00:36 I'll also delete everything in my data
00:00:37 here but I want to start with a clean
00:00:40 project and then I add the things step
00:00:42 by step so that you really well see what
00:00:44 we use and why we use it so doesn't the
00:00:47 cleanup project if we now save this this
00:00:50 certainly is a little bit leaner now
00:00:53 let's start adding elements and you see
00:00:56 a left EVF element here now generally
00:00:59 all these beautiful components I'm going
00:01:02 to use start with we – and a good place
00:01:06 to learn more about beautify obviously
00:01:08 is their official page beautify
00:01:11 chase.com there if you click on get
00:01:13 started you can get detailed
00:01:15 explanations on all kinds of components
00:01:18 you might use how would you use them you
00:01:20 get examples you can have a look at and
00:01:21 at the bottom of each page you see the
00:01:24 different props you can set up and so on
00:01:26 so really an important page when working
00:01:28 with beautify is also another important
00:01:32 note over the course of the series or by
00:01:34 the point of time you're watching this
00:01:36 video the version of Butte approaches
00:01:38 might have changed and some things might
00:01:41 not work the same definitely always have
00:01:44 a look at the latest release notes of
00:01:46 beautified shares if something is broken
00:01:49 I'll also try to add annotations in the
00:01:52 video description if possible to point
00:01:54 you towards potential issues and with
00:01:57 that you should get a working project
00:01:59 again right now everything should work
00:02:00 though so this is give you deployed
00:02:03 chest page and I want to start by
00:02:05 populating the main page with some life
00:02:09 again I also want to change the default
00:02:11 colors though because if you have a look
00:02:13 at it
00:02:14 well now it's white but if you remember
00:02:16 the old state it was really great and
00:02:19 thankfully we can set our own theme in a
00:02:22 beauteous project for that theme we can
00:02:26 choose from many colors which you can
00:02:28 find on the official page under style
00:02:30 colors these are all the material colors
00:02:33 and these are basically the CSS classes
00:02:35 you can add to any element to add this
00:02:38 as a color for the element however you
00:02:41 can also set up a main theme for your
00:02:43 application to give your overall
00:02:45 application a certain style without you
00:02:47 having to add these individual classes
00:02:49 to all elements you're going to use more
00:02:52 information can of course be found under
00:02:54 the theme section here and there you see
00:02:57 you can choose between a light and a
00:02:59 dark theme now in order to be able to
00:03:02 see that we need some components though
00:03:03 so before diving into theming why don't
00:03:06 we add some components again in our
00:03:08 applet view file again we have to be app
00:03:11 component and that basically wraps your
00:03:14 entire app it's that simple
00:03:15 this really is all now in sight that we
00:03:18 have you can add different things for
00:03:21 example a main element this is not a
00:03:24 beautified shared component this is a
00:03:26 normal HTML element in this main element
00:03:29 we'll place our main content so the D
00:03:33 content we're going to display in our
00:03:35 application so you might wonder well
00:03:37 what's outside of the main element then
00:03:39 well all the content of our application
00:03:41 but basically our navigation so the
00:03:44 static content which is the same for
00:03:46 every page which isn't dynamic the
00:03:48 dynamic content goes into main and we'll
00:03:50 add a navigation above main now I want
00:03:53 to have a responsive navigation with a
00:03:56 hamburger menu for smaller devices in
00:03:58 the toolbar with icons and buttons for
00:04:01 bigger devices so why don't we start
00:04:03 adding that and we actually got a B –

00:04:07 toolbar component and beautify cheese
00:04:09 which you can use so let's add that
00:04:12 toolbar and let's see if we already can
00:04:14 see something after adding this well we
00:04:17 can't see it right here right it's great
00:04:19 so you might have over seen it but this
00:04:21 was actually added this bar here at the
00:04:23 top now you can already see that we can
00:04:27 switch
00:04:27 theme on the app element by default it's
00:04:31 the light theme can switch to the dark
00:04:33 theme which will change the overall look
00:04:36 of your page might not be the look you
00:04:38 want to use but you can do that changes
00:04:40 the background color and the color of
00:04:42 your toolbar now we're going to change
00:04:45 this color anyways later so I'll revert
00:04:47 to the light theme for now that's the v2
00:04:50 are now in the toolbar I want to have
00:04:53 certain elements to display and these
00:04:56 elements actually are the icons or DVD
00:05:01 navigation elements we'll have but it's
00:05:04 also the brand for example now in a V
00:05:07 toolbar component we can add a V toolbar
00:05:11 title component now you might be
00:05:14 wondering how do I know all these
00:05:16 components and how do I know how to use
00:05:18 them in which way well if you go back to
00:05:22 the beautify chest page there under
00:05:24 components to scroll down to the tool
00:05:27 bar here you'll find some examples which
00:05:32 you can simply check out and there you
00:05:34 will already see the structure I'm using
00:05:36 here like using a be toolbar title
00:05:38 inside of the toolbar this part here at
00:05:41 the bottom of this page as I mentioned
00:05:43 earlier you'll also see a full
00:05:46 explanation of all the properties you
00:05:48 can set but here you'll also see the
00:05:51 different elements under functional here
00:05:54 v toolbar title and so on so this is
00:05:57 where I got this from but the best way
00:06:00 to learn it really are the various
00:06:02 examples you can have a look at to see
00:06:04 the code of well what you're seeing on
00:06:06 screen here back to our element we add
00:06:09 up the V toolbar title component and
00:06:11 with that we can of course set our title
00:06:14 and I'll name our app death meetup now
00:06:17 if I save this and we go back to the
00:06:19 application now we see a nicely aligned
00:06:22 and styled title on that toolbar which
00:06:25 already is pretty great now remember
00:06:28 that I also wanted to add some links
00:06:31 later or for now simply some dummy
00:06:33 buttons which won't do anything but
00:06:35 which will represent our navigation
00:06:37 later on that's very easy to do too
00:06:40 can simply add the buttons and again
00:06:44 that is as for all components something
00:06:46 you can find out on the official
00:06:48 documentation we want to add buttons to
00:06:51 the navigation to the toolbar and
00:06:52 actually you don't even have to go to
00:06:54 the buttons component to know that you
00:06:56 can simply have a look at this example
00:06:59 again and here you see the V buttons you
00:07:03 also see the V toolbar items component
00:07:06 here which we use to wrap these buttons
00:07:08 and of course we can add this too so
00:07:12 here in the toolbar I'll actually remove
00:07:15 the button for now and add B toolbar
00:07:17 items to wrap all the items which
00:07:20 basically are not the title or some
00:07:22 other element which I'll come back so
00:07:25 here I'll now add my button and again we
00:07:27 can take the structure from here the
00:07:29 button and basically then add a text
00:07:31 like for example view meetups and here
00:07:36 we save this we don't have to add the
00:07:39 flat attribute as a side note that just
00:07:42 changes how the button is displayed come
00:07:44 back to this tube we save this we see
00:07:46 the button here sitting right next to
00:07:49 that title and also this button style
00:07:52 might not be the one we want that takes
00:07:55 us back to the different button styles
00:07:57 which we can now learn on the detailed
00:08:00 documentation page of how to pattern
00:08:02 there you click on it you see the
00:08:05 different kinds of buttons like flat
00:08:07 buttons which don't have a border
00:08:09 basically raised buttons which have a
00:08:12 border and a tiny shadow and then some
00:08:14 other buttons you may use now the flat
00:08:17 button actually makes sense on the
00:08:18 navigation so why don't we add flat here
00:08:21 and to get some space in between our
00:08:25 title and the toolbar items there
00:08:27 actually is a V space or a helper

00:08:29 component which allows us to distribute
00:08:31 this because behind the scenes B
00:08:34 toolbars uses flexbox VCS as concept
00:08:37 flex box and in Flex box by default here
00:08:41 all the items are aligned to the start
00:08:43 however if you add a spacer in between
00:08:46 it will add some well space between the
00:08:48 title and the our elements so if we save
00:08:52 it with this setup here
00:08:54 you will see that in our application now
00:08:56 it's pushed all the way to the right and
00:08:58 that it now has this flat look which
00:09:01 looks better in my opinion we can even
00:09:04 enhance this a bit more though we could
00:09:07 go to that button here and it could add
00:09:10 an icon to it to do this I simply add
00:09:14 inside of this button up besides the
00:09:17 text I add the V icon component now
00:09:20 again that is provided by beautified as
00:09:22 all the elements starting with V dash we
00:09:26 have a look at the beautified
00:09:27 documentation we actually see I can bust
00:09:30 nose here to here for example but we
00:09:34 also have a dedicated article about
00:09:37 icons to click on that we find a link to
00:09:40 the material icons page which allows us
00:09:43 to find all the icons supported by the
00:09:46 materials style guide or by the material
00:09:48 style and here you can choose any I can
00:09:51 you find appropriate for the element you
00:09:54 are about you create so for our example
00:09:57 here of the view meetups we can find a
00:10:01 fitting icon for dad what would make
00:10:03 sense for viewing meetups obviously
00:10:07 there are a lot of icons which might
00:10:08 make sense but I think the supervisor
00:10:10 account here would also make sense so we
00:10:13 can take this or remember this name
00:10:16 actually also click on it and copy it
00:10:18 and go back to our application at this
00:10:22 in between the icon without that extra
00:10:25 information here though and important to
00:10:27 remove the white space turn it into an
00:10:29 underscore with that if you now reload
00:10:33 the application you have two icon here
00:10:35 however it's it's really close to the
00:10:38 text and that might also not be the
00:10:41 behavior you're looking for that is an
00:10:43 issue though we simply have to add a
00:10:45 directive QD icon which is called left
00:10:49 in this case and should be setting left
00:10:51 of the text by adding this it beautifies
00:10:54 made aware that it probably is next to a
00:10:57 text and that we wanted some spacing in
00:10:59 between so now you see this looks much
00:11:01 better and that's how you could build
00:11:03 your menu I will come back to building
00:11:05 the menu a later
00:11:07 so right now I want to jump to another
00:11:10 menu we have to build the responsive one
00:11:13 the hamburger menu we need for mobile
00:11:16 devices because right now we only have a
00:11:18 toolbar and it won't auto collapse if I
00:11:21 open my developer tools and shrink the
00:11:23 page you see it's not collapsing so this
00:11:26 alone doesn't give us a responsive
00:11:28 design in order to add a responsive
00:11:31 design we need to add a different
00:11:33 component to beautify actually we can
00:11:37 look for one in the beautify
00:11:38 documentation there you can go to
00:11:41 layouts and predefined to learn about
00:11:44 some common layouts you use and actually
00:11:47 we're also using one this year's default
00:11:50 application market but now we can have a
00:11:53 look at which layout would fit our needs
00:11:54 this one has some drawer but I actually
00:11:59 know that there is one which I like more
00:12:02 I like the temporary floating one here
00:12:08 which floats the navigation drawer over
00:12:11 our main content I really like that a
00:12:13 lot of course you can choose any other
00:12:14 setup here so let's expect the source
00:12:17 code for this setup and here we see
00:12:19 quite a lot of elements we see our tool
00:12:22 bar here which we already added as one
00:12:26 extra element though we still have to
00:12:28 add but then we see that all this part
00:12:30 here at the top is responsible for
00:12:33 rendering this navigation drawer as it
00:12:36 is called this side menu which slides in
00:12:39 death decibel user is all component DB
00:12:42 navigation drawer component again under
00:12:44 components you would find a dedicated
00:12:46 article and inside this drawer
00:12:49 we're nesting another component made
00:12:51 available by beautifying the b-list
00:12:54 component also to be found in that
00:12:56 components documentation now here you
00:13:00 see how such a list could be structured

00:13:02 and how it could look like I'll simply
00:13:05 create a almost comparable list a bit
00:13:09 easier though to find the style I'm
00:13:11 looking for I'll go to components and
00:13:14 their twist and now here I don't want to
00:13:19 have an avatar or something like that
00:13:21 what you have all I can in my list
00:13:22 though so I basically want you will
00:13:26 build this style here where I have a
00:13:29 list with an action which holds an icon
00:13:32 and then the content which is a text and
00:13:34 I don't need the avatar
00:13:35 so what did we gathered all the
00:13:37 information we need now let's build this
00:13:39 step by step for that I'll go back to my
00:13:42 application and now outside of the
00:13:45 toolbar that's important
00:13:46 add your navigation drawer which was the
00:13:49 navigation drawer just like that now the
00:13:53 navigation drawer alone doesn't do much
00:13:56 it also meets you be connected to
00:14:00 something which opens it basically we
00:14:03 can use v-model for this we can use this
00:14:06 because beautifly set this component up
00:14:08 to be bindable via v-model
00:14:10 and here we have to connect it to a
00:14:13 property which holds a boolean if that
00:14:16 boolean is true the menu will be opened
00:14:18 if it's false it will be not shown it's
00:14:20 closed here I'll name this side nav and
00:14:24 of course I have to add this
00:14:26 so here I'll add it in my data object
00:14:29 and I'll set it to false initially so
00:14:31 that it's closed now of course we need a
00:14:34 way to open this now and four days I now
00:14:39 will add another element to my toolbar
00:14:41 here next to the title I'll add a V
00:14:45 toolbar side icon and that's element you
00:14:50 could also find on this predefined
00:14:52 layouts page I showed you a second ago
00:14:54 this adds a hamburger icon that is what
00:14:57 it does and this is dedicated for
00:14:59 opening the drawer basically we still
00:15:02 have to connect it though so what we do
00:15:05 here on that side icon is we add a click
00:15:09 listener we add a click listener where
00:15:12 we want to set side nav to what is
00:15:15 currently not so if sign app is true we
00:15:18 will set it to false and the other way
00:15:19 around to close or open the drawer if we
00:15:23 do that and we save this let's have a
00:15:26 look at our application we see the
00:15:29 hamburger menu there and actually of
00:15:31 course we should add it in front of the
00:15:32 title here to have it on the left
00:15:34 like this if they click this you see
00:15:38 nothing happens though we also don't get
00:15:41 an error so what's going wrong here
00:15:43 actually this is related to a change you
00:15:47 chase introduced in view 2.1 I guess
00:15:51 that clicks on components by default
00:15:55 don't propagate up they don't give you
00:15:57 this native click event you can still
00:16:00 easily get it though by adding a
00:16:01 modifier which is dot native with dad
00:16:04 you're telling view if I'm clicking on
00:16:06 the component give me the native Dom
00:16:08 click event now with that we should be
00:16:11 able to listen to that so let's click
00:16:14 this and something changed we get the
00:16:17 backdrop at least so somehow half of the
00:16:21 drawer is loaded but the drawer itself
00:16:23 is missing dad is related to another
00:16:26 thing we did with this click there click
00:16:28 on the backdrop actually also dismisses
00:16:31 the drawer and it turns out that if we
00:16:34 open the drawer with a click listener we
00:16:36 automatically dismiss it because our
00:16:39 click now propagates up and it's also
00:16:41 consumed by the drawer component which
00:16:44 then again dismisses the drawer so we
00:16:47 have to add another modifier to stop
00:16:49 modifier to stop the propagation now
00:16:53 with that we should make sure that we
00:16:55 only handle a click on the level of this
00:16:58 button and we get the drawer of course
00:17:00 it's empty though because we haven't
00:17:01 added anything in there you
00:17:04 theoretically can now add what you want
00:17:06 but a typical thing is a list which
00:17:08 displays really nicely inside the drawer
00:17:11 so in that navigation drawer we can
00:17:13 create a list with we – list now with
00:17:16 that we basically add or set up a list
00:17:19 now we can start adding items we do that
00:17:22 by adding V list tiles each tile is
00:17:25 basically a row in the list you could
00:17:27 say and this tile now can hold a V list
00:17:32 tile action action is like the icon in
00:17:36 our case so here I'll add a V icon and

00:17:40 now again I will pick this supervisor
00:17:44 account I can here because it worked out
00:17:46 really well and of course
00:17:48 to replicate my toolbar menu in the list
00:17:50 now because I need to have the same menu
00:17:52 invoked responsive and the unresponsive
00:17:54 approach at least in this application so
00:17:58 we have the supervisor account and next
00:18:00 to the realize a list tile action all
00:18:03 now at the b-list tile content and if
00:18:07 that is super confusing with all these
00:18:09 components you'll get into that really
00:18:11 quickly it's just a matter of practicing
00:18:14 and using do defy a bit and you always
00:18:15 have the official documentation to have
00:18:17 a look at if your stack or if you're not
00:18:19 sure which elements you should use so we
00:18:22 list tile context now will hold the
00:18:25 actual text like view meet us and now if
00:18:29 I save this and we go back to the
00:18:31 application
00:18:32 you already see it here due to hot
00:18:34 reloading can also reload now we see our
00:18:37 list item here so now we have a
00:18:39 responsive menu and we have the normal
00:18:42 toolbar we can now also add CSS classes
00:18:45 to make sure that we only display what
00:18:49 we want to display so only display the
00:18:51 toolbar menu if we are on a big screen
00:18:54 and display the drawer and the hamburger
00:18:57 icon on smaller screens that is super
00:18:59 simple to do we can simply go to that
00:19:02 hamburger menu here and add a CSS class
00:19:05 to it and I'll let those over multiply
00:19:07 to make it easier to read this class
00:19:09 needs to control whether this icon is
00:19:11 shown or not and if we have a look at
00:19:14 the official beautify documentation you
00:19:16 can find it under layout you actually
00:19:19 have this display part here you find
00:19:23 classes which allow you to control
00:19:25 whether something is displayed on a
00:19:27 certain screen resolution or not which
00:19:30 of course is key to creating responsive
00:19:32 designs for example we want to hide that
00:19:35 hamburger menu let's say on everything
00:19:38 which is a small device you can see the
00:19:41 definitions for device sizes on the grid
00:19:43 page here as a side note here small is
00:19:46 greater than 600 pixels so we can
00:19:49 basically hide it on small devices or
00:19:52 bigger with the hidden SM and up class
00:19:55 here and if you only want to hide it on
00:19:58 medium sizes and up well then you would
00:20:00 choose
00:20:01 this one so I'll go with hidden SM and
00:20:04 up go back to the application and add
00:20:06 this as a CSS class to my hamburger menu
00:20:08 of course the toolbar items on the other
00:20:11 hand should be hidden on small devices
00:20:14 so here we can add a class which is
00:20:17 hidden XS only to only hide it on very
00:20:20 small devices here with that if we now
00:20:24 save this you see we have no hamburger
00:20:28 icon on this screen size but if I
00:20:30 decrease the size now we get the
00:20:33 hamburger and we get no more item here
00:20:36 in our toolbar so now I can choose from
00:20:39 the hamburger icon from the navigation
00:20:42 drawer this is the basic set above one I
00:20:46 use now I also want to change the
00:20:48 styling the theme and I did mention that
00:20:51 we could do this with beautified it's
00:20:53 actually simple to do for one we can add
00:20:57 CSS classes to change colors and we can
00:20:59 pick colors from the style colors page
00:21:02 if we wanted to turn our toolbar into a
00:21:06 purple toolbar we could pick up fitting
00:21:09 purple maybe purple darken one can just
00:21:12 copy that here go to our code and on the
00:21:17 toolbar we can add a normal CSS class
00:21:19 where we apply the two classes we just
00:21:21 copied with dead if we go back now it
00:21:25 turns purple you will also see of course
00:21:27 that now all the text cells black so
00:21:29 that might not be the contrast you're
00:21:32 looking for we can simply fix this by
00:21:35 assigning dark directive to the toolbar
00:21:39 this will mark this as using a dark
00:21:42 theme and by doing that it automatically
00:21:45 turns the text into white text as you
00:21:48 can see now to also convert the icon
00:21:51 color here we have to go to that I can
00:21:55 here is our button and there we can now
00:21:57 also add the dark theme to inform it
00:21:59 that it's sitting on a dark background
00:22:00 and you see this turns it into white
00:22:04 cube so this is how you work with that
00:22:06 you give beautify the information is the
00:22:10 dark or a light color the one you're

00:22:13 assigning here
00:22:14 and with that information beautiful I
00:22:16 will adjust the text and the displaying
00:22:18 of icons and zone automatically as we
00:22:21 did here so this is one step now as I
00:22:25 said it would also be nice if you could
00:22:27 adjust the overall theme of our
00:22:29 application and not just work with CSS
00:22:31 classes we apply like this for that we
00:22:34 can visit that stylus folder and there
00:22:37 we get the main dot style file now
00:22:39 stylus is a CSS preprocessor just like
00:22:43 sass would be and you don't have to use
00:22:45 it you can though since it by default is
00:22:47 set up to be usable in this beautiful
00:22:50 project you will have to use it if you
00:22:52 want to override the theme though and a
00:22:54 detailed guide on overwriting the theme
00:22:56 can also be find a found on the beautify
00:22:59 page under oops it was under style theme
00:23:03 here if you scroll down you actually see
00:23:05 the setup you'll need to have in the end
00:23:07 this one here now what's happening here
00:23:11 let's copy this import because we
00:23:14 already have two second one in our main
00:23:16 style file and then I'll explain what
00:23:18 these two imports do this one the bottom
00:23:21 one basically imports the beautified
00:23:24 styles and your file happily uses
00:23:27 variables so our goal is to override
00:23:30 some variables before this gets imported
00:23:32 because since all of this gets built
00:23:35 dynamically here in our build workflow
00:23:37 with that we can change the styling of
00:23:39 the build CSS file now we can overwrite
00:23:42 variables here if you want to use the
00:23:44 material colors though we need to import
00:23:47 that colors file from the beautify
00:23:49 package which simply also stores various
00:23:52 colors we saw on the colors page in
00:23:53 their own variables and what we can now
00:23:56 overwrite the theme variable which is
00:23:59 one which will get used in that main
00:24:01 file and assign our own colors let's
00:24:05 choose the one I just copied if we save
00:24:08 this and we actually remove the purple
00:24:11 class on our toolbar and we go back to
00:24:14 our application you now see it's black
00:24:19 but that is not due to our theme but
00:24:21 because we added the dark theme to the
00:24:24 toolbar here how can we make our
00:24:26 teamwork then
00:24:28 well by default you chase or beautify it
00:24:31 we'll choose the black or the light gray
00:24:34 look however since we set up our own
00:24:36 theme with our own primary colors and so
00:24:39 on we can go to the after view file and
00:24:42 still apply a CSS class here however we
00:24:45 can just use primary now could have you
00:24:47 set the four but with the tree which has
00:24:49 used defaults now we're using our own
00:24:51 primary class or our own primary style
00:24:54 as we set it up in our theme file and we
00:24:57 can use it anywhere in our application
00:24:59 now you see we have this red colored
00:25:02 toolbar due to our own theme being
00:25:05 applied this is where I want to stop in
00:25:07 this video in the next video we're going
00:25:10 to finish this menu both menus this one
00:25:14 and the responsive one we'll learn how
00:25:17 we can dynamically populate these menus
00:25:20 and thereafter we'll start diving into
00:25:23 the core functionalities of this
00:25:25 application

You may also like