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.
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
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.
- Part 1: Rendering, Directives, and Events
- Part 2: Components, Props, and Slots
- Part 3: Vue-cli
- Part 4: Vuex
- Part 5: Animations
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:
- VueJs: The Basics – Intro to Vue.js basics
- VueJs: Components – Intro to Components in Vue.js
- VueJs: Filters – Learn about Vue.js Filters
- Creating a Markdown Editor with VueJs and GitHub’s API
- Real-Time Analytics Dashboard with NodeJs, Socket.io, VueJs
- Building a Bookmarking App with Electron, VueJs, and Firebase
- Learn Vuex by Building a Notes App
- Dynamic Components in Vue.js
- Building a Mobile App with Cordova and Vue.js
Other Noteworthy Vue.js tutorials
Below are noteworthy tutorials on Vue.js by popular publications such as TutorialZine and Sitepoint.
- Building Your First App With Vue.js – Updated for Vue.js 2.0
- 5 Practical Examples For Learning Vue.js – Updated for Vue.js 2.0
- Getting up and Running with the Vue.js 2.0 Framework
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.
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 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.
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 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 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:
- Vue.js blog – The official blog of Vue.js by its creator Evan You
- 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 Feed – Latest news and feed for Vue.js community
- Vue.js Forum – Hang out with other Vue.js developers
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.