Vue.js: Build a Full Stack App With Firebase, Vuex & Vue Router

*** Class fully updated for January 2020! ***

If you have a little experience of building websites using Javascript or frameworks such as Vue.js, this course is the next step in your learning journey! 

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

Finished code is available for each lesson on Github to compare if you get stuck:

https://github.com/chrisdixon161/Pizza-Planet-V2-Stages

============================​

If you do not have any experience of Vue.js or a similar framework, I have a beginner friendly course also available:

Vue.js 2 Academy: Learn Vue Step by Step

============================

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. 

We also create a admin section, where authorised users can add or remove menu items and manage any orders placed. these orders are also pushed to Firebase.

All of our pages are managed by the Vue Router and you will learn all about creating routes, navigation methods, nav guards, binding routes and different router modes.

This project also uses Vuex for state management. This will give our app a single store for all of our state, this will be also kept in sync with Firebase so we always have easy, local access to all of our data.

So if you are looking for a course to teach you how to build a full, feature packed project from scratch, then enrol today!  

• Welcome to the course!
• What you will need for this course
• Project setup using the Vue-CLI
• The header component
• Home page component
• 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
• Setting up our Firebase database
• Adding the login component
• Enable Firebase authentication
• Signing in and out
• Final components
• Router installation and 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 behavior
• Re-factoring our routes
• Named router views
• 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
• Binding Vuex to Firebase
• Sync orders with Firebase
• Displaying orders in the admin section
• Moving add new pizza to the central store
• Removing items from the database
• Hiding the admin from unauthorised users
• Calculating the basket total
• Global currency filter
• Finishing touches
• What is code splitting and lazy loading?
• Lazy loading with the Vue router
• Grouping components into the same chunk
• Lazy loading with conditional rendering
• Firebase rules
• Deploying to Netlify
• Follow me on Skillshare!