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

00:17:43 in the next video

You may also like