Vue.js: Build a Full Stack App with Firebase, Vuex and Router

1. Introduction

This video introduces the course.

2. What you will need for this course

In this video we will run through what you will need and where to download them.

1. Section intro

In this video, we will put our basic app structure together by creating a new app using the vue-cli, then building our pages and components.

2. Project setup using the Vue-CLI

In this video, you are going to kick off this project by scaffolding the app using the Vue-CLI. Then we get to work with the basic structure of the app by adding in Bootstrap for styling and adding our first component files.

3. Header and Footer components

The header and footer files are components which will be consistent across our Vue.js project. This video focuses on creating the single file templates for each, so they are ready to add to the home page, in the next video.

4. Home page component

In this video, you will add the content to the home page component file. Here you add the THML content to the template including the text and button to link to the menu and add our 3 components you have already created to the main App.vue file. Once you have them registered, you can go ahead and add them to the template to finally see the content displayed in the browser.

5. Styling our components

Let's now add some styling to this home page, including adding in the background image.

6. Creating the menu component

In this video, let's add the Menu.vue component, inside of our components folder. The first part is to create our template, which will just be a html table with some Bootstrap classes for styling. This table will be used to display our pizzas with the names and options available.

7. Looping through menu items

In this video, you will be going to add some menu items into the data property to work with.This will be in an object which you can then loop through, using the vue.js v-for directive, to add the dynamic data to the table of items.

8. Pushing orders to an array

In this video, we are going to begin creating the shopping basket so the user can add to it. In the Vue instance, we set up a basket data property as an array, to store the items inside. Then, we create a method to push the selected menu items to this array.

9. Adding the shopping basket

In this video you will create a table to display the order items.

10. Making the shopping basket dynamic

Inorder to make our data dynamic we can loop through the contents of the basket array in this video.

11. Shopping basket methods

In this video, we are going to get the plus and minus buttons working so we can change the quantity of each item. Also, related to this, when the quantity is reduced to zero, we want the item to be removed from the basket.

12. Structuring the admin section

In this video, we are going to structure the admin section.

13. Listing current orders

In this video, we will add a second row to the admin which is the area which displays the current orders below and a table too and will soon get the information in sync with Firebase.

14. Add new pizza component

The add new pizza component is basically a form to add a new pizza to the database. All the related functionality of pushing to the database is also contained together with it.

15. Form input bindings

In this video, we are going to add a way of capturing the users input and storing it. We are going to do this easily by using the vue.js directive v-model, which creates 2-way data binding.

16. Section outro

In this section, we are going to see what we are going to do in the later sections.

1. Section intro

This video introduces the section. We begin by setting up our database and adding it to our project, then we push the menu items to our new database. Also, we use Firebase authentication to allow users to sign in and out of the admin section.

2. Setting up our Firebase database

In this video, we are going to setup our database to store information and we are going to use Firebase for the projects database. We will then set up a method, inside of the vue instance, to push this data to the database.

3. Adding the login component

In this video we are going to add a login component which we can place inside of the admin, this can then communicate with Firebase to provide authentication.

4. Enable Firebase authentication

In this video, we are going to enable email and password authentication within Firebase and set up click handlers to trigger methods inside of the Vue instance.

5. Signing in and out

In this video we are going to complete the methods to communicate with Firebase. First, we need to capture the users email and password from the sign in form, then, using provided Firebase methods we can then check if the user is authorized to continue.

6. Final components

In this video, we are going to add the remaining components needed for this project. They are going to be simple components such as about us and contact us.

7. Section outro

This video summarizes the section.

1. Section intro

In this video, we are going to take a dive into the Vue Router. Here we are going to cover how to set up our routes, how to display them, how and where we want them to appear, navigation guards and so much more, so let's get straight to it by creating our routes.

2. Router installation & setup

In this video, we are going to install vue router using NPM. Then we move on to creating our new Vue router instance.

3. Creating our routes

In this video, we are going to add some routes to allow us to switch between pages or components.

4. Router link in more detail

In this video, let's look at this router link component in more detail. we first look at how the tag is rendered by default, often causing multiple nested links. To fix this, we add a prop called 'tag'. Then we look at the classes the vue router adds by default and what each one does.

5. Binding and dynamic routes

In this video, you will learn binding and dynamic routes.

6. History and hash modes

This video is about History and Hash modes.

7. Catch all routes and redirecting

This video shows a way to handle 404 errors where the URL is not found. This is pretty simple to fix; all we need to do is to add a "catch all" route for these cases. Also, we look at how to add redirects to our routes.

8. Nested routes

Vue-router makes it easy for us to add nested routes to group together routes which we want to be related.

9. Nested router view

In this video, we will add router-view component, which we can add under the menu.

10. Adding names to routes

All the paths for the routes we have created so far, have used a string to specify the path of the URL we want to navigate to such as /menu, /admin etc. There is an alternative however which may be more convenient, especially for longer paths and this is to add a name to the route.

11. Router navigation methods

All the navigations we have performed so far have been the result of using the component to take us to a path we specify. There is also an alternative way of doing this however by using code to navigate programmatically. Here we look at the Vue router's instance methods of go (), replace () and push ().

12. Global navigation guards

This video is about Global navigation guards. Let's see global beforeEach() guard, the code inside here is triggered before each route is navigated to.

13. Component guards

This video shows an alternative to global guards where it only adds the guards inside of a component. This way, only the component being navigated to and from will be affected by the guards.

14. Guarding individual routes

This video shows a beforeEnter guard, which can be added directly where we define our route. This works just like the global beforeEnter guard and takes in to, from and next arguments.

15. Defining scroll behaviour

In this video, you will be shown the scrolling behavior using Vue Router and this is dependent on our router mode being set to history mode.

16. Re-factoring our routes

This video shows how to move the routes to their own file to tidy things up and make things more maintainable.

17. Named router views

This video shows how to display multiple views on the same page, rather than just switching between them.

18. Section outro

This video summarizes the section.

1. Section intro

This video introduces the Vuex section of this course. Vuex is a state management pattern and library for use with Vue.js applications.

2. What is Vuex?

During building Vue.js projects, we can manage the application state in several ways. We can share state between components by passing data from child to parent components using custom events. Also, we can do things the other way around by-passing props. Vuex is ideal for managing larger applications and it written by the Vue team so integrates perfectly into your Vue.js projects. Like the event bus, it also acts as a single, central store for our state, but it has some benefits over the event b

3. Installation and file structure

In this video, we look at a common file/folder structure, along with setting up and registering our store with Vue.js.

4. Initial state and accessing the store

This video shows how to add some state to our Vuex store and see how we can access it from within components.

5. Improving store access with getters

This video is about getters and shows what we can do with getters.

6. Changing state with mutations

This video focus on changing the state inside of the store and the correct way to do this is by committing a mutation. Mutations simply change data inside of our store. They work in a similar way to emitting events which pass data between components when not using Vuex. But rather than $emit data to a component, we commit changes to the store. Also, mutations follow Vue's reactivity rules, this means once we use a mutation to change the state, all the components watching this state will update a

7. What are actions?

Actions can contain asynchronous code and are a bit like mutations. However, actions do not mutate the state, they instead commit mutations. This means if we have the need to run asynchronous code, such as server requests, an action would be used over a mutation.

8. Setting the user with actions

In this video, We are going to add an action to set the current logged in user.

9. Dispatching actions

Since setting the user is part of the login process, we will be dispatching this action from the Login.vue component. This video adds an observer provided by Firebase called onAuthStateChanged(). This will detect when the user is logged in, or logged out, and then we will dispatch the action each time.

10. Mapping getters

This video shows mapping getters in detail.

11. Splitting our store into separate files

This video shows splitting the store into separate files.

12. Using modules

Vuex also allows us to organize our code into modules. We just covered separating our actions, getters and mutation into their own files which was an improvement, but we can improve things even further, by grouping together related functionality. For example, everything which is currently in our store, can split into 3 groups. It is either related to the menu, the orders or our users. So, we can organize our code into these 3 modules.

13. Section outro

This video summarizes the section.

1. Section intro

This video introduces the section and here we will also be binding our Vuex store to Firebase. While Vuex may be a convenient, central location to push and retrieve our data, it is not persistent. This means if we reload the app, any changes made to the store are lost.To fix this, and make sure our menu items and orders are stored permanently, we are going to keep the Vuex store in sync with Firebase. Along with this, we will be adding lots of finishing touches and features to our project

2. Binding Vuex to Firebase

This video shows how to bind Vuex to Firebase. We will do this with a package called vuexfire. This package is maintained by the core vue.js team and it will allow our central vuex store to be kept in sync with our Firebase data. It does this by listening to our Firebase database and then committing mutations to change our state to match.

3. Sync orders with Firebase

While we are about keeping our menu items in sync with Firebase, we can also do the same with our orders. To begin, over in the firebaseConfig file, we already have a database reference to our menu, we also need to do the same for the orders.

4. Displaying orders in the admin section

This video uses this getter in the Admin component to display the orders, and also change our shopping basket to push orders to Firebase rather than to the Vuex store.

5. Adding keys to lists

This video is about adding keys to lists.

6. Removing items from the database

This video shows how to delete items from database. Over in the Admin component, we have already added the HTML to show a delete button to remove pizzas from the menu, and to remove orders when completed. We can now add a method to these buttons to remove the items from the database.

7. Hiding the admin from unauthorised users

This video shows hiding the admin from unauthorised users. To do this, we need to add conditional rendering using v-if. Before we can do this, over in the admin.vue component, we need access to the logged in state from the vuex store. Earlier in this project we created a getter called currentUser, we can now re-use this in the admin.

8. Firebase read/write rules

In the last video, we hid the details of the admin screen from unauthorized users. This means if a user is not logged in, they will simply only see the login component and not any details from our database. This is a good starting point, but we can also add another layer of security too. This is done inside of the Firebase console and it sets a rule to only allow authorized users to write to the database.

9. Calculating the basket total

In our menu section, we can successfully add items to the shopping basket. We even see the line total change when we increase or decrease the item quantity. The number is not formatted to currency yet, but we will cover this with a currency filter in the next video. At the bottom, we have the text of "Order total" but no price is displaying yet. This is what we are going to do in this video by setting up a computed property to re-calculate the total.

10. Global currency filter

In the last video we successfully created a total cost for our basket and outputted it using a computed property. If we add to the basket quantities, you will notice that there is no formatting to the numbers. They are all at different decimal places and there is no currency symbol either next to the price.To fix this we are going to use a NPM package called accounting.js. This is a small Javascript library which will add currency parsing and formatting to our numbers.

11. Finishing touches

In this video we are going to add some finishing touches to the project. We add some final CSS and change the login components text, depending if the user is logged in or out.

12. Section outro

This video summarizes the section.

1. Important Update: Babel syntax dynamic import

This video is about Babel syntax dynamic import.

2. What is code splitting and lazy loading?

This video is about code splitting which is the process of breaking up our app into smaller bundles to download when needed. We need to decide what is the minimum, or most important content the user needs to initially download to keep the bundle as small as possible.Then split up the rest to only be downloaded when needed.

3. Async components

Vue.js allows us to effectively take components out of the main bundle rendering and load them in the background asychronously. To do this, we can covert this global component into a async component. Vue allows us to define a component as a factory function which it only loads when needed, also it will cache the result for any future re-renders too. Also, as they are asynchronous, they will load in the background and not block the rest of the bundle from rendering.

4. Lazy loading with the vue router

We can also apply code splitting and lazy loading when using the vue router. This is relatively easy to implement as our pages are already in their own separate file. This means we can separate these page components, and only load them when a user visits that page.

5. Grouping components into the same chunk

We now know how to split up our bundle and lazy load components when required. Sometimes though, we may want to group together certain related components to be downloaded together, these groups are called chunks.

6. Lazy loading with conditional rendering

This video shows lazy loading with conditional rendering which basically involves moving the hidden content to a separate component, and then using the dynamic import to re-introduce it back into the admin component.

1. Thank you

This video summarizes the section.