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

Video description

Take your JavaScript and Vue skills to the next level by learning state management, routing, authentication, and Firebase

About This Video

  • Develop your Vue.js knowledge by exploring essential concepts and practical examples
  • Create a fun pizza application using a database to store the menu and orders
  • Learn how to effectively use state management in your projects along with front-end routing

In Detail

If you have some experience of building websites using JavaScript or frameworks such as Vue.js, this course will be the next step in your learning journey.

During this course, you will build a full stack project and discover how to integrate state management, front-end routing, databases, authentication and code splitting.

You will build a pizza restaurant project from scratch which allows users to place an order from a menu section. These orders are then pushed to Firebase for persistent data storage. You will also create an admin section, where authorized users can add or remove menu items and manage orders that are placed. These orders will also be pushed to Firebase. All your pages will be managed by the Vue Router and you’ll learn to create routes, navigation methods, navigation guards, binding routes and different router modes.

This project uses Vuex for state management, which will give your app a single store for all of your state. It will be kept in sync with Firebase so you’ll always have easy, local access to your data. By the end of this course, you will be well-versed with JavaScript and Vue and have developed the skills you need to build robust projects from scratch.

Publisher resources

Download Example Code

Table of contents

  1. Chapter 1 : Introduction & Getting Started
    1. Introduction 00:02:52
    2. What you will need for this course 00:02:48
  2. Chapter 2 : Project Setup: Planet Pizza App
    1. Section intro 00:00:39
    2. Project setup using the Vue-CLI 00:06:09
    3. Header and Footer components 00:04:33
    4. Home page component 00:07:40
    5. Styling our components 00:05:13
    6. Creating the menu component 00:08:02
    7. Looping through menu items 00:05:33
    8. Pushing orders to an array 00:04:56
    9. Adding the shopping basket 00:06:01
    10. Making the shopping basket dynamic 00:05:05
    11. Shopping basket methods 00:05:26
    12. Structuring the admin section 00:07:40
    13. Listing current orders 00:05:46
    14. Add new pizza component 00:07:51
    15. Form input bindings 00:06:38
    16. Section outro 00:00:52
  3. Chapter 3 : Firebase database and authentication setup
    1. Section intro 00:00:45
    2. Setting up our Firebase database 00:09:22
    3. Adding the login component 00:06:14
    4. Enable Firebase authentication 00:03:46
    5. Signing in and out 00:08:00
    6. Final components 00:05:57
    7. Section outro 00:00:35
  4. Chapter 4 : Vue Router
    1. Section intro 00:00:37
    2. Router installation & setup 00:03:14
    3. Creating our routes 00:06:23
    4. Router link in more detail 00:04:30
    5. Binding and dynamic routes 00:04:41
    6. History and hash modes 00:03:22
    7. Catch all routes and redirecting 00:02:03
    8. Nested routes 00:07:48
    9. Nested router view 00:03:49
    10. Adding names to routes 00:05:11
    11. Router navigation methods 00:05:09
    12. Global navigation guards 00:06:21
    13. Component guards 00:04:14
    14. Guarding individual routes 00:04:03
    15. Defining scroll behaviour 00:08:15
    16. Re-factoring our routes 00:02:41
    17. Named router views 00:06:26
    18. Section outro 00:00:38
  5. Chapter 5 : Stage Management with Vuex
    1. Section intro 00:00:51
    2. What is Vuex? 00:02:44
    3. Installation and file structure 00:04:06
    4. Initial state and accessing the store 00:05:40
    5. Improving store access with getters 00:06:25
    6. Changing state with mutations 00:08:34
    7. What are actions? 00:02:05
    8. Setting the user with actions 00:04:22
    9. Dispatching actions 00:07:58
    10. Mapping getters 00:05:01
    11. Splitting our store into separate files 00:08:17
    12. Using modules 00:10:31
    13. Section outro 00:00:49
  6. Chapter 6 : Binding to Firebase & finishing our project
    1. Section intro 00:00:48
    2. Binding Vuex to Firebase 00:08:39
    3. Sync orders with Firebase 00:04:07
    4. Displaying orders in the admin section 00:07:37
    5. Adding keys to lists 00:03:58
    6. Removing items from the database 00:07:12
    7. Hiding the admin from unauthorised users 00:03:14
    8. Firebase read/write rules 00:04:36
    9. Calculating the basket total 00:04:41
    10. Global currency filter 00:06:14
    11. Finishing touches 00:06:56
    12. Section outro 00:00:35
  7. Chapter 7 : Lazy loading and code splitting
    1. Important Update: Babel syntax dynamic import 00:02:18
    2. What is code splitting and lazy loading? 00:04:01
    3. Async components 00:06:32
    4. Lazy loading with the vue router 00:05:00
    5. Grouping components into the same chunk 00:02:54
    6. Lazy loading with conditional rendering 00:08:50
  8. Chapter 8 : Thank you
    1. Thank you 00:01:57

Product information

  • Title: Vue.js: Build a Full Stack App with Firebase, Vuex and Router
  • Author(s): Chris Dixon
  • Release date: October 2019
  • Publisher(s): Packt Publishing
  • ISBN: 9781838980627