5 Free VueJS Tutorials

Ok… I still use jQuery — my apologies for sleeping through the entire Backbone, Knockout, Angular 1 era. Regardless, I’m ready to toss my spaghetti, callback-filled, DOM-diving, code; for clean, data-driven, reactive front-end ViewModel bliss with VueJS— whew?!

Here are the resources I’m using to learn VueJS 2:

Learn Vue 2: Step By Step on LaracastsJeffrey Way has been publishing web development tutorials since the dawn of time (ok…maybe not that long) and his experience shows. He was even able to teach me jQuery in 30 days! His latest VueJS series on Laracasts is free for everyone and is shaping up to be “the most in depth Vue series in the world.” After completing this series, you’ll never “dive into the DOM” again — or you’ll at least hear Jeffrey’s voice in your head warning you not to :).

Vue.js Fundamentals on YoutubeAn excellent ten video Youtube playlist by Devmarketer that starts with the very basics of VueJS 2 and moves on to more advanced functionality, such as external API requests with Axios[1]. Very in-depth and great for those new to VueJS and the ViewModel pattern (like me).

[1] vue-resource is no longer part of the VueJS core and Axios seems to be the recommended HTTP request library for AJAX.

VueJS User Guide on VueJS.orgDon’t be surprised! The VueJS guide is top-notch and worth reading top to bottom. I’m always tempted to jump right into videos, but the VueJS docs are written like a long-form tutorial with the beginner in mind. Complete API docs are also available (but not as fun to read).

Develop Web Apps with Vue.js on Egghead.ioJust released yesterday, this is quick ten video course (~16 minutes total). It’s probably not the best starting point for a complete beginner to VueJS or the ViewModel pattern, but it covers some common VueJS scenarios in a very short time span. It’s helpful to have some basic VueJS knowledge before watching.

Getting Up and Running with the Vue.js 2.0 Framework on SitepointSave this one for last. This is a more advanced tutorial, covering the workflow for creating custom components and bundling them with webpack and vue-loader. This is closer to the production workflow I hope to achieve for my own projects [editor’s note: what the cool devs do]. Keep in mind that you need some ECMAScript 2015 (ES6) experience to follow along (specifically modules and arrow functions), but Laracasts and Egghead have you covered with excellent free ES6 courses — prerequisites, ugh!