One of the newer and more popular open source frontend frameworks is Vue.js. 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.
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 online guide 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.
Vue may be described as a mixture of Knockout.js and a slimmed-down Angular.js. It doesn’t offer as much structure as Angular but it’s an incredible library for smaller webapps, especially those built on PHP.
Vue relies on a methodology of MVVM or Model-View-ViewModel. This contrasts with MVC 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 research the subject if you want to write code professionally.
Take a look at this Vue.js example 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 introduce user inputs but when you follow tutorials these ideas start to make sense.
To get started as a complete beginner I recommend this tutorial by Matt Sparks. 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.
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 lengthy Vegibit tutorial 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.
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 intro to Vue 1.0 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 live code samples hosted on CodePen.
To see other basic concepts in action check out this Tutorialzine post 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 Tutorialzine post 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 Coligo that cover Vue basics and Vue components. 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 Anirudh Sanjeev’s Vue.js tutorial hosted on his personal blog.
He teaches how to build a Vue.js webapp with Webpack. 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 this invoice webapp tut 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 this article 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 career security 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.
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 introduction to Vue.js 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 download the source code 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 two hour introductory tut 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 other introductory video 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 Laracasts. 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 free Vue.js series with a playlist of 15 different videos. The original screencast playlist covers an older version of Vue, but there’s also a brand new Vue 1.0 playlist 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.
This is a two part series 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.
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 detailed Vue.js tutorial teaching how to build a bookmarking webapp. It runs on Firebase and Electron, 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 very lengthy tutorial 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.
The entire tutorial source code is available for free on GitHub and there’s even a live demo 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 The Majesty Of Vue.js. 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 on the Leabpub page 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.
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 Vue DevTools. It connects into your DevTools panel and helps you analyze, edit, and debug Vue.js syntax.
The project is completely free on GitHub 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.
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 this plugin boilerplate 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 new repos 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.
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.
Whenever you bump into an unsolvable issue, turn to one of these Vue.js communities for support. The best choice is Vue’s official forums hosted on the Vue.js website.
Most topics in the help forum 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 specific Vue.js subreddit 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 /r/webdev 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 small Vue.js chatroom hosted on Gitter. It’s like a Slack channel but dedicated to development talk. Issues are pulled from GitHub 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 Circle Of Life*
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 Vue.js documentation 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.