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

Focused View

Danny Connell

9:00:45

338 View

01 - Introduction

001 Introduction.mp4

08:02

002 What is the Composition API.mp4

05:36

003 Editor & Software Setup.mp4

07:44

004 Vue Devtools.mp4

02:07

02 - Getting Started

001 Vue 3 Docs & Install Node.js.mp4

01:05

002 Create a Vue Project.mp4

02:38

003 Project Setup.mp4

03:43

004 Finished Source Code.html

03 - Options API vs Composition API - Switching Over

001 Options API - Design.mp4

01:34

002 Options API - Data & Methods.mp4

01:59

003 Convert it to Composition API.mp4

01:27

004 Composition API - Data (refs) & Methods.mp4

03:20

005 Script Setup - An Easier Way!.mp4

02:51

006 Finished Source Code.html

04 - Refs, Reactive Objects & Non-Reactive Data

001 Refs.mp4

01:27

002 Two-Way Data Binding.mp4

01:31

003 Reactive Objects.mp4

02:59

004 Non-Reactive Data.mp4

01:20

005 Finished Source Code.html

05 - Methods, Computed & Watch

001 Methods.mp4

03:40

002 Computed Properties.mp4

04:14

003 A Note on Filters.mp4

01:32

004 Watch.mp4

03:41

005 Finished Source Code.html

external-links.zip

06 - Lifecycle Hooks

001 Mounted Hooks.mp4

04:18

002 Activated Hooks.mp4

02:00

003 Updated Hooks.mp4

01:31

004 Multiple Hooks!.mp4

02:12

005 Finished Source Code.html

07 - Directives

001 Local Custom Directives.mp4

03:48

002 Global Custom Directives.mp4

02:50

003 Finished Source Code.html

08 - Vue Router

001 $route - Part 1.encrypted.m4a

001 $route - Part 1.encrypted.mp4

002 $route - Part 2.encrypted.m4a

002 $route - Part 2.encrypted.mp4

003 useRoute.mp4

02:40

004 useRouter.mp4

03:29

005 Finished Source Code.html

09 - Lists, Teleport, Template Refs & nextTick

001 Lists (v-for).mp4

02:54

002 Template Refs.mp4

03:04

003 nextTick.mp4

01:51

004 Teleport - Part 1.mp4

04:23

005 Teleport - Part 2.mp4

03:21

006 Finished Source Code.html

10 - Child Components, Props & Emits

001 Child Components.mp4

02:51

002 Fix Lazy-Loading Views.mp4

01:35

003 Slots.mp4

03:34

004 Props.mp4

03:51

005 Emits.mp4

03:52

006 modelValue.mp4

02:24

007 updatemodelValue.mp4

02:38

008 Dynamic Components - Part 1.mp4

02:46

009 Dynamic Components - Part 2.mp4

02:19

010 Provide Inject - Part 1.mp4

04:10

011 Provide Inject - Part 2.mp4

03:13

012 Finished Source Code.html

11 - Composables

001 What is a Composable.mp4

04:54

002 Create a Composable.mp4

02:39

003 Use Our Composable.mp4

03:26

004 Reuse our Composable.mp4

04:15

005 Add Composable from VueUse.mp4

03:27

006 Finished Source Code.html

external-links.zip

12 - State Management with Pinia

001 What is State Management.mp4

05:35

002 Composable State vs Vuex vs Pinia.mp4

05:02

003 State - Part 1.mp4

02:41

004 State - Part 2.mp4

05:41

005 Actions.mp4

03:40

006 Getters.mp4

02:42

007 Use our Store Anywhere.mp4

02:22

008 Finished Source Code.html

external-links.zip

13 - Noteballs Setup & Router

001 Introduction & Noteballs App.mp4

02:06

002 Create Project.mp4

02:14

003 Router - Install & Setup.mp4

03:02

004 Router - Add Some Routes.mp4

04:00

005 Add RouterView & Navigation.mp4

01:50

006 Router - Tidying Up.mp4

02:19

007 Finished Source Code.html

14 - Noteballs Bulma & Design

001 Install Bulma.mp4

03:09

002 Nav Bar - Design.mp4

02:46

003 Nav Bar - Navigation & Logo.mp4

02:54

004 Nav Bar - Responsive Design & Menu.mp4

05:05

005 Pages (Design).mp4

02:04

006 Notes (Design).mp4

01:51

007 Add Note Form (Design).mp4

02:30

008 Finished Source Code.html

15 - Noteballs Data, Methods, Child Components, Computed & Emit

001 Notes Array (Ref).mp4

02:37

002 Add Note Method.mp4

09:00

003 Child Component - Note.mp4

02:32

004 Props (Note).mp4

01:34

005 Computed (Note Length).mp4

05:45

006 Delete Note (Emit).mp4

06:24

007 Finished Source Code.html

16 - Noteballs Pinia, Reusable Components, Router & More

001 Pinia - Setup & State.mp4

04:20

002 Use Our Store.mp4

03:40

003 Action - Add Note.mp4

03:47

004 Action (with Parameters) - Add Note.mp4

02:38

005 Action - Delete Note.mp4

05:15

006 Edit Note Page & Route.mp4

04:38

007 Reusable Component - AddEditNote.mp4

03:57

008 Hook up with modelValue.mp4

05:32

009 Fix the Focus.mp4

05:04

010 Custom Color, Placeholder & Label Props.mp4

10:32

011 Getter - Get Note Content (useRoute).mp4

05:35

012 Getter (with Parameters) - Get Note Content.mp4

03:09

013 Action - Update Note.mp4

06:24

014 useRouter - Redirect to Notes Page.mp4

01:20

015 More Getters & Stats Page.mp4

07:33

016 Finished Source Code.html

17 - Noteballs Directives, Watchers & Composables

001 Directive - Autofocus.mp4

02:07

002 Global Directive - Autofocus.mp4

02:57

003 Watch the Number of Characters (Watch).mp4

02:10

004 Composable - useWatchCharacters.mp4

04:24

005 Composable - Multiple Parameters.mp4

02:48

006 Click Outside Composable (VueUse, Template Refs).mp4

06:10

007 Finished Source Code.html

18 - Noteballs Delete Modal

001 Delete Modal Design (Reactive Objects).mp4

07:19

002 Hide the Delete Modal (modelValue & updatemodelValue).mp4

05:21

003 Delete Modal - Click Outside to Close.mp4

03:34

004 Delete Modal - Keyboard Control (Lifecycle Hooks).mp4

06:18

005 Delete Modal - Delete The Note.mp4

04:57

006 Finished Source Code.html

19 - Firebase 9 Introduction & Setup

001 Introduction to Firebase.mp4

03:29

002 Create a Firebase Project.mp4

01:46

003 Create App & Install Firebase.mp4

02:03

004 Setup Firestore Database.mp4

02:35

005 Connect to Database.mp4

02:23

20 - Firebase 9 Read, Add, Delete, Update & Order

001 Display Notes from Firestore.mp4

07:17

002 Get Notes in Real Time.mp4

07:49

003 Add Note.mp4

06:21

004 Delete Note.mp4

02:36

005 Update Note.mp4

05:05

006 Order Notes by Date (ID).mp4

05:32

007 Improve Document Structure & Auto IDs.mp4

05:26

008 Display Date on Note.mp4

09:37

009 Add a Progress Bar.mp4

04:54

010 Show Placeholder when No Notes.mp4

02:08

21 - Firebase 9 Authentication

001 Login & Register Page - Tabs.mp4

07:29

002 Login & Register Page - Form.mp4

08:31

003 Firestore Authentication & Auth Store.mp4

03:40

004 Register User.mp4

07:05

005 Logout User.mp4

02:24

006 Login User.mp4

03:25

007 Listen for Auth Changes & Store User Data.mp4

07:50

008 Improve Logout Button.mp4

04:03

009 Redirect User on Auth Change.mp4

05:23

22 - Firebase 9 Multiple Users

001 Restructure Database for Multiple Users.mp4

05:42

002 Setup Refs for Multiple Users.mp4

07:18

003 Clear Notes array in State when user logs out.mp4

04:12

004 Unsubscribe from the Get Notes Listener.mp4

08:53

23 - Firebase 9 Security & Hosting

001 Navigation Guards - Part 1.mp4

03:48

002 Navigation Guards - Part 2.mp4

04:46

003 Firestore Security Rules - Part 1.mp4

03:30

004 Firebase Security Rules - Part 2.mp4

05:19

005 Hosting - Part 1.mp4

06:18

006 Hosting - Part 2.mp4

04:07

24 - Bonus Lectures

001 Bonus Lecture.mp4

02:22

Description

Already know the Options API? Switch over to the Composition API as quickly as possible! (Oh, and Pinia & Firebase 9!)

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

Who is this for?

Developers familiar with Vue 2 & Options API who want to switch over to Vue 3 & Composition API

More details

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

FIREBASE 9 UPDATE (JUN 2022):
The course has been updated with 3 hours of new content on Firebase 9, where we will:
Hook Noteballs up to a Firebase Cloud Firestore database
Add Authentication, so that multiple users can register, login and log out of our app
Add Realtime Data Sync, so that if a user adds a note on one device, they'll see the note instantly appear on another device
Add Firebase Security Rules to protect our users' data
Host our finished app on Firebase Hosting so that we can share it with anyone

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.

Please check out the preview videos & I look forward to seeing you in the course.
Who this course is for:
Developers familiar with Vue 2 & Options API who want to switch over to Vue 3 & Composition API

User Reviews

Rating

average 0

Total votes0

Focused display

I spent 7 years working for various companies in the UK as a Web Developer (both front- and back-end) becoming highly skilled in HTML, CSS, JavaScript, jQuery, PHP and many more.After becoming more interested in apps, I worked for 2 years as a Hybrid App Developer, creating cross-platform apps for the charity sector using technologies including Angular, Ionic, Vue.js and more.I created my own successful app called Fudget (for iOS, Android, Mac & Windows) which is the highest user-rated personal finance app on iOS with over 1.5 million downloads. This eventually enabled me to leave my job and become a full-time Indie App Developer, working on my own apps.I have a young but successful YouTube channel where I also share coding tutorials.I'm super excited to share my knowledge on Udemy!

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.