English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 6h 05m | 3.47 GB
Take your JavaScript and Vue skills to the next level by learning state management, routing, authentication, and Firebase
If you have some experience of building websites using JavaScript or frameworks such as Vue.js, this course will be the next step in your learning journey.
During this course, you will build a full stack project and discover how to integrate state management, front-end routing, databases, authentication and code splitting.
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. You will also create an admin section, where authorized users can add or remove menu items and manage orders that are placed. These orders will also be pushed to Firebase. All your pages will be managed by the Vue Router and you’ll learn to create routes, navigation methods, navigation guards, binding routes and different router modes.
This project uses Vuex for state management, which will give your app a single store for all of your state. It will be kept in sync with Firebase so you’ll always have easy, local access to your data. By the end of this course, you will be well-versed with JavaScript and Vue and have developed the skills you need to build robust projects from scratch.
Learn
- Discover core Vue concepts such as for instance methods, looping, components, data binding, passing data and event handling
- Understand how to apply routing concepts such as scroll behavior and navigation guards
- Integrate Firebase with projects for persistent data storage and authentication
Table of Contents
Introduction & Getting Started
1 Introduction
2 What you will need for this course
Project Setup Planet Pizza App
3 Section intro
4 Making the shopping basket dynamic
5 Shopping basket methods
6 Structuring the admin section
7 Listing current orders
8 Add new pizza component
9 Form input bindings
10 Section outro
11 Project setup using the Vue-CLI
12 Header and Footer components
13 Home page component
14 Styling our components
15 Creating the menu component
16 Looping through menu items
17 Pushing orders to an array
18 Adding the shopping basket
Firebase database and authentication setup
19 Section intro
20 Setting up our Firebase database
21 Adding the login component
22 Enable Firebase authentication
23 Signing in and out
24 Final components
25 Section outro
Vue Router
26 Section intro
27 Adding names to routes
28 Router navigation methods
29 Global navigation guards
30 Component guards
31 Guarding individual routes
32 Defining scroll behaviour
33 Re-factoring our routes
34 Named router views
35 Section outro
36 Router installation & setup
37 Creating our routes
38 Router link in more detail
39 Binding and dynamic routes
40 History and hash modes
41 Catch all routes and redirecting
42 Nested routes
43 Nested router view
Stage Management with Vuex
44 Section intro
45 Mapping getters
46 Splitting our store into separate files
47 Using modules
48 Section outro
49 What is Vuex
50 Installation and file structure
51 Initial state and accessing the store
52 Improving store access with getters
53 Changing state with mutations
54 What are actions
55 Setting the user with actions
56 Dispatching actions
Binding to Firebase & finishing our project
57 Section intro
58 Global currency filter
59 Finishing touches
60 Section outro
61 Binding Vuex to Firebase
62 Sync orders with Firebase
63 Displaying orders in the admin section
64 Adding keys to lists
65 Removing items from the database
66 Hiding the admin from unauthorised users
67 Firebase readwrite rules
68 Calculating the basket total
Lazy loading and code splitting
69 Important Update Babel syntax dynamic import
70 What is code splitting and lazy loading
71 Async components
72 Lazy loading with the vue router
73 Grouping components into the same chunk
74 Lazy loading with conditional rendering
Thank you
75 Thank you
Resolve the captcha to access the links!