How to Learn Vue: 8 Vue.js Training Resources

There’s a relative newcomer to the world of JavaScript front-end frameworks that’s attracting a significant amount of attention among developers, Vue.js. In this blog post, I’ll tell you what all the buzz is about. We’ll look at the main points you need to consider to make an informed decision about whether to get on board with it. Finally, we’ll take a look at the best resources on the web to help you learn Vue.

Overvue

Several years ago, Evan You was working for Google and writing code with Angular. When he decided to make his own JavaScript framework, his goal was to make something that would be lightweight and easy to learn, but that would contain his favorite features of Angular.

In 2014, he released Vue.js, and it very quickly developed a following among Angular and React developers. In 2017, Vue surpassed React as the #1 most popular JavaScript project in Github. It continued that trend in 2018. React and Angular have been around longer and therefore have more downloads, but Vue is the fastest-growing and is predicted to surpass all others.

Like any front-end JavaScript framework, Vue’s goal is to make writing fast, dynamic, and capable JavaScript user interfaces easier. To accomplish this goal, a framework needs to address several important topics, including: learning curve, how to handle DOM manipulation, and extensibility. I’ll cover how Vue handles each of these individually.

Learning Curve: How Quickly Can You Learn Vue?

Vue is purposefully easy to get started using. When you’re leaning Vue, your first application is likely to be a single HTML file containing a script and a template. You can use a module bundler, a transpiler, npm, and all the other complexities of modern JavaScript tooling with Vue — but you also can just include it into your HTML file and start using it.

Once you get to know Vue, you’ll want to implement all the tooling bells and whistles and take advantage of modern JavaScript development practices. At that point, you can configure Webpack and your build script yourself or use Vue’s tooling setup tool, vue-cli.

The same goes for Vue Components. You’ll eventually want to develop Vue applications using components, but it’s just as valid to start out putting everything into a single file. Once you get to the point in working with Vue where it becomes painfully obvious that you need to break things into components, then you can learn how to do that.

Vue refers to this as an “incrementally adoptable architecture,” and it makes the learning curve for Vue much more gentle. 

DOM Manipulation with Vue

Like React, Vue makes use of a virtual DOM to manage updates to the browser DOM. A virtual DOM renders views in memory and compares its rending with what’s currently in the browser to determine how to change the browser window.

DOM manipulation can be slow, but in doing this comparison of virtual DOMs, a framework can find more efficient ways to update the browser DOM.

In Vue, you can write templates using HTML, JSX, or createElement methods. These templates can be rendered at run time or precompiled as part of the build process by using Vue’s template compiler. The choice to use on-the-fly compilation of templates makes Vue easy to drop into an existing application.

Vue tracks a component’s dependencies automatically and knows when a component needs to be re-rendered so that it can avoid re-rendering components that haven’t changed. This is an improvement over React’s method of re-rendering components automatically unless you tell it not to.

Extensibility

Frameworks have traditionally been on one side or the other in terms of how much functionality is part of the core framework. 

jQuery set the standard for being a small library with unlimited extensibility potential and countless independently-developed and maintained plugins. 

Dojo, on the other hand, is a giant framework with many modules that are all kept in sync and tested to work together.

Angular falls on the giant framework side, while React falls on the small framework side.

One benefit of a small core framework with a large third-party ecosystem is that you have more choice. A downside is that it’s up to you to assemble your tools into something that’s going to work, and then you have to constantly make sure everything’s up-to-date.

Vue is a small framework, with more built-in functionality than React but less than Angular. When you’re ready to move more advanced features such as centralized state, routing, and server-side rendering, Vue has several officially-supported add-on libraries for these functions in addition to a curated library of third-party packages that can be used with Vue.

Vue is Independent

Another key difference between Vue and the other two of the “big three” JavaScript frameworks is that Vue is the only one that didn’t come out of a giant corporation. Depending on how you feel about the giant corporations behind React and Angular (Facebook and Google, respectively), Vue’s lack of a corporate backer could be either good or bad. 

On the one hand, Vue’s software license (MIT) isn’t going to be changed in a way that could cause anyone patent issues. On the other hand, the fact that Vue doesn’t have the built-in user and developer base and financial support that Google and Facebook provide to their frameworks could tend to slow the adoption of Vue and make some developers nervous.

The Future of Vue

Vue 3 was announced last year and is scheduled to be released at some point in 2019. It will include class-based components, a simplified structure, and TypeScript support. These are features whose absence had previously pushed developers to other frameworks. With support for these modern JavaScript features, Vue is a solid framework that’s poised to join React and Angular in top-tier adoption by the world’s estimated 12 million JavaScript developers.

How to Learn Vue: 8 Vue.js Training Resources

If you’ve decided to use Vue, bookmark these resources to help speed up your learning.

Vue.js Official Guide

Visit the official guide for a full introduction to Vue. Note that in order to use the guide, you will need intermediate-level experience with HTML, CSS, and JavaScript. If you plan to use this resource, it is also helpful to have prior experience working with JavaScript Frameworks. If you do not feel confident with these prerequisite technologies, consider first starting at a more fundamental level with front-end development and then move into Vue once you have mastered the basics.

https://vuejs.org/v2/guide/

Vue.js Developers

Get tutorials, explore articles, and sign up for a weekly newsletter at vuejsdevelopers.com. The site includes articles and tips that you can access for free. The site also offers video courses ranging from $19 – $479. 

https://vuejsdevelopers.com/

Vue.js Feed

Vue.js Feed is an aggregator of Vue.js content. Browse by news, code, tutorials, plugins, and more.  

https://vuejsfeed.com/

Vue Mastery

Vue Mastery offers a free “Intro to Vue.js” course. You will learn the basics of Vue while building a webpage. 

https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance/

Vue CLI 3 Tutorial

This tutorial takes you step-by-step through Vue CLI 3, including the graphical user interface and the instant prototyping feature.

https://blog.logrocket.com/getting-started-with-the-new-vue-cli-3-43bcbe1ae759/

Free Vue Course: Develop Basic Web Apps

If you are ready to begin using components to build Vue applications, start with this free course to learn the basics. 

https://egghead.io/courses/develop-basic-web-apps-with-vue-js

Free Tutorial: Build a CMS-powered blog

If you’re ready to build a blog to plug into your website, this tutorial is the place to start. The tutorial takes you step-by-step through the process of developing a CMS-powered blog with Vue.

https://vuejs.org/v2/cookbook/serverless-blog.html

Instructor-Led Course: Vue.js Training

If you need to quickly learn Vue, consider learning live from an expert. After taking a 3-day Introduction to Vue.js class, you will have quickly gained practical skills to begin building applications with Vue. Webucator offers private, customized Vue.js classes for groups of any size. From a small team of developers looking to hit the ground running to a large organization with plans to build large-scale apps, the instructor can adapt the content to meet your goals.

https://www.webucator.com/webdev-training/course/beginning-vuejs-training.cfm

Blog Post Author: Chris Minnick

Chris Minnick is an author, instructor, and CEO of WatzThis, Inc. For more than 20 years, he has helped clients with the management and development of hundreds of web and mobile projects. In addition, Chris has authored and co-authored more than a dozen books including Coding with JavaScript for Dummies and Beginning HTML5 and CSS3 for Dummies. He has also developed video courses for Pluralsight, O’Reilly Video, Ed2Go, and Skillshare on topics such as mobile development and React.

About Webucator

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, Azure, Windows, Java, Adobe, Python, SQL, JavaScript, Angular and much more. Check out our complete course catalog.