Best Free Vue.js Learning Resources

JavaScript Web Development This post may contain affiliate links. If you buy something we get a small commission at no extra charge to you. (read more)

One of the newer and more popular open source frontend frameworks is . It’s currently in v1.0 of development and growing quickly with community support.

Vue is a way to handle frontend architecture between page views and data structures. It’s similar to Angular but much easier to learn. It’s a great choice for JS devs who want a lightweight framework for small webapps.

vue js logo design

But where should you start with Vue and how should you practice?

This post offers all the resources you’ll need to go from a Vue.js newbie to building your first(of many) applications. There is an official by the Vue team, but there’s also plenty of free resources online to get you familiar with everything that Vue.js has to offer.

The Basics of Vue.js

The Vue.js describes it as a library for building interactive web interfaces. It’s built purely in JavaScript so all data is handled in JS with HTML binding.

Vue may be described as a mixture of Knockout.js and a . It doesn’t offer as much structure as Angular but it’s an incredible library for smaller webapps, especially those .

Many devs agree that Vue is compared to larger libraries like React or Backbone.js. The only problem is that Vue has a much smaller community of support & resources.

Vue relies on a methodology of or Model-View-ViewModel. This which follows similar guidelines, but ultimately relies on controllers for processing and logic. MVVM is more common with browser/device-oriented code while MVC is more common with server/client code.

You don’t truly need to understand everything about MVVM to benefit with Vue.js. However it’s a good idea to if you want to write code professionally.

Vue.js supports which unfortunately ignores IE8 and earlier. But this isn’t a problem since most of the web has moved onto IE11(and ).

Take a look at hosted on JSFiddle.

It’s a very basic example but it demonstrates how to pass data into the view through a new object(a ViewModel). Things get more complicated when you but when you follow tutorials these ideas start to make sense.

To get started as a complete beginner I recommend . It was just recently updated with a newer version of Vue.js so it’s one of the best resources to set you on the right track.

Intro Tutorials

Developers write free tutorials to help people solve problems and learn how to build applications. Because Vue.js is so small it has a very tight niche of tutorials, but they’re all fantastic and useful for learning everything there is to know about Vue.

First I’ll suggest this which covers all the core aspects of Vue.js. It explains how the HTML works as a templating language for binding elements and user input fields into a ViewModel.

vuejs source code

You’ll learn about creating data bindings, filtering content, Vue.js components, and other fundamental topics. If you follow this entire tutorial to the end you will have a much better understanding of Vue.js.

There’s also an on SitePoint explaining the new features in the latest release. It’s a much shorter post and not really a step-by-step walkthrough. But it does cover Vue.js in simple terms with hosted on CodePen.

To see other basic concepts in action check out offering 5 custom examples of Vue.js projects. They’re all very simple examples and the post has live embeds where you can edit code on-the-fly.

If you want to see live examples of simple Vue.js apps with explanations then the is worth reading. You might not fully understand everything, but you’ll get quality code snippets and explanations to go along with them.

For more fundamental content you can find posts on that cover and . These two articles are lengthy with a lot of source code. But they’re rich in detail and should be required reading for new developers.

If you haven’t figured out components then I definitely recommend the Coligo article. This isn’t a super complex subject but it will require some practice before everything clicks.

The best way to apply these ideas is with practice projects. For example, take a look at hosted on his personal blog.

He teaches how to build a Vue.js webapp with . This is great for learning the Vue.js syntax and a Vue.js development workflow.

This just about wraps up my suggestions for beginners, but one other text-based tutorial I want to mention is written by Craig McKenna.

It’s actually somewhat advanced and relies on Node.js for the backend. However I know there will be some readers already familiar with Node, so Craig’s tutorial might be the perfect intro for a Node/Vue project cycle.

Also I know this isn’t a tutorial, but comparing Vue.js to Angular.js is well structured and eye-opening. It is somewhat dated comparing to an older version of Vue.js, but the primary arguments are solid.

Keep in mind there’s nothing inherently wrong with either Vue or Angular. They’re just different frameworks and they work better for different purposes. Vue is too new to offer but it’s a good framework to learn & get the basics under your belt.

New tutorials are published every year and the excitement surrounding Vue only continues to build. I think the above tutorials are a great place to start, but consider some of these alternatives if you’re looking for more helpful content.

Free Video Tuts

Visual learners rejoice because there are lots of free Vue.js video tutorials on YouTube.

Some are general intro videos for complete beginners while others teach specific guidelines for coding web applications.

First up is this hour-long tutorial. It’s a recent video that delves right into Vue.js and all its foundations. Truly geared towards beginners, you should follow along with the code to pick up every tidbit of information.

If you have trouble keeping up with everything you can hosted for free on BitBucket.

I feel this is one of the better intro tutorials on YouTube because it’s lengthy yet precise.

There’s also a recorded using Google Hangouts if you want to give that a try. I think it runs a little too long and doesn’t present as well, but it might be worthwhile if you’re a hardcore visual learner.

I also found one covering CRUD(create, read, update and delete). It is educational but it has no voiceover at all. It runs for 30 minutes with just background music and small text labels at the bottom of the screen.

So this isn’t very much of a step-by-step tutorial. It’s more like a “let’s paint” but with code.

If you’re OK with no voiceover and can still follow along then this might be worth watching.

Anyone familiar with Laravel should already know about . It’s a huge library of Laravel-based learning resources for PHP developers.

Since Vue.js pairs so well with Laravel there’s actually a with a playlist of 15 different videos. The original screencast playlist covers an older version of Vue, but there’s also a full of 20+ screencasts.

I have to give this series a very high recommendation if you’re a visual learner. Hell, even if you’re not a visual learner this is still a great tutorial series.

Note that some of the videos do cost money, but it’s only 4-5 vids of the total 20+ collection. If you’re willing to join Laracasts you can get access to all the videos and learn Laravel too. But it’s really not necessary because you can learn a lot just from the free videos.

One last free video tutorial I want to mention is recorded by CodeCasts. It teaches you how to build a chat application with Vue.js and the open source project.

This is a so the whole tutorial spans about 50 minutes. It also requires a bit of Node knowledge to work with Socket, but if you’re itching to create an honest-to-goodness real web application with Vue then this tutorial is what you need.

Advanced Learning Resources

There are plenty of advanced Vue.js tutorials out there to further encourage your learning process. Most of them require a backend library, notably Node.js or Laravel.

Vue.js can be used for basic practice if you don’t require a server-side language. But you’ll want to combine Vue with other libraries if you plan to construct larger web applications.

For example Coligo published a teaching how to build a bookmarking webapp. It runs on and , both of which you can learn along the way but would be easier to have some working knowledge of either one.

This is a rather advanced tutorial but it shows how much is possible with Vue.js if you combine other technologies into the stack.

Auth0 wrote a covering authentication and API access with Vue.js. This is one of the better reasons to use Vue because it works so well with a single page webapp.

You might also try this detailed published on . The site is known for incredibly detailed yet educational tutorials and this post is no different.

The entire tutorial source code is available for free and there’s even a hosted on Scotch’s website. If you’re serious about Vue.js this tutorial will teach you a lot of advanced methodologies.

Scotch is a trusted source for advanced dev tutorials and you may be surprised how much you can learn from just one article.

Also I know this post is about free resources but I have to mention one upcoming book called . It’s published by Leanpub and it’s currently in the final stages of being released.

At the time of this writing the book is 80% complete. But there is a free sample chapter and it looks like it’s shaping up to be an incredible book. This is also one of the only Vue.js books available so if you want to go the traditional learning route keep your eyes on this publication.

Aside from the tuts(and book) listed above you might want to skim these other advanced tutorials. They’re all very detailed and cover much more advanced Vue.js topics.

Other Cool Stuff

Now these aren’t technically learning resources but they can aid in your quest to learn Vue.js.

First I wanna mention a Chrome extension made by the Vue.js team named . It connects into your DevTools panel and helps you analyze, edit, and debug Vue.js syntax.

The project is completely free so you can even download the source code if you wish.

That’s one of the best things about the Vue.js community: everything is open source and even small ancillary projects are treated in a very open way.

Take for example built on top of Vue.js. It’s also totally free on GitHub with a hosted through the repository.

It may not teach you how to build the HN clone, but having access to the source code is the next best thing. If you’re savvy enough you can reverse engineer the process and learn to build your own custom API webapp from scratch.

I also like to make Vue plugin development much easier. Advanced developers may prefer to build their own, but it’s a great starting template.

There’s so much consistency with the number of tools hosted on GitHub and it seems like built on Vue are being added to the website all the time.

If you want to connect Vue with other technologies in your stack, try searching GitHub first. There’s a lot of free stuff out there and it might save you hours of tinkering.

Community Support

Everyone from all skill levels eventually runs into problems when learning a new library or framework. As you develop stronger programming skills it becomes easier to fix these problems on your own.

But it can be tough with new libraries and new concepts like MVVM architecture with JavaScript.

Whenever you bump into an unsolvable issue, turn to one of these Vue.js communities for support. The best choice is hosted on the Vue.js website.

Most topics in the are answered very quickly with new posts added daily.

This powerful community is one of the reasons that Vue.js has done so well. It helps to bring everyone together to share their knowledge and build upon the existing framework.

Vue’s forums are also used for news updates and general topics about Vue.js development.

If you want to go the more traditional route consider Stack Overflow. It has a designated tag for Vue.js questions so you’re likely to get very targeted help whenever you need it.

I always prefer going to Stack Overflow for support with basic questions because almost anyone can help you. More technical questions may go completely unanswered, so the Vue.js forums would be a better option for intermediate-to-advanced issues.

Alternatively there is a although at the moment it’s very small. It typically gets a couple new posts every week. Responses are still common so there is a good chance you’ll find help.

Reddit also has the large community with 110k subscribers and counting. It’s not targeted for Vue.js questions but so many talented developers lurk the community that you’re bound to find someone who can help.

Lastly I found a hosted on . It’s like a Slack channel but dedicated to development talk. Issues are pulled and devs can chat in a more direct fashion than with GitHub comments.

In time you my find yourself heavily involved with the Vue.js library. As you build more and study more you may find yourself frequenting these communities and even helping others! *cue *

If this happens with enough people then Vue.js may become one of the hottest libraries available with one of the strongest communities for frontend developers.

There’s no denying that practice is the ultimate decider for any skillset. Reading tutorials only gets you in the door but practice secures your knowledge.

Follow as many tutorials and videos in this post as needed to cement your understanding of Vue.js fundamentals. The is very easy if you ever want to expand your knowledge beyond these tuts, and there are plenty of support communities if you get lost.

Also if you publish any great tutorials or videos on Vue.js feel free to send a message and I’ll update this post. I’d like to make updates as often as needed to keep the materials in this post relevant and helpful for years to come.

Tags:

Author: Jaime Morrison

Jaime is a jr. designer interested in mobile UI/UX research and frontend web development with JavaScript frameworks. He covers general news and useful resources in the web design space.