CF

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

9h 10m 13s
English
Paid

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. Over the last 12 months, I've been creating Fudget 2, which is built on Vue 3 & The Composition API.

Course Overview

In this course, you’ll start by understanding the key differences between the Options API & Composition API. We'll do this by creating a simple Options API app and converting it to the Composition API version.

Mastering the Basics

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 methods for handling props, emits & modelValue

  • Dynamic Components

  • Composables - learn to create them from scratch and import from the VueUse library

  • Additionally, you’ll learn State Management using Pinia, the exceptional successor to Vuex

Real-World Application

After mastering the basics, you'll create a real-world application named Noteballs from scratch. This app will feature full CRUD capabilities, utilize Pinia for State Management, and demonstrate real-world applications of everything you learned earlier.

Course Outcome

After completing this course, you’ll have the skills necessary to create your own Vue 3 apps based exclusively on the Composition API, from scratch.

Prerequisites

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

About the Author: Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 138 lessons

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
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

Related courses

Frequently asked questions

What are the prerequisites for this course?
This course is designed for students who are already familiar with Vue 2 and the Options API. It assumes prior knowledge in these areas as it focuses on transitioning to Vue 3 and learning the Composition API. Understanding of basic JavaScript, HTML, and CSS is also recommended to follow along with the course content effectively.
What project will I build in this course?
Students will build a real-world application named Noteballs from scratch. This application will feature full CRUD capabilities and utilize Pinia for state management. It serves as a practical demonstration of all the concepts covered in the course, including the use of the Composition API, dynamic components, and composables.
Who is the target audience for this course?
The course targets developers who have experience with Vue 2 and the Options API and are looking to transition to Vue 3 with the Composition API. It is also suitable for those interested in learning about state management with Pinia and real-world application development using modern Vue.js practices.
How does this course differ from other Vue.js courses?
Unlike courses focused solely on the Options API, this course emphasizes the Composition API in Vue 3. It provides a detailed comparison and transition guide from the Options API to the Composition API, making it ideal for developers looking to upgrade their skills. Additionally, it covers state management with Pinia and includes practical application development.
What specific tools or platforms are covered in the course?
The course covers several tools and platforms essential for Vue.js development. These include Node.js for project setup, Vue Devtools for debugging, and Vite for building and optimizing the application. State management is taught using Pinia, and the course introduces composables, including those from the VueUse library, for enhanced reusability.
What topics are not covered in this course?
The course does not cover the basics of Vue 2 or the Options API in detail, as it assumes prior knowledge in these areas. It also does not delve into advanced server-side rendering techniques or the use of Vue.js with other backend frameworks. The focus is primarily on transitioning to and mastering the Composition API in Vue 3.
How much time should I allocate to complete this course?
The course consists of 138 lessons, covering a wide range of topics from the basics of the Composition API to building a full application. While the exact runtime is not specified, students should expect to spend several hours engaging with video lectures, practical exercises, and the final project. It's advisable to pace the learning to ensure a solid understanding of each concept.