NEW! Curricular Projects • Test Your Skills and Get Expert Feedback
We independently test and review every course that we recommend.
Please support us by leaving us feedback, and recommending this guide to others.
Updated: July 18, 2023
Vue Mastery
By Various
Excellent introductory to advanced level Vue courses, taught by Vue experts and core team members.
Vue Mastery's video series are highly polished and well produced. They're super concise, making them one of the most efficient on-ramps to learning Vue. They're also typically centered around a real-world project, so you learn features of Vue in a real world context.
They've helpfully organized their courses into beginner, intermediate, and advanced level paths. After completing the beginner path, you may wish to continue with those paths, or choose specific topics from their tutorial library.
Their quality is consistently high and their roster of instructors is an impressive collection of Vue contributors and speakers.
To get the most out of Vue Mastery's courses, be sure to code along with the instructor. The downloadable cheatsheets are also super helpful for ongoing reference.
Vue Mastery hosts a community on Discord. It's a decent place to get help when you're stuck, but beyond that doesn't seem like a super valuable community.
Vue Mastery regularly publishes new Vue content, so if you're planning to work with Vue on an ongoing basis, you should consider subscribing.
Frontend Masters
By Various
Solid expert-led Vue learning path. The first five courses in the path are a great start for getting up to speed with Vue. And if you want to go deeper, the path continues with advanced features.
Frontend Masters courses combine footage from real-time workshops with code files so you can follow along.
We love how much emphasis is placed on how Vue is used in the real world.
The Vue path is taught mostly by Ben Hong of Netlify, a Vue Core Team member and one of the best Vue teachers around (and who also teaches at Vue Mastery).
Since the workshops are recorded in real time with a live audience, sometimes the instructors get led off on tangents. Not a dealbreaker, but it's a small drawback to the format that you don't encounter with other solutions.
Codecademy
By Various Authors
Solid option for getting familiar with how Vue works.
The course walks step by step through the core concepts of building with Vue, with a brief exercise in each lesson.
Throughout the course, you'll be working on adding interactive functionality to a real-world application - a ticket purchasing app. This is helpful because you see how the code you're creating at each step translates into real-world user interaction.
This course is limited in its scope. It's a quick introduction and won't prepare you to build real-world applications. If you're planning to build with Vue professionally, you should choose another option. Codecademy can be a starting point, but continue with other solutions for more in-depth and advanced coverage.
Pluralsight
By Various
A solid option for experienced developers looking to get familiar with the core features of Vue.
Starting from the absolute basics, the courses in this learning path will teach you how to build Vue apps for various use cases.
The courses are concise, well-produced, and scoped well to cover the core topics without too much overlap. The concepts are almost always explained well and demonstrated using real-world scenarios.
You’ll learn from some of the best teachers and developers in the business: Dan Wahlin, John Papa, Jim Cooper, and Shawn Wildermuth.
Pluralsight's path is authored by some of their best authors. However, their strength is in other technologies within Frontend Development, rather than Vue. If you're looking to learn Vue from core team members or authors who specialize in Vue, choose another solution.
Some of the courses were built using Vue 2, but since the concepts are unit testing and animations, the content is almost universally relevant to Vue 3.
Vue is a progressive JavaScript framework used for building user interfaces. It enables the development of dynamic and interactive web applications. Vue follows a component-based architecture, where applications are built by composing reusable components. It utilizes a virtual DOM for efficient rendering and offers features such as declarative syntax, two-way data binding, and a rich ecosystem of plugins and libraries to enhance development productivity.
Vue is also regarded as considerably easier to learn than other JavaScript frameworks like React and Angular, while still allowing developers to build complex applications.
Vue is a tremendously popular framework with developers, ranking the 6th most used framework by professional developers in Stack Overflow’s 2023 Developer Survey. Some of the world’s leading technology companies use Vue, including Netflix, Nintendo, Upwork, Google, and Apple.
Vue Instance: Understand the core concept of the Vue instance, which acts as the foundation of a Vue application. Learn how to create and configure a Vue instance, including options like data, methods, computed properties, and lifecycle hooks.
Components: Familiarize yourself with Vue's component-based architecture. Learn how to create reusable components, pass data between parent and child components using props, and emit custom events for communication. Explore component lifecycle hooks and how they can be used for initialization and cleanup tasks.
Vue Directives: Learn about Vue directives, such as v-if, v-for, v-bind, and v-on. These directives allow you to add dynamic behavior to your templates, conditionally render elements, iterate over arrays, bind values, and handle events.
Vue Router: Explore Vue Router, the official routing library for Vue.js. Learn how to set up routing in your Vue application, define routes, handle dynamic routes and route parameters, and implement navigation between different views.
Vuex: Understand Vuex, the state management pattern and library for Vue.js applications. Learn how to manage centralized application state, define mutations and actions, and use getters to access state data. Explore how Vuex integrates with Vue components to handle complex state management scenarios.
Vue CLI: Familiarize yourself with Vue CLI (Command Line Interface), a powerful tool for scaffolding and managing Vue projects. Learn how to create, configure, and build Vue applications using the CLI, and explore the various project templates and plugins available.
Vue is known for its gentle learning curve and beginner-friendly nature. With a basic understanding of HTML, JavaScript, CSS, and web development concepts, you should be able to start learning Vue and progressively deepen your knowledge and skills.
HTML: Familiarity with HTML (Hypertext Markup Language) is essential since Vue is primarily used to build user interfaces. Understanding HTML tags, attributes, and structure will help you work with Vue templates effectively.
JavaScript: A solid foundation in JavaScript is crucial for working with Vue. Concepts such as variables, functions, arrays, objects, control flow, and DOM manipulation are important to grasp as Vue relies heavily on JavaScript for its functionality.
CSS: Having a good understanding of CSS (Cascading Style Sheets) is valuable for styling and layout purposes in Vue applications. Understanding selectors, box model, positioning, and responsive design principles will enhance your Vue development skills.
Basic Web Development: Familiarity with basic web development concepts such as the client-server architecture, HTTP requests, and RESTful APIs will be helpful when working with data and communicating with back-end services in Vue applications.
Help us out by leaving us feedback, joining our email list to get notified when we release new guides, and recommending this guide to others.
Thanks for reading!
