X

15 Free Vue.js Courses & Tutorials for Beginners to Advance

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.

View Course

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.

View Course

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.

View Course

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.

View Course

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!

View Course

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.

View Course

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.

View Course

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.

View Course

9. Vue.js Components Fundamentals – by Vue School

Learn the fundamental and important concept of Vue.js components in this course.

View 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.

View Course

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.

View Course

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.

View Course

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.

View Course

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.

View Course

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.

View Course

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:

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.

Categories: Development
Related Post