Global navigation guards | Chris Dixon.io

Autoplay
Autocomplete

Previous Lesson Complete and Continue

Vue.js: Build a full stack app with Firebase, Vuex & Vue Router

Introduction & Getting Started

Introduction (2:32)
What you will need for this course (2:48)

Project Setup: Planet Pizza App

Project setup using the Vue-CLI (5:29)
The header component (10:10)
Home page component (9:23)

Creating our menu and shopping basket

Creating the menu component (9:22)
Looping through menu items (6:34)
Pushing orders to an array (7:05)
Adding the shopping basket (4:33)
Making the shopping basket dynamic (5:20)
Shopping basket methods (4:33)

The admin section

Structuring the admin section (5:18)
Listing current orders (6:16)
Add new pizza component (8:32)
Form input bindings (5:38)

Firebase and authentication setup

Setting up our Firebase database (8:07)
Adding the login component (3:26)
Enable firebase authentication (3:59)
Signing in and out (7:30)
Final components (5:51)

Vue Router

Router installation and setup (3:25)
Creating our routes (5:52)
Router link in more detail (4:43)
Binding and dynamic routes (5:48)
History and hash modes (3:15)
Catch all routes and redirecting (1:40)
Nested routes (5:27)
Nested router view (6:09)
Adding names to routes (4:25)
Router navigation methods (4:40)
Global navigation guards (7:03)
Component guards (4:27)
Guarding individual routes (2:12)
Defining scroll behaviour (6:46)
Re-factoring our routes (2:12)
Named router views (9:08)
Setting the user with actions (5:51)

State management with Vuex

What is Vuex? (3:01)
Installation and file structure (4:12)
Initial state and accessing the store (4:40)
Improving store access with getters (5:09)
Changing state with mutations (6:37)
What are actions (2:02)
Dispatching actions (6:54)
Mapping getters (3:34)
Splitting our store into separate files (6:52)
Using modules (9:02)

Binding to Firebase & finishing our project

Binding Vuex to Firebase (8:35)
Sync orders with Firebase (3:26)
Displaying order in the admin section (8:51)
Moving add new pizza to central store (3:21)
Removing items from the database (6:01)
Hiding the admin from unauthorised users (3:01)
Calculating the basket total (2:51)
Global currency filter (4:58)
Finishing touches (5:28)

Lazy loading and code splitting

What is code splitting and lazy loading (4:47)
Lazy loading with the Vue router (4:20)
Grouping components into the same chunk (2:14)
Lazy loading with conditional rendering (7:35)

Deployment

Firebase rules (4:24)
Deployment to Netlify (7:16)

Thank you

Thank you (1:56)
Keep on learning

Teach online with

Global navigation guards

Lesson content locked

If you're already enrolled, you'll need to login.

Enroll in Course to Unlock