Vue JS 3: The Composition API (Inc Script Setup, TypeScript)

Course Curriculum

Chapter 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

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

Lecture 1: Creating a Custom Reactive Store

Lecture 2: Errata: Installing Pinia

Lecture 3: Moving to Pinia for State Management

Lecture 4: State Data Structures

Lecture 5: Extracting Complexity

Lecture 6: A Bit of Node.js

Lecture 7: Fetching Data with Fetch

Lecture 8: Loading States with Suspense

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

Lecture 1: Introduction to Module – Routing and Posts

Lecture 2: Routing with Vue Router

Lecture 3: New Post Route

Lecture 4: Creating the Post Writer Component

Lecture 5: Two way binding with v-model

Lecture 6: DOM Access with Template Refs

Lecture 7: Two Way Binding with content editable

Lecture 8: Reactive Markdown with watchEffect

Lecture 9: Syntax Highlighting!

Lecture 10: Optimization with debounce

Lecture 11: Posting a New Post

Lecture 12: Node.js – Post Endpoint

Lecture 13: Post Request and Persisting Data

Chapter 4: User Sign Up, Validation and Reuseble Components

Lecture 1: Introduction to Module – Teleport and Forms

Lecture 2: Teleport for Modals

Lecture 3: Creating the useModal Composable

Lecture 4: v-model with Custom Components

Lecture 5: Framework Agnostic Validation – Part 1

Lecture 6: Framework Agnostic Validation – Part 2

Lecture 7: Linking Validation and Form Inputs

Lecture 8: Submitting the Form and Event Modifiers

Lecture 9: Defining the Users Store

Lecture 10: Node.js – User Creation Endpoint

Chapter 5: Ins and Outs of Authentication

Lecture 1: Introduction to Module – Authentication

Lecture 2: Tooling – Vite Proxy Configuration

Lecture 3: Signing a JWT

Lecture 4: Authenticating Users

Lecture 5: Conditionally Rendering for Authenticated Users

Lecture 6: Implementing Logout

Lecture 7: The Power of Dynamic Components

Lecture 8: Making UserForm Generic for Sign Up and Sign In

Lecture 9: Handling Failed Login

Lecture 10: Node.js – Login Endpoint

Lecture 11: Homework and Exercises!

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

Lecture 1: Introduction to Module – Authorization and Finishing Touches

Lecture 2: Vue Router and Navigation Guards

Lecture 3: Showing Posts

Lecture 4: Editing Posts

Lecture 5: Associating Posts with Users

Lecture 6: Conditionally Editing Posts

Lecture 7: An Essential Refactor Guided by TypeScript

Lecture 8: Node.js – PUT Endpoint for Updates

Lecture 9: Solving the Race Condition

Lecture 10: Deploying to Production – Digital Ocean and Nginx

Lecture 11: Parting Recommendations and Next Steps!

Lecture 12: Testing (Cypress, Test Utils, Vite)

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

Lecture 1: Setting Up Vitest

Lecture 2: Other Tools

Lecture 3: Mounting Component with Vue Test Utils

Lecture 4: Interacting with Components using Trigger

Lecture 5: Installing Plugins in Tests

Lecture 6: Testing Navbar and Auth Status

Lecture 7: Stubbing Globals with Vitest

Lecture 8: Testing Teleport

Lecture 9: Testing Forms and Emitted Events

Lecture 10: Async Tests and Inline Snapshots

Lecture 11: Some TSX and Testing Philosophy