Categories

There are currently no items in your shopping cart.

User Panel

Forgot your password?.

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

Video Introducing this tutorial


Introduction & Getting Started :
Introduction
What you will need for this course

Project Setup: Planet Pizza App :
Section intro
Project setup using the Vue-CLI
Header and Footer components
Home page component
Styling our components
Creating the menu component
Looping through menu items
Pushing orders to an array
Adding the shopping basket
Making the shopping basket dynamic
Shopping basket methods
Structuring the admin section
Listing current orders
Add new pizza component
Form input bindings
Section outro

Firebase database and authentication setup :
Section intro
Setting up our Firebase database
Adding the login component
Enable Firebase authentication
Signing in and out
Final components
Section outro

Vue Router :
Section intro
Router installation & setup
Creating our routes
Router link in more detail
Binding and dynamic routes
History and hash modes
Catch all routes and redirecting
Nested routes
Nested router view
Adding names to routes
Router navigation methods
Global navigation guards
Component guards
Guarding individual routes
Defining scroll behaviour
Re-factoring our routes
Named router views
Section outro

Stage Management with Vuex :
Section intro
What is Vuex?
Installation and file structure
Initial state and accessing the store
Improving store access with getters
Changing state with mutations
What are actions?
Setting the user with actions
Dispatching actions
Mapping getters
Splitting our store into separate files
Using modules
Section outro

Binding to Firebase & finishing our project :
Section intro
Binding Vuex to Firebase
Sync orders with Firebase
Displaying orders in the admin section
Adding keys to lists
Removing items from the database
Hiding the admin from unauthorised users
Firebase read/write rules
Calculating the basket total
Global currency filter
Finishing touches
Section outro

Lazy loading and code splitting :
Important Update: Babel syntax dynamic import
What is code splitting and lazy loading?
Async components
Lazy loading with the vue router
Grouping components into the same chunk
Lazy loading with conditional rendering

Thank you :
Thank you