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.
Vue JS 3: The Composition API
5h 24m 26s
English
Paid
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 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
0:00
/ #1: Installation and Configuration
All Course Lessons (55)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 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 subscriptionRelated courses
-
Updated 2y agoVue JS 3: Composition API (with Pinia, Firebase 9 & Vite)
By: UdemyIf you’re already familiar with Vue 2 & The Options API, then this course will teach you everything you need to know to switch over to (and get started with) Vu9h 10m -
Updated 1y agoQuasar Fundamentals: Build Cross-Platform Vue.js Apps
By: Vue SchoolQuasar Framework will amaze you with its capabilities! By the end of this course, you will be able to develop applications on Vue.js for Android, iOS, Windows.7h 6m -
Updated 1y agoReal-Time Data with Laravel Reverb and Vue.js
By: Vue SchoolWant to add real-time data functionality to your applications in Laravel and Vue.js?44m
Frequently asked questions
What are the prerequisites for this course?
This is an intermediate-level course, so it assumes that you have a basic understanding of JavaScript and Vue.js fundamentals. Familiarity with ES6 syntax is also expected, as the course dives into advanced features like the Composition API and TypeScript.
What will I build during the course?
Throughout the course, you will build real-world single-page applications using Vue.js 3 and the Composition API. You will learn to create features such as fetching posts asynchronously, handling routing with Vue Router, managing state with reactive stores, and implementing authentication and authorization.
Who is the target audience for this course?
The course is designed for developers who are already comfortable with Vue.js and want to deepen their knowledge by learning about the Composition API, Vue Router, and testing with Vue Test Utils. It's aimed at those looking to build dynamic, complex applications.
How does this course compare in depth to other Vue.js courses?
This course focuses specifically on Vue.js 3's Composition API, providing an in-depth approach to modern application development using this new feature. Unlike introductory courses, it covers advanced topics such as dynamic components, state management, and testing strategies.
What specific tools and platforms are covered?
The course covers tools such as Vue Test Utils for testing, Vue Router for routing, and Volar for editing. It also introduces TypeScript for type safety and Axios for data fetching. These tools are integral to building and testing robust Vue.js applications.
What topics are not covered in this course?
The course does not cover introductory Vue.js concepts or general JavaScript fundamentals. It assumes prior knowledge of these areas and focuses on more complex topics like the Composition API, testing, and routing. It also does not delve into other frameworks or libraries outside of Vue.js and its ecosystem.
What is the expected time commitment for this course?
With a total of 55 lessons, students should anticipate dedicating several weeks to complete the course, depending on their pace and prior experience. The course includes comprehensive topics that require practice and understanding, especially the testing and routing segments.