Coding

Dynamic Menu | Vue.js + Vuetify + Firebase FULL PROJECT

  • 00:00:01 welcome to this video great Reggie on
  • 00:00:03 board my name is Max and in the last
  • 00:00:05 video of this project series we started
  • 00:00:08 working on our toolbar we learned about
  • 00:00:10 theming and you learn how to create a
  • 00:00:13 responsive navigation here now the
  • 00:00:16 navigation isn't finished though I want
  • 00:00:18 to finish it in this video and I want to
  • 00:00:20 show you how to dynamically populate
  • 00:00:22 your toolbar and your navigation drawer
  • 00:00:24 in this application now for that I'll go
  • 00:00:27 back to the app to view file where I was
  • 00:00:29 working and actually I want to store my
  • 00:00:33 menu the menu set up in a property in my
  • 00:00:38 data property of the view instance so
  • 00:00:40 here I'll add a new property and I'll
  • 00:00:43 name it menu items and this should be an
  • 00:00:45 array now I'll represent each menu item
  • 00:00:48 as a JavaScript object where I expect to
  • 00:00:51 have the icon because I need an icon for
  • 00:00:54 both my drawer as well as my toolbar so
  • 00:00:59 ad icon here and I will also add another
  • 00:01:05 property the title so basically the text
  • 00:01:08 I want to display we can start right
  • 00:01:10 away I can grab the I can we have here
  • 00:01:12 the supervisor account edit here and
  • 00:01:15 save you meet us as a title does that be
  • 00:01:19 my first object my first menu item of
  • 00:01:22 course it's not being displayed right
  • 00:01:24 now but we'll build your menu here and
  • 00:01:26 then we'll display it so next I can
  • 00:01:29 duplicate this and now it's all about
  • 00:01:31 finding fitting icons and assigning
  • 00:01:34 titles now for this application I
  • 00:01:37 already searched for a couple of icons
  • 00:01:39 you can of course search the material
  • 00:01:41 icons page I showed in the last video of
  • 00:01:43 the series to find the one you like the
  • 00:01:45 most
  • 00:01:45 the next item I want to add in the menu
  • 00:01:48 is the room icon this is a fitting icon
  • 00:01:53 for the organized meetup menu item which
  • 00:01:58 will later allow us to go to the page
  • 00:01:59 where we create a new meter duplicate
  • 00:02:02 this thereafter I want to have the
  • 00:02:04 person icon which is a fitting icon for
  • 00:02:08 the menu point of profile of the user
  • 00:02:11 profile which you should be able to
  • 00:02:13 visit fruit
  • 00:02:14 is button here in the end then I'm going
  • 00:02:17 to duplicate just twice again the fourth
  • 00:02:20 item actually should be face and this
  • 00:02:24 should be the signup menu item and the
  • 00:02:27 last one lock underscore open for
  • 00:02:30 sign-in is there
  • 00:02:32 well last menu item I want to add now
  • 00:02:34 here's an important note in this
  • 00:02:36 application I'll of course a doth
  • 00:02:38 indication later and once we have that
  • 00:02:41 implemented will only show menu items
  • 00:02:44 which make sense
  • 00:02:45 so for authenticated users we want to
  • 00:02:47 show the first free and for adult
  • 00:02:50 finical users the last two because on
  • 00:02:52 opening credits users certainly need to
  • 00:02:54 sign up or sign in before they can do
  • 00:02:56 something with our application so this
  • 00:02:59 is the setup I want to use now we have
  • 00:03:02 two menu items stored in this array now
  • 00:03:04 I want you output them dynamically here
  • 00:03:06 in the template how do you output
  • 00:03:09 content dynamically in a view chase
  • 00:03:10 application how do you output an array
  • 00:03:12 dynamically well with v4 so to the
  • 00:03:17 wrapping list I'll which holds our
  • 00:03:19 action in the text we can add v4 and
  • 00:03:22 simply loop for our items so I'm looping
  • 00:03:25 fruity oops
  • 00:03:27 menu items here the menu items property
  • 00:03:30 we just created it is a good practice to
  • 00:03:33 assign a key then so lets dynamically
  • 00:03:35 bind a key for each loop item and I'll
  • 00:03:39 use item title which will be a unique
  • 00:03:41 string so it makes up for a good key and
  • 00:03:43 then I can start replacing your
  • 00:03:45 hard-coded values here with the dynamic
  • 00:03:47 ones like item icon referring to that I
  • 00:03:50 can property we set up down there in our
  • 00:03:53 items and of course replace the text
  • 00:03:56 with item title here with that let's do
  • 00:04:01 the same for the toolbar
  • 00:04:03 here we got our buttons through which I
  • 00:04:06 want to loop so v4 and then again item
  • 00:04:09 in menu items assign a key here item
  • 00:04:13 title and replace both the icon and the
  • 00:04:16 text so I Adam icon and item
  • 00:04:24 title like that let's save just let's
  • 00:04:28 see if we worked as it should we have a
  • 00:04:31 look at our application this looks are
  • 00:04:33 kind of good I think we have some fixing
  • 00:04:35 to do regarding the width of our toolbar
  • 00:04:37 they will keep in mind in the final
  • 00:04:39 application there will only be a maximum
  • 00:04:43 of three items displayed because will
  • 00:04:45 either have sign up and sign in being
  • 00:04:47 hidden because we're authenticated or
  • 00:04:49 yabber free because we're not
  • 00:04:51 authenticated so actually it's not a
  • 00:04:53 problem in the final application if I
  • 00:04:55 decrease this in width and have a look
  • 00:04:57 at the drawer this looks good q with
  • 00:05:00 that we got our design finished or the
  • 00:05:04 toolbar finished we got our items added
  • 00:05:06 of course none of them does anything we
  • 00:05:09 haven't set up routing so that will be
  • 00:05:11 the task we have to check on next add
  • 00:05:14 routing to your application to make sure
  • 00:05:17 we can actually go somewhere when we
  • 00:05:18 click these items so let's tackle
  • 00:05:20 routing next we already have to router
  • 00:05:23 install since we chose to do so when we
  • 00:05:25 set up this project and we got one route
  • 00:05:27 route by default the hello route
  • 00:05:30 components hello file here and we don't
  • 00:05:33 actually see that being displayed the
  • 00:05:35 reason for this is that we have no
  • 00:05:37 router view so let's start by reading
  • 00:05:39 that in the apt of you fall in the main
  • 00:05:41 section let's add router view here and
  • 00:05:45 let's save this now we see our welcome
  • 00:05:49 page this is what we started with now I
  • 00:05:53 of course I want to use that I want to
  • 00:05:55 use my own pages I will go back to the
  • 00:05:58 application therefore and remove the
  • 00:06:00 hello the view fall and I want to add
  • 00:06:02 some other components there now here
  • 00:06:05 I'll first of all create a subfolder a
  • 00:06:08 subfolder named meetup with a capital M
  • 00:06:11 here that's the naming convention I'm
  • 00:06:13 going to follow here and in that folder
  • 00:06:15 I want to store all the meetup related
  • 00:06:17 components I'll also create another
  • 00:06:19 folder named user where I want to store
  • 00:06:22 the user related components and then on
  • 00:06:25 the root level
  • 00:06:26 I'll trade a file home dot view so
  • 00:06:29 that's going to be to be the home page
  • 00:06:30 on which we start eventually in that
  • 00:06:33 home page I'll add a template
  • 00:06:37 so therefore now we're I'll simply say
  • 00:06:39 the homepage and I'll start with a
  • 00:06:42 simple template like this and all the
  • 00:06:44 components for now we'll then fill them
  • 00:06:46 with life throughout this project let me
  • 00:06:49 copy that
  • 00:06:49 template and in the meetup folder I now
  • 00:06:52 also want to create some fitting pages
  • 00:06:54 which will need oops another directory
  • 00:06:56 though here I'll first of all treat a
  • 00:06:59 meet-up stub you file which will be the
  • 00:07:02 page we visit when we want to see a list
  • 00:07:04 of all meetups so let me quickly create
  • 00:07:07 that file open it and paste in the same
  • 00:07:10 content here I'll say the meetups page
  • 00:07:11 of course now whenever we click there we
  • 00:07:15 are on the meetups page
  • 00:07:16 we all set a page to create a new meetup
  • 00:07:19 though so I'll also create a new file d
  • 00:07:22 create meetup the view file this
  • 00:07:26 component here will actually contain my
  • 00:07:28 create meetup page now the next
  • 00:07:32 component I want to add is in the user
  • 00:07:34 folder because there we also have a
  • 00:07:37 profile a signup and a sign-in page so
  • 00:07:40 let's add the profile that view file in
  • 00:07:43 that user folder and as a side note
  • 00:07:45 I'll later reorganize these files and
  • 00:07:48 structure them a bit differently but for
  • 00:07:49 now this will do so here we'll have the
  • 00:07:52 user page then I'll also add the sign in
  • 00:07:56 dot view file here let's add that the
  • 00:08:00 sign-in page and finally let's add a
  • 00:08:05 third file here sign up that view and
  • 00:08:09 let let's add you sign up page here what
  • 00:08:14 that I got all the pages I need for now
  • 00:08:15 again we'll of course work on them
  • 00:08:17 throughout the project now we can
  • 00:08:19 register our routes in the index chest
  • 00:08:21 file in the router folder as a side note
  • 00:08:23 if you're wondering how that gets into
  • 00:08:25 our project and you may not chase fault
  • 00:08:28 we are importing that file web pack
  • 00:08:32 simply is configured to automatically
  • 00:08:33 fetch the indexed up J's file if we're
  • 00:08:35 just referencing a folder as we are here
  • 00:08:38 so this could be completed to slash
  • 00:08:40 index but again web completes it
  • 00:08:42 automatically in this setup here and
  • 00:08:45 then the router which is exported in
  • 00:08:47 that file keep in mind we're using the
  • 00:08:50 router
  • 00:08:50 we're exporting a new router that is
  • 00:08:53 simply added as a router to a root view
  • 00:08:55 instance so this is how that comes
  • 00:08:57 together now in that router I want to
  • 00:08:59 register more routes or different routes
  • 00:09:01 the root path for example should lead to
  • 00:09:05 the home component so first of all I
  • 00:09:08 have to overwrite this import I'll
  • 00:09:10 import home and you can assign any name
  • 00:09:12 you want here from components home
  • 00:09:14 here's another neat feature this
  • 00:09:16 specific web peg set of offers us we
  • 00:09:19 have an alias for the root folder the
  • 00:09:22 root folder in the source project I
  • 00:09:24 should say so at slash refers to Soros
  • 00:09:28 which is why with add slash components
  • 00:09:31 we reach this file here and there I'm
  • 00:09:33 now importing the home valve dot view
  • 00:09:35 also gets added automatically
  • 00:09:38 so importing home get a couple of our
  • 00:09:40 files and need for example meetups here
  • 00:09:43 under components and there is under meet
  • 00:09:46 up meet ups dot view refer it to this
  • 00:09:49 file next I'll also import the create
  • 00:09:53 meetup component from the create meetup
  • 00:09:58 file in the same folder and then from
  • 00:10:01 the user folder I'll need the profile
  • 00:10:03 component so here that's from slash user
  • 00:10:06 here the profile that view file is what
  • 00:10:09 we're referencing and then we get the
  • 00:10:11 sign up from user to sign up file and of
  • 00:10:16 course to sign in file which I'll store
  • 00:10:18 in a sign in variable here now what G is
  • 00:10:22 all imported I can start adding routes
  • 00:10:24 the first route I'll give it a name of
  • 00:10:27 home and the name is optional you don't
  • 00:10:29 have to assign a name we can simply omit
  • 00:10:31 it here I guess I won't use it but we'll
  • 00:10:33 see you can use a name to navigate them
  • 00:10:35 instead of the path so I'll leave the
  • 00:10:38 name for now and I'll add a new route
  • 00:10:40 here here I want to set up a path of
  • 00:10:45 slash meet-ups and I want to load a
  • 00:10:49 component the meetups component of
  • 00:10:52 course can also assign a name here
  • 00:10:54 meetups to stay in line with the other
  • 00:10:57 set up then a new path is meetup slash
  • 00:11:02 new maybe and for
  • 00:11:03 you can choose any parts you would
  • 00:11:04 prefer oops don't forget to get the
  • 00:11:07 comma here after the name I'll add a
  • 00:11:09 name here of create Meetup
  • 00:11:11 and I'll load the component create
  • 00:11:15 meetup like that I'll add another route
  • 00:11:19 here with a pop of slash profile I'll
  • 00:11:22 give it a name of you guessed it
  • 00:11:26 profile and I'll load a component here
  • 00:11:28 the profile component finally we're at
  • 00:11:33 the last two routes here these sign up
  • 00:11:37 pop should load a component where route
  • 00:11:42 loaded named sign up and I'll use my
  • 00:11:45 sign up component here and finally the
  • 00:11:49 last route I know you'll love adding
  • 00:11:52 routes is slash sign in with the name of
  • 00:11:56 sign in it's super hot here by the way
  • 00:11:58 so that really is fun to record this so
  • 00:12:02 let's add sign in here these are the
  • 00:12:05 routes I'm going to use in this
  • 00:12:06 application let's actually see if it
  • 00:12:08 works we get the router view we got
  • 00:12:10 routes so if we go there and we enter
  • 00:12:13 slash sign in now click that we see the
  • 00:12:18 sign in page if we add whoops slash sign
  • 00:12:22 up there we see the setup page now
  • 00:12:24 regarding that navigation drawer which
  • 00:12:26 kept occurring that was related to the
  • 00:12:29 way we load our routes um we could of
  • 00:12:32 course also prevent this but I don't
  • 00:12:34 want to use this route style
  • 00:12:36 anyways using this hash Bank symbol and
  • 00:12:39 therefore having a different section for
  • 00:12:40 client side and server side routes this
  • 00:12:43 development server actually is
  • 00:12:44 configured to fall back to that
  • 00:12:46 index.html file in case of 404 errors
  • 00:12:50 anyways so we can use the prettier URL
  • 00:12:53 style which you can set up in our
  • 00:12:54 index.js file on the router after the
  • 00:12:57 routes all set mode to a string which is
  • 00:13:00 history and this uses the HTML file
  • 00:13:03 history mode which is just a slash so
  • 00:13:06 just these normal routes here instead of
  • 00:13:09 a hash tag in between and as I mentioned
  • 00:13:12 your server needs to be configured to
  • 00:13:13 handle this because if your server is
  • 00:13:16 not
  • 00:13:17 this route obviously is always resolved
  • 00:13:19 first on the server and it won't be
  • 00:13:21 found there because we only set it up on
  • 00:13:22 a client so your server needs to return
  • 00:13:25 the client in 404 error cases please to
  • 00:13:27 return the index.html file in such cases
  • 00:13:29 so that your index.html file can take
  • 00:13:33 over and can handle that route this will
  • 00:13:35 become important later once you deploy
  • 00:13:37 this application so far so good though
  • 00:13:39 we have the routing setup
  • 00:13:41 now let's hook up all these links so
  • 00:13:43 that it actually works so back in the
  • 00:13:46 app thoughtyou file here i want to
  • 00:13:49 assign links to all my routes right and
  • 00:13:51 we again need to do this of course in
  • 00:13:54 our menu items here in the code so there
  • 00:13:57 I'll quickly add a link property to all
  • 00:14:00 of them and links should be a string now
  • 00:14:04 for view meetups this should just be
  • 00:14:08 meetups for organizing me that that
  • 00:14:11 should be slash meetup new for the
  • 00:14:15 profile that should be slash profile and
  • 00:14:17 for signup it should be slash sign up
  • 00:14:20 for sign in it of course should be slash
  • 00:14:23 sign in having the links here is nice we
  • 00:14:26 also need to get them into our template
  • 00:14:28 though there's one other thing I want to
  • 00:14:30 link up there the title if you click the
  • 00:14:32 tile I when I go back to the root page
  • 00:14:34 so here I'll actually also sign a link
  • 00:14:37 to the title here and you can view this
  • 00:14:40 by wrapping the dev meetup here into
  • 00:14:44 something you know from vanilla UJS so
  • 00:14:47 to say because it is what I love you
  • 00:14:48 chairs a router link element so that's
  • 00:14:52 not beautified that's when they love you
  • 00:14:53 here we turn this into a link by adding
  • 00:14:56 router link to that meetup we're
  • 00:14:58 wrapping it in – to be precise then we
  • 00:15:01 set Q and I'll just set it to slash and
  • 00:15:04 that actually is it for now I want to
  • 00:15:07 give it a tag of span though so that I'm
  • 00:15:09 not using anchor tag to make it look
  • 00:15:11 nicer and with that I'll also add a
  • 00:15:14 style where I set the cursor to a
  • 00:15:16 pointer so that we again get this
  • 00:15:18 hovering in fact this this pointer when
  • 00:15:21 we hover over it with that now you can
  • 00:15:23 see it looks like a link works like a
  • 00:15:25 link you'll also notice though that this
  • 00:15:27 navigation drawer again pops up so time
  • 00:15:30 to
  • 00:15:30 this issue we can simply fix it by
  • 00:15:32 adding the temporary directive to the
  • 00:15:34 drawer which basically means that it's
  • 00:15:37 not always present it tries to add it
  • 00:15:40 otherwise if the page loads so with that
  • 00:15:42 if we now save this and let's go to
  • 00:15:45 another page first and click that link
  • 00:15:47 again now we're back without the drawer
  • 00:15:49 opening so that's all working but our
  • 00:15:51 links still aren't hooked up so let's go
  • 00:15:55 back there and now I want you add some
  • 00:15:58 links now for that we need to link our
  • 00:16:01 list tiles and our buttons here let's
  • 00:16:05 start with the list tiles
  • 00:16:06 I'll wrap these items here over multiple
  • 00:16:10 lines and then we can add a useful
  • 00:16:13 property or directive to that can add
  • 00:16:17 router to the list how to inform you
  • 00:16:19 defied that a click on this should use
  • 00:16:21 the router and then the queue property
  • 00:16:24 to bind to something now here we won't
  • 00:16:26 just pass a string instead we need to
  • 00:16:28 bind to the item link add a colon
  • 00:16:32 because we need to add a dynamic value
  • 00:16:34 here the link of the current item if we
  • 00:16:37 do this and we shrink this application
  • 00:16:40 so that we can see the drawer and we
  • 00:16:43 click on profile now you see the user
  • 00:16:45 page click on organize meetup to create
  • 00:16:48 main media page and so on so now this is
  • 00:16:50 working as it should and it's kind of
  • 00:16:53 similar for the tool bar there I also
  • 00:16:56 want to connect the router to it so it's
  • 00:16:59 on the button now I'll also organize
  • 00:17:03 that over multiple lines and here to the
  • 00:17:05 button we also add the router directive
  • 00:17:08 and you can't add this to any component
  • 00:17:10 but too many – I am components where it
  • 00:17:13 typically make sense to navigate and
  • 00:17:15 just as before we also need to set Q and
  • 00:17:18 bind this to item linked with that if we
  • 00:17:23 now reload this click on View Madhav's
  • 00:17:25 you see that all seems to work fine here
  • 00:17:29 get the basic setup of our navigation
  • 00:17:32 was a lot of work but with that we're
  • 00:17:35 now well-prepared to start working on
  • 00:17:37 the individual pages and I want to start
  • 00:17:40 with the home page and this caruso of
  • 00:17:42 different