The popularity of Vue.js is on the rise and with the release of Vue.js 2.0, this progressive JavaScript Framework is all set to challenge other frameworks such as React and AngularJS. Here, we have collected 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.

vuejs tutorials and courses

Vue.js Tutorials

Vue.js community is growing strong and we can find many tutorials and guides covering from the basic concepts to advanced techniques of using Vue.js.

You may find that some of the tutorials were written during the Vue.js 1.0 time-frame, however most of the concepts would still be relevant to 2.0. In case you do come across such tutorial, you will find this migration from Vue 1.x guide helpful.

Below we have hand-picked Vue.js tutorials which will help you get started with Vue.js 2.0 for your own projects. All the listed tutorials are completely free.

Official Vue.js Guide

The best starting point to learn Vue.js is to follow the official Vue.js Guides. Apart from the official guide, you will also find API docs for Vue.js useful.

We would like to recommend a couple other guides for Vue.js most popular plugins:

  • Vue Router Getting started – Route management for Single Page Applications (SPA) built with Vue.js
  • Vuex Guide – Vuex is a state management pattern + library for Vue.js applications

Vue.js Tutorials on CSS-Tricks

On CSS-Tricks, you will find a tutorial series on Vue.js by Sarah Drasner which are very good and will help you get a grip on Vue.js.  These tutorial contains numurous examples in form of CodePens which you can tinker around with.

Vue.js Tutorials on Coligo

Coligo.io has a fine set of Vue.js tutorials ranging from the basics to advanced projects making use of connected services. Some of the noteworthy tutorials are listed below:

Other Noteworthy Vue.js tutorials

Below are noteworthy tutorials on Vue.js by popular publications such as TutorialZine and Sitepoint.

Free Vue.js Video Courses

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:

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 are 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 for it if you find them useful.

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.

Vue.js 2 – Getting Started – by Mindspace

This is a 12 video tutorial series on Vue.js 2 by Mindspace and is available for free on YouTube. It covers most of Vue basics such as events, methods, computed properties, filters, components, routing etc.

Develop Web Apps with Vue.js – by Greg Thoman on egghead.io

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 project cover a wide range of Vue.js usase 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.

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.

RSS Reader

An 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

SDR News

SDR News is our own open source project where we use Vue.js to display news aggregated from various sources for Web Designers and Developers. Source Code on GitHub

SDR Tools

SDR Tools is another open source project from us where we use Vue.js to build small utility web based tools for Web Designers and Developers. Source Code on GitHub

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. As already pointed out, our News and Tools sections both use Vue.js and have their source code available on our GitHub Repository. If your Vue.js project is open source then do add them in comments below.

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.

About the author

Kanishk Kunal

Kanishk is a passionate developer and creator of many successful apps and websites. He devotes most of his time punching his keyboard and swiping his smartphone. Follow him on Twitter @kanishkkunal

Leave a Reply

Your email address will not be published. Required fields are marked *