Vue JS 3: Composition API (with Pinia, Firebase 9 & Vite)

9h 10m 13s
English
Paid

Course description

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.

Read more about the course

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.

After this course, you’ll be able to create your own Vue 3 apps based entirely on the Composition API - from scratch.

This course requires a basic understanding of Vue 2 & The Options API, HTML, CSS & JavaScript.

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 138 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online Vue JS 3: Composition API (with Pinia, Firebase 9 & Vite)

0:00
/
#1: Introduction

All Course Lessons (138)

#Lesson TitleDurationAccess
1
Introduction Demo
08:03
2
What is the Composition API?
05:37
3
Editor & Software Setup
07:45
4
Vue Devtools
02:08
5
Vue 3 Docs & Install Node.js
01:06
6
Create a Vue Project
02:39
7
Project Setup
03:44
8
Options API - Design
01:35
9
Options API - Data & Methods
02:00
10
Convert it to Composition API
01:28
11
Composition API - Data (refs) & Methods
03:21
12
Script Setup - An Easier Way!
02:52
13
Refs
01:28
14
Two-Way Data Binding
01:32
15
Reactive Objects
03:00
16
Non-Reactive Data
01:21
17
Methods
03:41
18
Computed Properties
04:15
19
A Note on Filters
01:33
20
Watch
03:42
21
Mounted Hooks
04:19
22
Activated Hooks
02:01
23
Updated Hooks
01:32
24
Multiple Hooks!
02:13
25
Local Custom Directives
03:49
26
Global Custom Directives
02:51
27
$route - Part 1
03:50
28
$route - Part 2
03:22
29
useRoute
02:41
30
useRouter
03:30
31
Lists (v-for)
02:55
32
Template Refs
03:05
33
nextTick
01:52
34
Teleport - Part 1
04:24
35
Teleport - Part 2
03:22
36
Child Components
02:52
37
Fix Lazy-Loading Views
01:36
38
Slots
03:35
39
Props
03:52
40
Emits
03:53
41
modelValue
02:25
42
update:modelValue
02:39
43
Dynamic Components - Part 1
02:47
44
Dynamic Components - Part 2
02:20
45
Provide / Inject - Part 1
04:11
46
Provide / Inject - Part 2
03:14
47
What is a Composable?
04:55
48
Create a Composable
02:40
49
Use Our Composable
03:27
50
Reuse our Composable
04:16
51
Add Composable from VueUse
03:28
52
What is State Management?
05:36
53
Composable State vs Vuex vs Pinia
05:03
54
State - Part 1
02:42
55
State - Part 2
05:42
56
Actions
03:41
57
Getters
02:43
58
Use our Store Anywhere
02:23
59
Introduction & Noteballs App
02:07
60
Create Project
02:15
61
Router - Install & Setup
03:03
62
Router - Add Some Routes
04:01
63
Add RouterView & Navigation
01:51
64
Router - Tidying Up
02:20
65
Install Bulma
03:10
66
Nav Bar - Design
02:47
67
Nav Bar - Navigation & Logo
02:55
68
Nav Bar - Responsive Design & Menu
05:06
69
Pages (Design)
02:05
70
Notes (Design)
01:52
71
Add Note Form (Design)
02:31
72
Notes Array (Ref)
02:38
73
Add Note Method
09:01
74
Child Component - Note
02:33
75
Props (Note)
01:35
76
Computed (Note Length)
05:46
77
Delete Note (Emit)
06:25
78
Pinia - Setup & State
04:21
79
Use Our Store
03:41
80
Action - Add Note
03:48
81
Action (with Parameters) - Add Note
02:39
82
Action - Delete Note
05:16
83
Edit Note Page & Route
04:39
84
Reusable Component - AddEditNote
03:58
85
Hook up with modelValue
05:33
86
Fix the Focus
05:05
87
Custom Color, Placeholder & Label Props
10:33
88
Getter - Get Note Content (useRoute)
05:36
89
Getter (with Parameters) - Get Note Content
03:10
90
Action - Update Note
06:25
91
useRouter - Redirect to Notes Page
01:21
92
More Getters & Stats Page
07:34
93
Directive - Autofocus
02:08
94
Global Directive - Autofocus
02:58
95
Watch the Number of Characters (Watch)
02:11
96
Composable - useWatchCharacters
04:25
97
Composable - Multiple Parameters
02:49
98
Click Outside Composable (VueUse, Template Refs)
06:11
99
Delete Modal Design (Reactive Objects)
07:20
100
Hide the Delete Modal (modelValue & update:modelValue)
05:22
101
Delete Modal - Click Outside to Close
03:35
102
Delete Modal - Keyboard Control (Lifecycle Hooks)
06:19
103
Delete Modal - Delete The Note
04:58
104
Introduction to Firebase
03:30
105
Create a Firebase Project
01:47
106
Create App & Install Firebase
02:04
107
Setup Firestore Database
02:36
108
Connect to Database
02:24
109
Display Notes from Firestore
07:18
110
Get Notes in Real Time
07:50
111
Add Note
06:22
112
Delete Note
02:37
113
Update Note
05:06
114
Order Notes by Date (ID)
05:33
115
Improve Document Structure & Auto ID’s
05:27
116
Display Date on Note
09:38
117
Add a Progress Bar
04:55
118
Show Placeholder when No Notes
02:09
119
Login & Register Page - Tabs
07:30
120
Login & Register Page - Form
08:32
121
Firestore Authentication & Auth Store
03:41
122
Register User
07:06
123
Logout User
02:25
124
Login User
03:26
125
Listen for Auth Changes & Store User Data
07:51
126
Improve Logout Button
04:04
127
Redirect User on Auth Change
05:24
128
Restructure Database for Multiple Users
05:43
129
Setup Refs for Multiple Users
07:19
130
Clear Notes array in State when user logs out
04:13
131
Unsubscribe from the Get Notes Listener
08:54
132
Navigation Guards - Part 1
03:49
133
Navigation Guards - Part 2
04:47
134
Firestore Security Rules - Part 1
03:31
135
Firebase Security Rules - Part 2
05:20
136
Hosting - Part 1
06:19
137
Hosting - Part 2
04:08
138
Bonus Lecture
02:23

Unlock unlimited learning

Get instant access to all 137 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Generating Fake Data with Faker.js

Generating Fake Data with Faker.js

Sources: vueschool.io
Every user application depends on data, whether it's user profiles, product listings, or blog posts. However, creating realistic datasets...
51 minutes 56 seconds
The Imposter's Frontend Accelerator

The Imposter's Frontend Accelerator

Sources: bigmachine.io
This is a book. This is a video course... It's both! You are in for a clear and conceptual immersion into modern frontend development using Vue 3.0 and Nuxt 3.
15 hours 48 minutes 54 seconds
Advanced Shopify Theme Development: Liquid + Vue.js (v3.0)

Advanced Shopify Theme Development: Liquid + Vue.js (v3.0)

Sources: udemy
Learn to build Shopify themes using Liquid, JavaScript, and Vue.js v3.0 from scratch. No experience required! Who is the course for? Anyone who is looking to b
6 hours 37 minutes 49 seconds
AI Chat Bot with Vue.js and GPT-4

AI Chat Bot with Vue.js and GPT-4

Sources: vueschool.io
AI is a powerful tool of the future. With Open AI's Chat Completions API (GPT-3.5 Turbo and GPT-4), adopting it in your applications is as easy as a REST reques
1 hour 46 minutes 30 seconds