Vue JS 3 The Composition API Inc Script Setup TypeScript

Learn Vue.js 3 with TypeScript, the Composition API and Pinia (2022)
Vue JS 3 The Composition API Inc Script Setup TypeScript
File Size :
2.12 GB
Total length :
6h 13m



Lachlan Miller


Last update




Vue JS 3 The Composition API Inc Script Setup TypeScript

What you’ll learn

Vue js 3
Unit Testing
Composition Fundamentals
New Reactivity System
Design Patterns

Vue JS 3 The Composition API Inc Script Setup TypeScript


Modern JavaScript
Some Vue 2 experience will be a plus!


(RE-RECORDED JULY 2022, UPDATED OCT 2020 w/ TESTING) Vue.js 3 and the Composition API is here!Learn to build a complex, real world application with the Composition API, TypeScript, Pinia and Vue Router, taught by Lachlan Miller. maintainer of Vue Test Utils and Vue.js team member. This is an intermediate-advanced course aimed at developers with some basic programming experience with tools such ES6 JavaScript. We move fast and introduce all the required topics to build highly dynamic, complex single page apps with Vue.js 3 and the new Composition API. Unlike other courses, testing and design patterns are at the core of everything we do. We explore the new features Vue.js 3 brings to the table. Some of the things you’ll learn:- How to use and test new Vue 3 components with Cypress and Test Utils – Building reusable modules using the new reactivity API- TypeScript to create type safe applications- Creating a complex, real-time markdown editor – Integrating third party libraries from npm- Implementing authentication and authorisation with JWT (JSON Web Tokens) and cookies- Routing, include navigation guards with Vue Router 4- Writing and testing complex interactions (Vitest, Vue Test Utils)- A real back end with Express and TypeScriptThis is an intermediate to advanced course; some basic programming knowledge is required. I respect your time and have packed as much content into the course as possible. Rather than explaining the same basic concepts 10 times over, move quickly and see the same concepts applied in different contexts to reinforce them.


Section 1: Composition API and Testing Basics

Lecture 1 Introduction to Course and Lecturer!

Lecture 2 Resources

Lecture 3 Installation and Configuration

Lecture 4 Bulma CSS

Lecture 5 Vue Single File Components

Lecture 6 Directives – Loops with v-for

Lecture 7 Bindings with v-bind

Lecture 8 Events and Reactivity

Lecture 9 More on Events

Lecture 10 Reactivity with Ref

Lecture 11 Type Safety with TypeScript

Lecture 12 DateTimes with Luxon

Lecture 13 Derived Data with Computed

Lecture 14 Passing Data with Props and a Refactor

Section 2: Loading with Suspense and a Reactive Store from Scratch

Lecture 15 Creating a Custom Reactive Store

Lecture 16 Errata: Installing Pinia

Lecture 17 Moving to Pinia for State Management

Lecture 18 State Data Structures

Lecture 19 Extracting Complexity

Lecture 20 A Bit of Node.js

Lecture 21 Fetching Data with Fetch

Lecture 22 Loading States with Suspense

Section 3: Vue Router, Creating Posts with Markdown and Syntax Highlighting

Lecture 23 Introduction to Module – Routing and Posts

Lecture 24 Routing with Vue Router

Lecture 25 New Post Route

Lecture 26 Creating the Post Writer Component

Lecture 27 Two way binding with v-model

Lecture 28 DOM Access with Template Refs

Lecture 29 Two Way Binding with content editable

Lecture 30 Reactive Markdown with watchEffect

Lecture 31 Syntax Highlighting!

Lecture 32 Optimization with debounce

Lecture 33 Posting a New Post

Lecture 34 Node.js – Post Endpoint

Lecture 35 Post Request and Persisting Data

Section 4: User Sign Up, Validation and Reuseble Components

Lecture 36 Introduction to Module – Teleport and Forms

Lecture 37 Teleport for Modals

Lecture 38 Creating the useModal Composable

Lecture 39 v-model with Custom Components

Lecture 40 Framework Agnostic Validation – Part 1

Lecture 41 Framework Agnostic Validation – Part 2

Lecture 42 Linking Validation and Form Inputs

Lecture 43 Submitting the Form and Event Modifiers

Lecture 44 Defining the Users Store

Lecture 45 Node.js – User Creation Endpoint

Section 5: Ins and Outs of Authentication

Lecture 46 Introduction to Module – Authentication

Lecture 47 Tooling – Vite Proxy Configuration

Lecture 48 Signing a JWT

Lecture 49 Authenticating Users

Lecture 50 Conditionally Rendering for Authenticated Users

Lecture 51 Implementing Logout

Lecture 52 The Power of Dynamic Components

Lecture 53 Making UserForm Generic for Sign Up and Sign In

Lecture 54 Handling Failed Login

Lecture 55 Node.js – Login Endpoint

Lecture 56 Homework and Exercises!

Section 6: Finishing the App, Deployment and Next Steps!

Lecture 57 Introduction to Module – Authorization and Finishing Touches

Lecture 58 Vue Router and Navigation Guards

Lecture 59 Showing Posts

Lecture 60 Editing Posts

Lecture 61 Associating Posts with Users

Lecture 62 Conditionally Editing Posts

Lecture 63 An Essential Refactor Guided by TypeScript

Lecture 64 Node.js – PUT Endpoint for Updates

Lecture 65 Solving the Race Condition

Lecture 66 Deploying to Production – Digital Ocean and Nginx

Lecture 67 Parting Recommendations and Next Steps!

Lecture 68 Testing (Cypress, Test Utils, Vite)

Section 7: Component Testing (Vitest, Vue Test Utils)

Lecture 69 Setting Up Vitest

Lecture 70 Other Tools

Lecture 71 Mounting Component with Vue Test Utils

Lecture 72 Interacting with Components using Trigger

Lecture 73 Installing Plugins in Tests

Lecture 74 Testing Navbar and Auth Status

Lecture 75 Stubbing Globals with Vitest

Lecture 76 Testing Teleport

Lecture 77 Testing Forms and Emitted Events

Lecture 78 Async Tests and Inline Snapshots

Lecture 79 Some TSX and Testing Philosophy

Vue 2 developers looking to learn Vue 3,Intermediate front-end developers

Course Information:

Udemy | English | 6h 13m | 2.12 GB
Created by: Lachlan Miller

You Can See More Courses in the Developer >> Greetings from

New Courses

Scroll to Top