English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 155 lectures (9h 14m) | 4.80 GB
Already know the Options API? Switch over to the Composition API as quickly as possible! (Oh, and Pinia & Firebase 9!)
If you’re already familiar with Vue 2 & The Options API, then this course will teach you everything you need to know to switch over to (and get started with) Vue 3 & the amazing new Composition API.
My name’s Danny, I’m an Indie App Developer & Creator of Fudget, the highest rated personal finance app for iOS, Android, Mac & Windows.
And I’ve spent the last 12 months creating Fudget 2 – which is built on Vue 3 & The Composition API.
In this course you’ll start by learning the key differences between the Options API & Composition API by creating a simple Options API app & converting it to the Composition API.
You’ll then master all of the basics including:
- Reactive data with Refs & Reactive Objects
- Methods, Computed Properties & Watchers
- Lifecycle Hooks
- Directives
- Vue Router
- Child Components – including the new ways of handling props, emits & modelValue
- Dynamic Components
- Composables – how to create them from scratch & how to import them from the VueUse library
- And you’ll learn State Management using Pinia, the incredible successor to Vuex
After learning the basics, you’re gonna create a real world app called Noteballs from scratch – which has full CRUD capabilities, uses Pinia for State Management and demonstrates real-world use of all the basics you learned earlier.
What you’ll learn
- How to switch over from Vue 2 & Options API to Vue 3 & Composition API
- Core differences between Options API & Composition API
- State Management using Pinia
- Create a real-world app from scratch with Vue 3, Composition API, Pinia & Vite
- Firebase 9, including Cloud Firestore, Authentication & Security Rules
Table of Contents
Introduction
1 Introduction
2 What is the Composition API
3 Editor Software Setup
4 Vue Devtools
Getting Started
5 Vue 3 Docs Install Nodejs
6 Create a Vue Project
7 Project Setup
8 Finished Source Code
Options API vs Composition API Switching Over
9 Options API Design
10 Options API Data Methods
11 Convert it to Composition API
12 Composition API Data refs Methods
13 Script Setup An Easier Way
14 Finished Source Code
Refs Reactive Objects NonReactive Data
15 Refs
16 TwoWay Data Binding
17 Reactive Objects
18 NonReactive Data
19 Finished Source Code
Methods Computed Watch
20 Methods
21 Computed Properties
22 A Note on Filters
23 Watch
24 Finished Source Code
Lifecycle Hooks
25 Mounted Hooks
26 Activated Hooks
27 Updated Hooks
28 Multiple Hooks
29 Finished Source Code
Directives
30 Local Custom Directives
31 Global Custom Directives
32 Finished Source Code
Vue Router
33 route Part 1
34 route Part 2
35 useRoute
36 useRouter
37 Finished Source Code
Lists Teleport Template Refs nextTick
38 Lists vfor
39 Template Refs
40 nextTick
41 Teleport Part 1
42 Teleport Part 2
43 Finished Source Code
Child Components Props Emits
44 Child Components
45 Fix LazyLoading Views
46 Slots
47 Props
48 Emits
49 modelValue
50 updatemodelValue
51 Dynamic Components Part 1
52 Dynamic Components Part 2
53 Provide Inject Part 1
54 Provide Inject Part 2
55 Finished Source Code
Composables
56 What is a Composable
57 Create a Composable
58 Use Our Composable
59 Reuse our Composable
60 Add Composable from VueUse
61 Finished Source Code
State Management with Pinia
62 What is State Management
63 Composable State vs Vuex vs Pinia
64 State Part 1
65 State Part 2
66 Actions
67 Getters
68 Use our Store Anywhere
69 Finished Source Code
Noteballs Setup Router
70 Introduction Noteballs App
71 Create Project
72 Router Install Setup
73 Router Add Some Routes
74 Add RouterView Navigation
75 Router Tidying Up
76 Finished Source Code
Noteballs Bulma Design
77 Install Bulma
78 Nav Bar Design
79 Nav Bar Navigation Logo
80 Nav Bar Responsive Design Menu
81 Pages Design
82 Notes Design
83 Add Note Form Design
84 Finished Source Code
Noteballs Data Methods Child Components Computed Emit
85 Notes Array Ref
86 Add Note Method
87 Child Component Note
88 Props Note
89 Computed Note Length
90 Delete Note Emit
91 Finished Source Code
Noteballs Pinia Reusable Components Router More
92 Pinia Setup State
93 Use Our Store
94 Action Add Note
95 Action with Parameters Add Note
96 Action Delete Note
97 Edit Note Page Route
98 Reusable Component AddEditNote
99 Hook up with modelValue
100 Fix the Focus
101 Custom Color Placeholder Label Props
102 Getter Get Note Content useRoute
103 Getter with Parameters Get Note Content
104 Action Update Note
105 useRouter Redirect to Notes Page
106 More Getters Stats Page
107 Finished Source Code
Noteballs Directives Watchers Composables
108 Directive Autofocus
109 Global Directive Autofocus
110 Watch the Number of Characters Watch
111 Composable useWatchCharacters
112 Composable Multiple Parameters
113 Click Outside Composable VueUse Template Refs
114 Finished Source Code
Noteballs Delete Modal
115 Delete Modal Design Reactive Objects
116 Hide the Delete Modal modelValue updatemodelValue
117 Delete Modal Click Outside to Close
118 Delete Modal Keyboard Control Lifecycle Hooks
119 Delete Modal Delete The Note
120 Finished Source Code
Firebase 9 Introduction Setup
121 Introduction to Firebase
122 Create a Firebase Project
123 Create App Install Firebase
124 Setup Firestore Database
125 Connect to Database
Firebase 9 Read Add Delete Update Order
126 Display Notes from Firestore
127 Get Notes in Real Time
128 Add Note
129 Delete Note
130 Update Note
131 Order Notes by Date ID
132 Improve Document Structure Auto IDs
133 Display Date on Note
134 Add a Progress Bar
135 Show Placeholder when No Notes
Firebase 9 Authentication
136 Login Register Page Tabs
137 Login Register Page Form
138 Firestore Authentication Auth Store
139 Register User
140 Logout User
141 Login User
142 Listen for Auth Changes Store User Data
143 Improve Logout Button
144 Redirect User on Auth Change
Firebase 9 Multiple Users
145 Restructure Database for Multiple Users
146 Setup Refs for Multiple Users
147 Clear Notes array in State when user logs out
148 Unsubscribe from the Get Notes Listener
Firebase 9 Security Hosting
149 Navigation Guards Part 1
150 Navigation Guards Part 2
151 Firestore Security Rules Part 1
152 Firebase Security Rules Part 2
153 Hosting Part 1
154 Hosting Part 2
Bonus Lectures
155 Bonus Lecture
Resolve the captcha to access the links!