CourseFlix

Vue JS 3: The Composition API

5h 24m 26s
English
Paid

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.

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.

About the Author: Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 55 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 55 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Installation and Configuration
All Course Lessons (55)
#Lesson TitleDurationAccess
1
Installation and Configuration Demo
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
Unlock unlimited learning

Get instant access to all 54 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Course content

55 lessons · 5h 24m 26s
Show all 55 lessons
  1. 1 Installation and Configuration 03:56
  2. 2 Vue Single File Components 07:07
  3. 3 Directives and the Setup Function 03:58
  4. 4 Bindings with v-bind 03:06
  5. 5 Reactivity with ref 05:20
  6. 6 Derived Data with computed 06:31
  7. 7 Testing with Vue Test Utils (Part 1) 05:16
  8. 8 Testing with Vue Test Utils (Part 2) 06:53
  9. 9 Refactoring with Confidence 05:21
  10. 10 Loading with Suspense 04:51
  11. 11 Defining a Reactive Store 03:50
  12. 12 State Data Structures 05:03
  13. 13 Fetching Posts Asynchronously 04:05
  14. 14 The useStore Composable 07:51
  15. 15 Mocking Axios 04:34
  16. 16 Testing with Vue Test Utils (Part 3) 08:44
  17. 17 Routing with Vue Router 05:59
  18. 18 New Post Route 04:13
  19. 19 Post Editor and Volar 05:48
  20. 20 v-model Directive and Template Refs 07:10
  21. 21 Two way binding with contenteditable 06:14
  22. 22 Rendering HTML with Marked 09:11
  23. 23 Syntax Highlighting 05:41
  24. 24 Quick Styling Fix 02:43
  25. 25 Optimizations: watch, watchEffect and debounce 07:10
  26. 26 Custom Events and Saving a Post 07:16
  27. 27 Testing with Vue Test Utils (Part 4) 12:46
  28. 28 Persisting Posts and Routing with useRouter 08:11
  29. 29 Teleport for Modals 03:36
  30. 30 Creating the useModal Composable 05:08
  31. 31 v-model with Custom Components 07:30
  32. 32 Framework Agnostic Validation 10:10
  33. 33 Signup Form Component 07:24
  34. 34 Fixing a bug in FormInput 02:52
  35. 35 Submitting the Form and Event Modifiers 07:38
  36. 36 Plugins with Provide and Inject 05:51
  37. 37 Testing Plugins - Testing with Vue Test Utils (Part 5) 04:36
  38. 38 Testing New Post - Testing with Vue Test Utils (Part 6) 07:48
  39. 39 Introduction to Authentication and Authorization 01:41
  40. 40 Persisting Users 06:19
  41. 41 Dynamic Components 08:06
  42. 42 Optimizations with markRaw 04:32
  43. 43 Advanced Routing with Router Guards 08:43
  44. 44 Access Params with useRoute 05:44
  45. 45 Loading Posts and a Mysterious Bug 05:44
  46. 46 Editing Posts 03:15
  47. 47 Fixing Two Subtle Bugs 04:56
  48. 48 Authorizing the Current User 04:25
  49. 49 Conditional Edit Button 01:55
  50. 50 Testing Vue Router - Testing with Vue Test Utils (Part 8) 09:20
  51. 51 Test Maintenance - Testing with Vue Test Utils (Part 9) 07:46
  52. 52 Rendering Post HTML 04:54
  53. 53 Editing Posts 03:54
  54. 54 Modular Tests - Testing with Vue Test Utils (Part 10) 07:30
  55. 55 Deploying to Production 04:21

Related courses

  • Master Laravel with GraphQL, Vue.js and Tailwind thumbnail

    Master Laravel with GraphQL, Vue.js and Tailwind

    By: Udemy
    Learn modern and most up to date development tools in your web developer toolchain. I'll let you see how modern PHP is these days. First off, the power of the L
    17 hours 48 minutes 5 seconds
  • Vue 3 Composition API 3 thumbnail

    Vue 3 Composition API 3

    By: Vue School
    Explore Vue 3 Composition API with hands-on learning. From basic concepts to advanced usage, gain a complete understanding of Vue.js component logic and state
    1 hour 59 minutes 20 seconds
  • Course: Large Scale Apps with Vue, Vite and TypeScript thumbnail

    Course: Large Scale Apps with Vue, Vite and TypeScript

    By: Damiano Fusco
    Embark on a journey to build scalable and maintainable frontends using Vue 3, Vite, and TypeScript.
    5 / 5

Frequently asked questions

What is Vue JS 3: The Composition API about?
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…
Who teaches Vue JS 3: The Composition API?
Vue JS 3: The Composition API is taught by Udemy. You can find more courses by this instructor on the corresponding source page.
How long is Vue JS 3: The Composition API?
Vue JS 3: The Composition API contains 55 lessons with a total runtime of 5 hours 24 minutes. All lessons are available to watch online at your own pace.
Is Vue JS 3: The Composition API free to watch?
Vue JS 3: The Composition API is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch Vue JS 3: The Composition API online?
Vue JS 3: The Composition API is available to watch online on CourseFlix at https://courseflix.net/course/vue-js-3-the-composition-api. The page hosts every lesson with the integrated video player; no download is required.