This course was created with the
course builder. Create your online course today.
Start now
Create your course
with
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
Listing current orders
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock