Complete Vue Developer in 2021 (w/ Vuex, Composition API, Router)
The only Vue.js tutorial + projects course you need to learn Vue (including all new Vue 3 features), build large-scale Vue applications from scratch & get hired as a Vue developer in 2021. Go from Zero To VUE Mastery.
What you'll learn
- ✓Build enterprise level Vue applications and deploy to production
- ✓Learn to build reactive, performant, large scale applications like a senior developer
- ✓Learn to build beautiful applications using TailwindCSS, Sass, CSS Animations and Transitions
- ✓Become a top 10% Vue.js Developer
- ✓Learn to compare tradeoffs when it comes to performance and scalability
- ✓Use Firebase to build full stack applications
- ✓Master Vue design patterns
- ✓Converting apps to Progressive Web Apps
- ✓Using the latest ES6/ES7/ES8/ES9/ES10/ES11 JavaScript to write clean code
- ✓File Uploads, Testing, PWAs, Internationalization, Authentication with Vue 3
- ✓Learn the latest features with Vue 3 including Composition API, Vuex, Vue Router + more
- ✓Master the latest ecosystem of a Vue Developer from scratch
- ✓Use Vuex for state management in your applications
- ✓Set up authentication and user accounts
- ✓Learn to lead Vue projects by making good architecture decisions and helping others on your team
- ✓Routing with Vue Router
- ✓Testing your application with Jest, snapshot testing, and even E2E testing
- ✓Learn why Vue is outgrowing React and Angular in developer popularity
Meet your instructors

Hi! I'm Andrei.
Senior Software Developer turned Instructor, Founder of ZTM
Andrei is the instructor of some of the highest rated programming courses on the web. Some of his students (400,000+ in the past few years) now work for some of the biggest tech companies around the world like Apple, Google, Amazon, Tesla, IBM, Shopify and many more.
He has worked as a Senior Software Developer in Silicon Valley and Toronto for many years and is now taking all that he has learned to teach programming skills and to help you discover the amazing career opportunities that being a developer allows in life.

Hi! I'm Luis.
Frontend Developer & Instructor
Luis is a Software Engineer with 10+ years of experience in web application development. He has spent his career architecting reliable, battle-tested, secure, scalable, and performant solutions.
Most courses will teach you the "how," but rarely the "why." Luis's courses are different. He demystifies concepts that other courses gloss over and takes the time to ensure you fully understand the core programming concepts and fundamentals that will make you a more successful Software Engineer and a more competitive candidate in today's job market.
Why Zero To Mastery is right for you
With so many online resources available, it can be paralyzing not only figuring out where to start but more importantly which courses will actually teach you the skills you need to get hired.
That’s why the Zero To Mastery Academy exists, to provide industry-leading courses and content to teach you the relevant skills you need to advance your career and get you hired at some of the top companies in the world.
Join now to get complete access to this course and all others for only $23/month.
Course Curriculum
We want you to make sure this course is a good fit for you. So start learning for free right now by clicking the PREVIEW links below.
Example Curriculum
- Getting Started (7:28)
- Vue Dev Tools (5:32)
- Working with Data (8:44)
- Multiple Vue Instances (4:06)
- Accessing the Instance Data (6:02)
- Methods (4:40)
- Directives (5:07)
- Two-way data binding (7:13)
- Binding Attributes (2:38)
- Outputting Raw HTML (6:00)
- Listening to Events (7:08)
- Passing on Data with Events (2:33)
- Event Modifiers (2:31)
- Keyboard Events and Modifiers (4:54)
- v-model Modifiers (5:19)
- Computed Properties (9:08)
- Watchers (3:12)
- Binding Classes (8:09)
- Binding Styles (5:13)
- Conditional Rendering (10:04)
- The v-show Directive (4:24)
- List Rendering (12:00)
- Understanding the role of the key attribute (8:15)
- Endorsements On LinkedIN
- Overview (2:28)
- Optional Videos In Appendix
- Installing Webpack (5:32)
- Configuring Webpack (9:19)
- Installing Babel (5:50)
- Configuring Babel (6:23)
- Installing SASS (7:51)
- Bundling CSS (7:30)
- SASS Basics (13:27)
- PostCSS (9:14)
- Understanding Linting (5:59)
- Installing ESLint (8:02)
- Configuring ESLint with Visual Studio Code (3:40)
- Conclusion (0:48)
- Installing the Vue CLI (10:00)
- Sidebar: Understanding Servers (5:35)
- Reviewing the Files (11:46)
- Creating Components (3:51)
- Child Components (7:52)
- Component Styles (6:29)
- Using SASS in Components (3:03)
- Communicating Between Components (2:21)
- Props (6:13)
- The Limitations of Props (3:54)
- Emitting Events (8:34)
- Validating Props (7:35)
- Callback Functions (4:58)
- Inserting content with slots (8:52)
- Named Slots (7:07)
- Dynamic Components (9:24)
- The Next Step (1:31)
- Installing Yarn (3:38)
- Introduction to the Vue UI (6:29)
- Creating a New Project (9:53)
- Reviewing the UI and Files (16:26)
- Adding the Template (9:05)
- What is Tailwind? (5:36)
- Installing Tailwind (7:09)
- Practicing with Tailwind (5:15)
- Loading Assets (4:25)
- Understanding State (5:57)
- Reviewing the Vuex Configuration (5:41)
- Splitting the Template into Components (5:28)
- Working with State (4:30)
- Using Mutations (3:59)
- Mapping Mutations (2:55)
- Understanding Getters (1:33)
- Using Getters (4:27)
- Closing the Modal (2:09)
- Mapping Getters and State Properties (4:09)
- Aliases (2:40)
- Adding Tabs (5:39)
- Setting up Form Validation (5:18)
- Registering A Plugin (5:42)
- Validation Components (5:31)
- Defining Rules (3:53)
- Applying Rules (5:26)
- Additional Rules (6:31)
- Validating Emails (3:40)
- Validating Numbers (4:32)
- Validating Passwords (5:01)
- Dropdown and Checkbox Fields (7:29)
- Validating the Form (4:02)
- Sidebar: Slot Properties (8:35)
- Rendering Multiple Error Messages (5:51)
- Default Values (1:53)
- Custom Error Messages (10:35)
- Validation Triggers (3:58)
- Showing Alerts (8:59)
- Setting up the Login Form (18:09)
- Understanding Authentication (6:23)
- Reviewing the Rules (5:30)
- Setting up the Firebase SDK (7:30)
- User Registration (6:30)
- Handling the Response (4:48)
- Exporting Services (4:54)
- Storing the User Form Data (7:56)
- Extra Exercise: Add Another Field
- Understanding Authentication (6:25)
- Logging the user in after Signup (5:26)
- Understanding Actions (5:00)
- Using Actions (11:23)
- Connecting the User with their Data (8:29)
- Initializing Firebase First (4:42)
- Persisting the User Authentication (6:13)
- Setting up the Login (6:01)
- Signing Out (10:08)
- Sidebar: JSON Web Tokens (9:10)
- Understanding Routing (4:45)
- Reviewing the Router Configuration (5:56)
- Creating Routes (7:13)
- History Mode (8:54)
- Navigating with Links (5:46)
- Custom Links (5:27)
- Tailwind Styles for Active Links (5:02)
- Naming Routes (4:15)
- Setting up “Catch-All” and Redirect Routes (6:23)
- Route Alias (2:38)
- Guarding Routes (5:13)
- Route Specific Guards (4:54)
- Guarding Authentication Only Routes (5:10)
- Redirecting after Logging Out (5:08)
- Route Meta Fields (10:43)
- Avoiding Dependency Cycle (6:04)
- Preparing the Upload Component (5:48)
- Handling Drag and Drop Events (8:12)
- Handling the File (6:34)
- Uploading Files with Firebase (5:57)
- Firebase Rules and Validation (7:01)
- Adding the Progress Bar (6:53)
- Making the Progress Bar Dynamic (3:13)
- Improving the Progress Bar (4:52)
- Handling Errors and Successful Uploads (6:42)
- Storing the File Data in the Database (10:41)
- Firebase References and Snapshots (2:37)
- Fallback Upload (4:38)
- Canceling Uploads (4:44)
- Cancelling Uploads with Refs (7:01)
- One more thing about References (4:47)
- Querying the Database (6:03)
- Storing the List of Songs (4:44)
- Displaying the List of Songs (3:02)
- Prop Validation (2:52)
- Toggling the Form (2:47)
- Validating the Song Form (7:00)
- Editing a Song (12:53)
- Deleting a Song from the Storage/Database (10:06)
- Updating the list of songs after an Upload (8:04)
- Router Leave Guards (9:43)
- Creating the Home Page (9:40)
- Checking the Scroll Position (8:12)
- Infinite Scrolling (8:23)
- Path Parameters (4:47)
- Creating the Song Template (9:53)
- Validating the Comment (3:58)
- Prepping the Form (4:42)
- Finalizing the Comment Form (10:14)
- Displaying the Comments (6:20)
- Updating the Comments List (7:34)
- Query Parameters (5:43)
- Detecting Query Parameters (6:55)
- Updating the Comment Count (4:27)
- Storing the song in the State (7:14)
- Playing Audio (4:04)
- Toggling Audio (10:09)
- Duration and Current Position (7:44)
- Formatting the Time (4:37)
- Player Progress Bar (8:30)
- Changing the Audio Position (11:06)
- Extra Exercise: Update the "play" Button
- Creating links with Hash Fragments (4:48)
- Route Transitions (4:44)
- Overview (1:54)
- Auto-Registering Global Components (12:17)
- Vuex Modules (7:07)
- Fixing the App (5:10)
- Vuex Namespaces (2:46)
- Automatic Module Registration (5:58)
- Dynamically Registering Modules (3:24)
- Perceived Performance (7:17)
- Dynamic Route Imports (6:32)
- Chunk Names (2:48)
- Progress Bar (5:45)
- Code Coverage (4:25)
- Introduction to Testing (12:14)
- Introduction to Jest (4:35)
- Writing Our First Test (8:57)
- Mounting with Vue Test Utils (6:53)
- Testing the Inner Content (4:22)
- Passing Data to Components (5:16)
- Stubbing Components (4:54)
- Avoid Boolean Assertions (1:38)
- Testing Children Components (6:41)
- Mocking Firebase (6:30)
- Mocking Methods (5:43)
- Testing Attributes (6:41)
- Testing Vuex Mutations (6:37)
- Testing Vuex Actions (6:46)
- Mocking Promises (3:46)
- Testing Vuex Getters (2:44)
- Testing Router Components (6:37)
- Snapshot Testing (12:35)
- E2E Testing Overview (10:02)
- Writing an E2E Test (12:18)
- The Composition API (6:00)
- Mixins (10:26)
- Reactive References (7:11)
- The Reactive Function (7:09)
- Watchers and Computed Properties (7:52)
- Lifecycle Functions (3:07)
- Props (6:09)
- Template Refs (4:38)
- Emitting Events (1:54)
- Advantages of the Composition API (12:12)
- Router Hooks (7:46)
- Vuex Hooks (7:41)
- Verifying Reactivity (3:08)
Course Details
We guarantee you that this is the most comprehensive and up-to-date Vue tutorial + projects course that you can find. You will learn Vue from scratch (including all new Vue 3 features), build your own professional Vue.js apps and get hired as a Vue.js developer in 2021!
This Vue course is focused on efficiency. Never spend time on confusing, out-of-date, incomplete tutorials anymore, and instead, learn to build professional and modern apps using Vue 3.
Graduates of Zero To Mastery are now working at Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, Shopify + other top tech companies. This could be you.
By enrolling today, you’ll also get to join our exclusive live online community classroom to learn alongside thousands of students, alumni, mentors, TAs and Instructors. Most importantly, you will be learning from industry experts that have actual real-world experience working with Vue and building large-scale apps for companies in Toronto And Silicon Valley.
This project based course will introduce you to all of the modern toolchain of a Vue JS developer in 2021. Along the way, you will build a massive full-stack Music Player application similar to Spotify using Vue, Vuex, Vue Router, Composition API, Firebase, Jest, Sass + more.
All code is going to be provided step-by-step and even if you don’t like to code along, you will get access to the the full master project code so when you join the Zero To Mastery Academy, you will have a professional project to put on your portfolio right away.
The curriculum is very hands on as we guide you from start to finish of releasing a professional Vue project all the way into production.
However, we will start from the very beginning by teaching you Vue basics and fundamentals. We then dive into advanced topics so you can make good decisions on architecture and tools on any of your future Vue.js projects.
You're going to love Vue if you are new to front end frameworks or even if you come from a React or Angular background!
Here is what the course will cover to take you from Zero to Vue Mastery:
1. FUNDAMENTALS - In this section, you will learn about the fundamentals of Vue, such as computed properties, methods, and watchers. With just the fundamentals, we'll be able to manipulate the document with events, binding, and conditional rendering. You'll also learn how to debug an application with the official Vue Developer Tools.
2. PROJECT: PERSPECTIVE PLAYGROUND - In this section, you'll build your first project by creating a CSS perspective playground. This will give us an opportunity to reinforce a lot of the fundamental concepts we learned in the previous section by developing a tool for visualizing how CSS properties can manipulate the perspective of an element.
3. BEYOND THE FUNDAMENTALS - In this section, you'll dive into the inner workings of the Vue framework. How do JavaScript frameworks add reactivity? How does Vue compile templates into virtual DOM objects? This will give you insight into how Vue is able to deliver a framework for modern applications. We'll also talk about lifecycle hooks and components.
4. LEARNING ABOUT THE TOOLS - In this section, we'll take a step back from Vue to talk about some tools for developing applications. Throughout your career, you'll need to deal with the tooling that helps us develop applications (i.e., Webpack, Sass, PostCSS, ESLint). We'll talk about how these tools are configured and why they're necessary.
5. ADVANCED COMPONENTS - In this section, you'll use the Vue CLI to scaffold a project. The goal of Vue is to make the development experience as smooth and painless as possible. Vue can help us with scaffolding a project, configuring tools, and running a server. This alleviates a lot of the more tedious tasks of web development. We'll be able to jump straight into components to see how we can architect an application with components by using props, emitting events, slots, and dynamically rendering content.
6. TRANSITIONS & ANIMATIONS - In this section, you'll learn how to add some pizzaz to an app by adding transitions and animations. Animations can breathe life into any application. They can also improve user experience by giving feedback to the user about their actions. We'll discuss how animations can be achieved with CSS and JavaScript. Both are supported in Vue. We'll even talk about the latest Web Animations API.
7. PROJECT: QUIZ APP - In this section, you're going to take everything you've learned thus far to develop a quiz application. Quizzes are a great way to engage users in almost any industry.
8. MASTER PROJECT: INTRODUCTION TO VUEX - In this section, you'll start working on the master project of this Vue course, which is a music application! Upload, manage and listen to music without interruption. We'll use TailwindCC to help us with designing a beautiful modern application. It's the new kid on the block that's being embraced by the front-end dev community. Afterward, we'll learn about state management by using the official state library called Vuex.
9. MASTER PROJECT: FORM VALIDATION - In this section, you will perform form validation to prevent invalid data from being submitted. Accidents happen. It's our job to make sure to check for mistakes. You'll then learn how to enforce rules for various scenarios.
10. MASTER PROJECT: AUTHENTICATION - In this section, you'll begin authentication and registration. Users will be able to login immediately after registering for an account. We'll be using Firebase as a backend solution for managing and verifying users.
11. MASTER PROJECT: ROUTING - In this section, you're going to be handling routing with the Vue Router library. Underneath, the router library is using the history API to handle navigation. It allows us to switch between pages without refreshing the assets. We'll look at how we can use this library to help us guard routes, add meta fields, and customize the appearance of our site based on the current route.
12. MASTER PROJECT: UPLOADING FILES - In this section, you're going to start uploading files to Firebase. It's vital that we validate files with Firebase. We don't want users to accidentally download a malicious file when listening to music. We'll cover how to enforce validation with Firebase rules. After doing so, we'll store additional information in a database. We'll even cover how to implement a fallback solution in case drag n drop is not available.
13. MASTER PROJECT: PLAYING MUSIC - In this section, you're going to start making the audio player functional. You'll implement basic features such as playing/pausing, scrubbing and displaying the current duration. We'll also make the rest of the site functional by allowing users to submit comments, browse music, and sort data.
14. MASTER PROJECT: DIRECTIVES - In this section, you'll briefly learn about writing custom directives. Directives are attributes that can extend an element with additional properties and methods. We'll cover the basics and look at advanced concepts such as modifiers and arguments.
15. MASTER PROJECT: INTERNATIONALIZATION - In this section, you'll add internationalization to a project for translating a project across multiple languages. There are different ways to translate a message. Some messages need formatting or pluralization. We can also translate numbers (i.e., currencies). We'll look at how to switch between languages with a few lines of code.
16. MASTER PROJECT: PWA - The web has shifted to a mobile-first approach. In this section, you'll add PWA (Progressive Web App) features to make your app mobile-friendly by using Workbox to cache files and persist data with Firebase.
17. MASTER PROJECT: OPTIMIZATIONS - In this section, you'll make some final optimizations before shipping your app to production. There are various techniques and tools we'll look at to help us fine-tune our app. We can use Webpack to chunk files and auto-register components. We'll add some features for helping the user understand the app is processing a request for a friendly user experience.
18. MASTER PROJECT: DEPLOYMENT - In this section, you'll deploy your app to Vercel with a single command! Quick and easy.
19. MASTER PROJECT: TESTING - In this section, we'll discuss how you can test a project with Jest. Unit testing allows us to test a feature in isolation. It's the most common type of test you'll write. There are a few problems with testing that can be resolved with mocking. By mocking code, we'll be able to isolate features and test them. Afterward, we'll move onto snapshot testing and E2E testing to bring everything together.
20. COMPOSITION API - In this section, we'll discuss the latest feature introduced in Vue called the composition API. It's a different way of building components. While Vue provides a simple API for writing components, there are some shortcomings. The composition API resolves these issues. We'll talk about why you would want to use the composition API and understand why it was introduced.
This course is not about making you just code along without understanding the principles so that when you are done with the course you don’t know what to do other than watch another tutorial... No!
This course will push you and challenge you to go from an absolute beginner in Vue to someone that is in the top 10% of Vue developers 💪.
Click Start Learning Now to join the Academy. We'll see you inside the course!
Answers to (at least some of) your questions
Are there any prerequisites for this course?
- Basic HTML, CSS and JavaScript knowledge
- You do not need any experience with Vue or any other JS framework!
Who is this course for?
- Students who are interested in going beyond a normal "beginner" tutorial
- Programmers who want to learn one of the most in-demand skills of a web developer
- Developers that want to be in the top 10% of Vue Developers
- Students who want to gain experience working on a large, scalable application
- Bootcamp or online tutorial graduates that want to go beyond the basics
- Anyone who wants to get hired as a Vue developer
Do you provide a certificate of completion?
We definitely do and they are quite nice. You will also be able to add Zero To Mastery Academy to the education section of your LinkedIn profile as well.
Can I use the course projects in my portfolio?
Yes, you’d be crazy not to! The massive music player application project (aka Spotify!) you are going to build is a large-scale real-world project that is downloadable and ready to use the minute you join.
Many of our students tell us the projects they built while following along with our courses were what got them interviews and because they built the projects themselves, they could confidently explain and walk through their work during the interview. You know what that means? Job offer!
Can I download the videos?
Definitely. You can download any and all lessons for personal use. We do everything we can to make learning easy, fun, and accessible whether that’s on your commute, on a flight or if you just have limited access to good wifi.
Still have more questions specific to the Academy membership? No problem, check these out.
Live the life you want, starting now
Learning to code and becoming a developer provides endless opportunities to live the life you want. Whether that’s a high paying job with a world-class tech company, working remotely or building your own apps, the ZTM Academy will equip you with the skills and knowledge to achieve your dreams.
Our courses walk you through the entire journey of starting to learn to code to having a successful career in the tech industry. Along the way, you’ll not only be supported by Andrei, Luis and our course TAs but also your thousands of peers in the exclusive Zero To Mastery developer community.
Join now to take the first step to change your life.