The popularity of Vue.js is on the rise and with the release of Vue.js 3, this progressive JavaScript Framework is all set to challenge other frameworks such as React and AngularJS. Here, we have collected set of free Vue.js tutorials and video courses to help you get started quickly with Vue.js concepts and programming paradigms.
The following Vue.js tutorials and courses will take you from beginner to advanced level and contain example projects as well as open source samples to help you get started with your own Vue.js based projects. We keep updating this list with new tutorials on Vue.js, so do bookmark it for future reference.
Best Free Vue.js Courses (Video Tutorials)
You will find many premium courses on various tutorial websites, however, there are quality Vue.js video courses available for free and we are listing them below. Many of these courses are for Vue 2, but the same concepts can be applied to Vue 3 as well. Additionally you can learn about the new updates introduced in Vue 3.
1. Learn Vue 2: Step By Step – by Laracasts
An excellent video series by Laracasts which will help you learn Vue 2 and build real world apps using Vue. A wide array of concepts is covered with this video course such as data binding, vue devtools, vue compontents, webpack, vue-cli, ajax requests, SPA and much more.
There are many other useful video courses available for developers on Laracasts and we recommend subscribing to it if you find them useful.
2. What’s New in Vue 3 – by Laracasts
This video series by Laracasts will help you learn the new concepts intoduced in Vue 3 composition API. It also takes you to the new built tool for vue, namely Vite. You also get to learn how you can update your existing projects to Vue 3.
3. Testing Vue – by Laracasts
This video series by Laracasts has everything you need in order to master unit testing Vue components. You can learn step by step the necessary tooling for Vue unit testing. You can also learn the ins and outs of testing your client-side code. Free Lessons included will tell you about testing single file components, mocking axios calls and many more.
4. VUE JS 3 Complete Course Tutorial – by Leela Web Dev
This is a mega video tutorial series for Vue 3 with over 100 videos explaining many concepts such as router, transition, animations, hooks, mutations and many more.
5. Vue.js 3 Fundamentals – by Vue School
Learn the fundamental concepts and get up and running with Vue.js 3. Perfect if you haven’t touched Vue before, or you’re just getting started!
6. Reusable Vue.js Components with Slots – by Vue School
Learn how to master slots and scoped slots, to build flexible and reusable vue.js components.
7. Internationalization with vue-i18n – by Vue School
Learn how to create multilingual websites and Vue.js applications with Vue i18n. Vue i18n is the official internationalization library from Vue.js that integrates nicely with any new or existing Vue.js application.
8. Vue Router for Everyone – by Vue School
Learn how to create powerful Vue.js Single Page Applications (SPA’s) with the Vue Router in this course.
9. Vue.js Components Fundamentals – by Vue School
Learn the fundamental and important concept of Vue.js components in this course.
10. Nuxt.js Fundamentals – by Vue School
Learn the fundamentals of Nuxt.js in this course that we created together with the founders of Nuxt. The course covers what you need to know from scaffolding to deploying your first Nuxt.js application.
11. Vuex for Everyone – by Vue School
In this course you’ll learn all there is to know about Vuex by creating a shopping cart from scratch.
12. Vue.js Fundamentals – by DevMarketer
A 10 video tutorial series on Vue.js 2.0 by DevMarketer available on YouTube. The series starts off with the basics and how to get started with Vue.js and then moving into more advanced functionality. It proceeds to show how you can make a full project using Vue.js and finally make a larger project while tieing Vue into the backend of a larger framework like Laravel.
13. Vue.js 2 – Getting Started – by Academind
This is a 12 video tutorial series on Vue.js 2 by Academind and is available for free on YouTube. It covers most of Vue basics such as events, methods, computed properties, filters, components, routing etc.
14. Vue.js 2 & Vuex (Basics) – by Academind
This is a 7 video tutorial series on basics of Vue.js 2 and Vuex by Academind and is available for free on YouTube. It covers most of Vuex basics such as STATE and STORE, GETTERS, MUTATIONS, ACTIONS etc.
15. Develop Basic Web Apps with Vue.js – by Greg Thoman
A quick video series by Gred Thoman explaining Vue components and nested components. Learn how Vue reactively keeps the DOM up to date when data is changed.
Vue.js Example Open Source Projects
Find below some of the noteworthy example projects made with Vue.js which are Open Source. We are only including the projects which will help you in getting started with Vue.js. You can find an extended list of Vue.js projects here, which is maintained by the Vue.js community itself.
Official Vue.js Example Projects
Needless to mention, the official Vue.js example projects are your best source of seeing Vue.js in action. These projects cover a wide range of Vue.js usage ranging from simple components to server side rendering.
The Hacker News clone project is an excellent example of Vue.js, along with vue-router, vuex and server-side rendering.
raven-reader
This is a open source RSS Reader made using atom, electron, and Vue.js by Meet Godhani. It supports offline reading, subscribing to news feeds, searching for articles and many more features. This is a good example if you are looking forward to building desktop apps with electron and Vue.js
Markcook
Markcook is a MIT licensed smart and beautiful markdown editor built with Vue.js 2.0 and designed using Material Design. It offers some advanced features such as editing toolbar and saving markdown as HTML.
More Vue.js Resources
Here are a few more Vue.js resources which will help you keep up-to-date with latest Vue.js development news and learning resources:
- Vue.js on Twitter – Latest tweets about Vue.js
- Awesome Vue – A curated list of awesome things related to Vue.js
- Vue.js Templates – Vue.js project starter templates with webpack and browserify
- Vue.js Jobs – Find Vue.js job opportunities
- Vue.js Forum – Hang out with other Vue.js developers
- Vue Mobile UI Frameworks for Developing Apps
- Vue.js Admin Dashboard Templates
Using Vue.js in Your Projects
Are you using Vue.js in your projects? We would love to know what you are building. Our parten sites for Developer News and Digital Tools both use Vue.js. If you have built a project with Vue.js and have its as open source then do add them in comments below. You may also be interested in checking out these VueJS mobile UI frameworks if you are building mobile apps or web apps with Vue.js.
We hope you found good tutorials and courses for learning Vue.js in this article. If you find any broken links or want to suggest a tutorial or course you came across then please mention them in comments.
Great overview, thanks :)
Evan You’s Keynote at VueConf.US on the State of Vue.
https://www.vuemastery.com/conferences/vueconf-2018/opening-keynote-evan-you
Epic resources! I’d add https://reactdom.com/vue to the list!