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

Table of Contents

Chapter 1 : Introduction & Getting Started

Introduction 00:02:52

What you will need for this course 00:02:48

Chapter 2 : Project Setup: Planet Pizza App

Section intro 00:00:39

Project setup using the Vue-CLI 00:06:09

Header and Footer components 00:04:33

Home page component 00:07:40

Styling our components 00:05:13

Creating the menu component 00:08:02

Looping through menu items 00:05:33

Pushing orders to an array 00:04:56

Adding the shopping basket 00:06:01

Making the shopping basket dynamic 00:05:05

Shopping basket methods 00:05:26

Structuring the admin section 00:07:40

Listing current orders 00:05:46

Add new pizza component 00:07:51

Form input bindings 00:06:38

Section outro 00:00:52

Chapter 3 : Firebase database and authentication setup

Section intro 00:00:45

Setting up our Firebase database 00:09:22

Adding the login component 00:06:14

Enable Firebase authentication 00:03:46

Signing in and out 00:08:00

Final components 00:05:57

Section outro 00:00:35

Chapter 4 : Vue Router

Section intro 00:00:37

Router installation & setup 00:03:14

Creating our routes 00:06:23

Router link in more detail 00:04:30

Binding and dynamic routes 00:04:41

History and hash modes 00:03:22

Catch all routes and redirecting 00:02:03

Nested routes 00:07:48

Nested router view 00:03:49

Adding names to routes 00:05:11

Router navigation methods 00:05:09

Global navigation guards 00:06:21

Component guards 00:04:14

Guarding individual routes 00:04:03

Defining scroll behaviour 00:08:15

Re-factoring our routes 00:02:41

Named router views 00:06:26

Section outro 00:00:38

Chapter 5 : Stage Management with Vuex

Section intro 00:00:51

What is Vuex? 00:02:44

Installation and file structure 00:04:06

Initial state and accessing the store 00:05:40

Improving store access with getters 00:06:25

Changing state with mutations 00:08:34

What are actions? 00:02:05

Setting the user with actions 00:04:22

Dispatching actions 00:07:58

Mapping getters 00:05:01

Splitting our store into separate files 00:08:17

Using modules 00:10:31

Section outro 00:00:49

Chapter 6 : Binding to Firebase & finishing our project

Section intro 00:00:48

Binding Vuex to Firebase 00:08:39

Sync orders with Firebase 00:04:07

Displaying orders in the admin section 00:07:37

Adding keys to lists 00:03:58

Removing items from the database 00:07:12

Hiding the admin from unauthorised users 00:03:14

Firebase read/write rules 00:04:36

Calculating the basket total 00:04:41

Global currency filter 00:06:14

Finishing touches 00:06:56

Section outro 00:00:35

Chapter 7 : Lazy loading and code splitting

Important Update: Babel syntax dynamic import 00:02:18

What is code splitting and lazy loading? 00:04:01

Async components 00:06:32

Lazy loading with the vue router 00:05:00

Grouping components into the same chunk 00:02:54

Lazy loading with conditional rendering 00:08:50

Chapter 8 : Thank you

Thank you 00:01:57