Vue JS 3: The Composition API
Vue.js 3 and the Composition API is here! Learn to build real world apps with the Composition API, TypeScript, Vue Router and testing with Vue Test Utils. This is an intermediate course. 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.
Read more about the course
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 features like Teleport and Suspense
- building resuable modules using the new reactivity API
- create a flux store from scratch
- Routing, include navigation guards with Vue Router 4
- Writing and testing complex interactions with Vue Test Utils
- TypeScript to create typesafe applications
This is a 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. We won't explain the same basic concept 10 times over, rather, move quickly and see the same concepts applied in different contexts to reinforce them.
Watch Online Vue JS 3: The Composition API
| # | Title | Duration |
|---|---|---|
| 1 | Installation and Configuration | 03:56 |
| 2 | Vue Single File Components | 07:07 |
| 3 | Directives and the Setup Function | 03:58 |
| 4 | Bindings with v-bind | 03:06 |
| 5 | Reactivity with ref | 05:20 |
| 6 | Derived Data with computed | 06:31 |
| 7 | Testing with Vue Test Utils (Part 1) | 05:16 |
| 8 | Testing with Vue Test Utils (Part 2) | 06:53 |
| 9 | Refactoring with Confidence | 05:21 |
| 10 | Loading with Suspense | 04:51 |
| 11 | Defining a Reactive Store | 03:50 |
| 12 | State Data Structures | 05:03 |
| 13 | Fetching Posts Asynchronously | 04:05 |
| 14 | The useStore Composable | 07:51 |
| 15 | Mocking Axios | 04:34 |
| 16 | Testing with Vue Test Utils (Part 3) | 08:44 |
| 17 | Routing with Vue Router | 05:59 |
| 18 | New Post Route | 04:13 |
| 19 | Post Editor and Volar | 05:48 |
| 20 | v-model Directive and Template Refs | 07:10 |
| 21 | Two way binding with contenteditable | 06:14 |
| 22 | Rendering HTML with Marked | 09:11 |
| 23 | Syntax Highlighting | 05:41 |
| 24 | Quick Styling Fix | 02:43 |
| 25 | Optimizations: watch, watchEffect and debounce | 07:10 |
| 26 | Custom Events and Saving a Post | 07:16 |
| 27 | Testing with Vue Test Utils (Part 4) | 12:46 |
| 28 | Persisting Posts and Routing with useRouter | 08:11 |
| 29 | Teleport for Modals | 03:36 |
| 30 | Creating the useModal Composable | 05:08 |
| 31 | v-model with Custom Components | 07:30 |
| 32 | Framework Agnostic Validation | 10:10 |
| 33 | Signup Form Component | 07:24 |
| 34 | Fixing a bug in FormInput | 02:52 |
| 35 | Submitting the Form and Event Modifiers | 07:38 |
| 36 | Plugins with Provide and Inject | 05:51 |
| 37 | Testing Plugins - Testing with Vue Test Utils (Part 5) | 04:36 |
| 38 | Testing New Post - Testing with Vue Test Utils (Part 6) | 07:48 |
| 39 | Introduction to Authentication and Authorization | 01:41 |
| 40 | Persisting Users | 06:19 |
| 41 | Dynamic Components | 08:06 |
| 42 | Optimizations with markRaw | 04:32 |
| 43 | Advanced Routing with Router Guards | 08:43 |
| 44 | Access Params with useRoute | 05:44 |
| 45 | Loading Posts and a Mysterious Bug | 05:44 |
| 46 | Editing Posts | 03:15 |
| 47 | Fixing Two Subtle Bugs | 04:56 |
| 48 | Authorizing the Current User | 04:25 |
| 49 | Conditional Edit Button | 01:55 |
| 50 | Testing Vue Router - Testing with Vue Test Utils (Part 8) | 09:20 |
| 51 | Test Maintenance - Testing with Vue Test Utils (Part 9) | 07:46 |
| 52 | Rendering Post HTML | 04:54 |
| 53 | Editing Posts | 03:54 |
| 54 | Modular Tests - Testing with Vue Test Utils (Part 10) | 07:30 |
| 55 | Deploying to Production | 04:21 |
Similar courses to Vue JS 3: The Composition API
MASTERING NUXT Learn Nuxt.js by Building a Real World Appmasteringnuxt.com
Ethereum and Solidity: Build Dapp with VueJSudemy
Nuxt.js - Vue.js on Steroidsudemy
Vue 3, Nuxt.js and NestJS: A Rapid Guide - Advancedudemy
Advanced Shopify Theme Development: Liquid + Vue.js (v3.0)udemy
Master Laravel with GraphQL, Vue.js and Tailwindudemy
