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

Vue JS 3: The Composition API (Inc Script Setup, TypeScript), available at $27.99, has an average rating of 4.62, with 79 lectures, based on 659 reviews, and has 3237 subscribers.

You will learn about Vue js 3 TypeScript Unit Testing Composition Fundamentals New Reactivity System Design Patterns This course is ideal for individuals who are Vue 2 developers looking to learn Vue 3 or Intermediate front-end developers It is particularly useful for Vue 2 developers looking to learn Vue 3 or Intermediate front-end developers.

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

Summary

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

Price: $27.99

Average Rating: 4.62

Number of Lectures: 79

Number of Published Lectures: 79

Number of Curriculum Items: 79

Number of Published Curriculum Objects: 79

Original Price: $27.99

Quality Status: approved

Status: Live

What You Will Learn

Vue js 3

TypeScript

Unit Testing

Composition Fundamentals

New Reactivity System

Design Patterns

Who Should Attend

Vue 2 developers looking to learn Vue 3

Intermediate front-end developers

Target Audiences

Vue 2 developers looking to learn Vue 3

Intermediate front-end developers

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

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

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

Instructors

Lachlan Miller
Software Engineer

Rating Distribution

1 stars: 3 votes

2 stars: 13 votes

3 stars: 57 votes

4 stars: 205 votes

5 stars: 381 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!