Vue.js & FireStore – Build & Deploy

Vue.js & Firestore App – Build & Deploy [Part 2]

alright guys so now that we have our view application up and running we have our firebase or fire store up and running and we have our config for our

firebase and the initializer now we're gonna start to create our components so over in the components folder in the source folder we're gonna create a couple new files first one is gonna be

the dashboard so it's going to be called dashboard dot V UE for the extension and basically a view component consists of a template and then an element so let's put a div here and we'll give this an ID

of dashboard like that and then down below here actually inside here I'll just put an h3 for now and we'll say dashboard and then down here we're gonna have some script tags with an export

default and this component will have a name of dashboard and then we're gonna have a data function here and we're just going to return from here an empty object like that so it's basically our

boilerplate for our components so let's go ahead and save this and then what I'm gonna do is copy this here all this that we just typed in and create another component so new file and we're gonna

call this new employee dot view and then we're gonna paste that in and we're just going to change up some stuff here so the heading will say new employee I'm gonna change up the ID and the name so I

can actually select both of these by saying change all occurrences and we'll change this to new – employee and we'll save that ok then we'll go and create another component so we'll say new file

and we'll call this one view V IEW v ue and we'll paste this in change this here to V employee actually this this will actually be the employees name but

that's fine front for now let's go ahead and say select all and occurrences and we'll change the ID and the component name to view – employee and we'll save that okay and then we also want let's

say we have that we want to edit employee as well so say new file edit employee dot view paste that in and we'll say edit – employee and save and then we're gonna have one more component

and that's gonna be the nav bar so now if I dot view and this is basically a just a dumb component it's not going to have anything associated with it aside from just a template with

HTML so for now I'm just gonna put just a div with an ID of nav bar and we'll just say nav bar ok so now we have at least our component files created and we have our basic templates so what I'm

gonna do now is is go to the router so we'll go to router and then index J s and then we need to import all of these components except for the nav bar cuz that's not actually going to be a route

that's just gonna be placed right in the main app component so we don't need the hello world so let's bring in dashboard that's gonna be from components / – board and then we'll go ahead and

just bring in the rest of them so we've dashboard we have new employee we have view employee and we have edit employee okay and then down here we'll define our routes now the home route I

want to be the dashboard so for the name I'm gonna say dashboard and for the component I'm gonna say dashboard okay and the case should match that the component should be Pascal case alright

and then what we'll do is put a comma here and we'll copy this let's put in three more this next one will be slash new for the path and then the name will be new employee and then the component

will be new employee Pascal case and then this one here this is gonna be the edit so we'll say slash edit slash and then we need our placeholder here this is a

parameter so this is gonna be the employee underscore ID make sure you have the colon here and then the name for this will be edit – employee and the component itself is edit

employee and then the last one will be for the view employee which I just want to be slash and then whatever the whatever the ID so it'll be employee underscore ID and then this will be view

employee and then the actual component name which is view employee so that's our router okay so let's save that and now what you're seeing here rendering is our

dashboard component because that's what we said we want the slash the index to be this image here is coming from our main app dot view file you'll see right here it's loading the logo I don't want

that so I'm going to get rid of it I'm also going to get rid of the styling down here we don't want any of that so we'll go ahead and save and now we just have a

basic boilerplate and now if we go up here we go to slash new you'll see new employee if we go to edit let's say edit / one doesn't really matter edit employee and if we go to just slash

1 we get view employees so our routes are working now what we want to do is we want to first add materialise for our styling and then we're gonna create a nav bar so we can navigate

well actually the nav bar isn't really going to be used for navigation it's just for looks we're gonna use the floating button to get to the add and the Edit Page things like that but we do

want the nav bar so let's go ahead and get materialized setup so we're gonna go to materialise CSS comm go to get started and we just want the CDN so we want to grab this link here this is the

CSS link we're gonna put this in index.html so right up here above the title and then we're gonna grab the script that's right here put this down right here now materialise j s actually

needs jQuery as a dependency so we're gonna search for jQuery CDN and we'll go ahead and grab the latest version so I'm gonna grab this script tag and put that right above the materialized script tag

okay and then another thing I want is font awesome which is an icon library so we're gonna go actually let's search for font awesome CDN so we'll grab that right here get this link tag and put

this right below materialized and then one other thing we need to do because I want to actually nevermind I was gonna say I was gonna initialize the sidebar for the materialized navbar but we're

actually not gonna have any links so we don't need to do that if you wanted to use the sidebar in the hamburger menu with materialise you just need to add a little jQuery to

initialize it but we're not gonna need that so we should be all set let's go ahead and save and now if we reload our application you can see that the font has changed the spacing has changed so

materialise is now kicked in so let's just close up the index.html and let's go to our navbar dot view file so we're gonna actually remove this div and it's gonna be a nav tag so we're gonna put

that in and then we just want a div with the class of nav and by the way I'm using Emmet that's what these shortcuts are right here so div dot nav dot wrap we also want a class of green I'm gonna

make the nav bar green and then hit tab and then in here we want a container to move everything to the middle and we're just gonna have the the branding logo or the the title alright now I want this to

I want to click the title or the logo and have it go to the home page or that the dashboard so in view we don't use a tags two for our routes or for our links we use the router link and then we do to

use an attribute called two and then say we want to go to slash ok and then well we can also give us a class just as if it were an a tag or any element and we're going to give it a class of brand

logo ok and then here we're just gonna say employee manager and save oh we need we need to insert it into the application so what we'll do is go to our main app dot view file and from here

we'll be able to just insert it but first we need to register it down here as a component so we need to bring it in so import navbar from and we're importing it from dot slash components

slash now now the bar and let's see let's go up here and we'll put it right in the div with the idea of app right above the router view okay this is where all of

our views will render whatever route we're on whatever the content is for that component is gonna render here I want the navbar to be right above it so let's go ahead and say navbar like that

okay and then we just need to register it down here so we'll put a comma right here and say components and that's gonna be an object and we're gonna say navbar all right and that should do it so let's

save and there we go now it's not green let me see what did I do here class why is it no oh this should be should actually be nav huh it should be green that's weird

div class nav rapper and you should be able to use a color here what if I say blue it's not working either come on let me see if I add something here 1 2 3 that's not being updated either so I

think something went wrong with the server so I just I'm gonna stop the server with ctrl C and then just do NPM run dev again there we go all right so sometimes that happens I'm not sure why

but that fix it all right so let's continue on here now I want all the content under the navbar to be wrapped in a container so it gets pushed over a little so in the app dot view file

let's wrap the router view inside of a div with the class of container okay so that pushed that over a little now we're not going to work with fire store yet in this video this is

basically just setting up the UI routes components all that but what I want to do before we end this video is have the floating button down here to go to the new employee page or the add employee

page so to do that we're gonna go to our dashboard and go up to let's say we want to stay within this div so we'll go like right here and we'll put in a div with the class of fixed – action – BTN and we

want let's see we're gonna put a router link and this router link needs a two attribute and it's gonna go to slash new and then we're gonna give this a class a couple materialised classes so we want

BTN – floating because we wanted to float down in the corner BTN – large and let's make it red so we'll just put a class of red and then it's gonna wrap a font awesome icon so

we'll have an eye tag with the class of FA and FA – plus that should be FA not CA so let's save that and there we go we have our little icon if we click it brings us to the new employee page okay

we will put a form here we'll have a cancel button to bring us back but we can also click the logo here to bring us back so I think now that we have our basic shell of our application we'll

stop the video here in the next one I'm going to show you how we can actually fetch our data from fire store and then bring it into the dashboard so we can see all of our employees so we'll do

that next

In this video we will create all of our components including the dashboard, new-employee, edit-employee, view-employee and navbar. We will implement the router and also Materialize CSS for the UI

CODE: Final Project
https://github.com/bradtraversy/vue_firestore_employeemanager

💖 BECOME A PATRON: Show support & get perks!
http://www.patreon.com/traversymedia

VISIT MY WEBISTE: Check Out My Udemy Courses
http://www.traversymedia.com

FOLLOW TRAVERSY MEDIA:
http://www.facebook.com/traversymedia
Posts by traversymedia
http://www.instagram.com/traversymedia
https://discord.gg/traversymedia