How to Tell If Vue.js Is the Right Framework for Your Next Project

Want to learn Vue.js from the ground up? Get an entire collection of Vue books covering fundamentals, projects, tips and tools & more with SitePoint Premium. Join now for just $9/month or try our 7 day free trial.

Vue.js grew from a one-man project to a JavaScript framework everyone’s talking about. You’ve heard about it from your front-end colleagues and during conferences. You’ve probably read multiple comparisons between Vue, React, and Angular. And you’ve probably also noticed that Vue outranks React in terms of GitHub stars.

All that’s made you wonder whether Vue.js is the right framework for your next project? Well, let’s explore the possibilities and limitations of Vue to give you a high-level look at the framework and make your decision a little easier.

Please note that this piece will draw strongly on Monterail’s experience with Vue and other JavaScript frameworks. As a software development company, we’ve delivered around thirty Vue-based projects, and we strongly evangelize it among developers and businesses with initiatives like State of Vue.js and Vue Newsletter.

Let’s dive in.

Vue.js Overview

Back in 2014, the first public version of Vue.js was released. Its template syntax — similar to AngularJS — and a component-based architecture — similar to what React offered — made it approachable to JS devs at the time. Vue.js really took off only a year later, when it was discovered by the Laravel (popular PHP framework) community.

A few years later, it now records the highest satisfaction rating among all JS frameworks (91.2%), according to State of JS data. More and more devs report having heard of it and the wish to use it in the future. Companies like IBM, GitLab, and Adobe have already adopted Vue for their products.

According to Evan You, the creator of Vue:

The original goal was to “scratch my own itch,” to create a frontend library that I would enjoy using myself.

And apparently he and the whole Community managed to accomplish this mission. But what is so special about Vue that makes programmers want to use it?

This is what the project’s official website says:

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects.

There it is! Progressive and easy to pick up and integrate. But is that enough to make it your primary choice?

The Business Perspective on Vue

At Monterail, we believe that it should not make a substantial difference to a JavaScript programmer which framework or library is chosen for an app’s front end. Building blazing fast, beautiful, and maintainable products is not trivial at all, but if something is feasible, it’s feasible with any modern JS framework.

Yet, we love Vue.js and recommend it to our clients in most cases. That’s because Vue is great for a number of reasons. Let’s explore them.

When Your App Is Full of Animations and Interactive Elements

Vue offers a truly elegant and flexible API — not just for composable architecture for the front end, but also for seamless transitions between views. Transitions and animations enhance user experience, smoothing changes between states. Human brains love movement, so it’s an important part of modern websites and apps. Animating is key when we need to grab user attention, when we want to keep the user on our website for a longer stretch, or simply to make our product more fun.

The release of Vue 2.0 has introduced a lot more flexibility with regard to transitions. We now have more granular access to the transition hooks — which, in turn, makes it possible to leverage third-party libraries and deliver on complex animations while still using Vue at the core. That means there are tons of different ways of doing animations in Vue. All you need to do is apply a custom attribute and add some CSS magic. Vue provides us with <transition> and <transition-group> components already built in and based on CSS animations, allowing for both CSS and JS hooks. It also integrates easily with non-HTML elements — like SVG, for example.

In our portfolio, we have this really great example of a project with many different transitions, where we used Vue.js in tandem with Nuxt. We managed to deliver a beautiful UI for Easyship that was 37% more performant than their AngularJS version. Vue’s incredible possibilities in terms of transitions also make it a good choice for marketing campaign websites. Airbnb’s “Until we all belong” is another great example — an award-winning campaign delivered in six weeks, written completely with Vue.js.

When You Need Seamless Integration with Multiple Apps

Ease of integration was emphasized as a key Vue advantage by 81% of the developers polled for State of Vue.js 2017. Vue will work great for building both SPAs (single-page applications) and integrating with existing, server-rendered (multi-page) applications. Vue can be easily “dropped in” to pages rendered on the server — for example, by frameworks such as Rails, Laravel, or Express — to add some level of interactivity. Want some quick client-side form validation? No problem! Dynamically fetched content? Couldn’t be easier! And the list goes on …

In addition to the ability to build full-blown, single-page apps from the ground up, thanks to its webpack integration, Vue also offers a slew of modern features such as bundling, code-splitting or tree-shaking. And there have been many cases where we’ve used Vue only to sprinkle some interactivity on top of existing pages — and it’s just as performant. All we need to do is to load it in a <script> tag, and add Vue({ el: "#app" }) to the JS file. That’s our basis. Then we can add HTML templates, insert our data, and render components.

When You Want To Prototype Without Advanced Skills

The cool thing about Vue is that components can be written in pure HTML, CSS, and JavaScript. That makes it pretty easy to start with. On the opposite side we’ve got React, where HTML structures are expressed with JSX (which is also supported by Vue). HTML templates are a simpler alternative that feel are more natural to read and build code with.

Such an approach makes it easier for less experienced developers or designers to write code and even prepare some working prototypes. Vue’s highly praised documentation also makes it super friendly to beginners or less tech savvy entrepreneurs. Even if you get stuck at some point, it will help you out.

Vue applications don’t require much effort to set up. The Vue CLI (command-line interface) makes it a breeze to create a production-ready app setup. Not a big fan of the command line? No problem! Out of the box, Vue offers an amazing graphical user interface on top of its CLI, called Vue UI. In just a few clicks, you can set up your app, configure it to use the most popular features (such as Vuex, Vue Router or TypeScript) and much more. In addition to the flexibility of the initial app setup, there’s a growing number of plugins, allowing you to integrate popular libraries into your app just as easily.

Properly reflecting data changes in your views can be a tough and tricky task. Thankfully, Vue comes to the rescue with its built-in reactivity system — something that React, for example, sadly lacks (despite the name!). The system can be quite helpful in small apps, where the state is relatively simple and more complex state management solutions aren’t necessarily required. Therefore, we can easily track any changes in data provided through user inputs.

When You Want To Ship Your MVP Fast

The simplicity of Vue’s templates means also blazing fast coding speed — especially in comparison to Angular — both in terms of API and design. Setting up your project environment may take only one day with Vue. This is not exactly true for Angular, which was created mostly with large applications in mind.

With Vue you don’t have to reinvent the wheel every single time; you can reuse existing components to speed up development. According to Gilles Bertaux from Livestorm (who decided to use Vue for all their front-end components and delivered their first MVP in a month):

We didn’t have to spend a month setting everything up like with React. Vue had us operational in a week. We would never be at the point we are now if it weren’t for Vue. I’m 100% sure of that.

Other Things That Make Vue a Blast

I’d say the cases outlined above are kind of no-brainers, and we always recommend Vue.js when a client approaches us with something similar. But it doesn’t necessarily mean that Vue will work only in those cases (which nevertheless cover most of the projects we come across).

One of Vue’s key “selling points” is its progressiveness. That means you can progressively opt in to the framework, adding elements where needed. It makes scaling your app up and down much smoother, letting you stay flexible in terms of features, team setup, and tooling. This becomes very useful when scaling the app or rewriting it.

The last thing I want to mention here are the people making up the incredible community behind Vue. Thanks to them, Vue’s stack is much more consistent and well curated. There’s just one organization on GitHub and many of the Vue libraries — including Vuex, Vue-Router, or Vuepress — are authored by the same people that make up the Vue core team. They have one goal: to make the best framework that would be enjoyable to use. In the case of React, however, the story is somewhat different, as the interests of Facebook and the interests of the community are not exactly aligned at all times.

So Where’s the Catch?

Like all things, Vue comes with what we may consider drawbacks. Its flexibility, for one: while some developers enjoy the freedom that comes with Vue, others prefer to have only a single, correct way to build new components.

Another thing is Typescript support. While a lot has been already done to improve the experience, there’s still some work ahead. Changes are also coming in Vue 3.0:

In addition, the API is designed with TypeScript type inference in mind. The 3.x codebase will itself be written in TypeScript, and providing improved TypeScript support. (That said, usage of TypeScript in an application is still entirely optional.)

Finally, many businesses decide on React instead of Vue because of the smaller pool of available Vue.js programmers (Western Europe and the USA). There are many more job offers out there for React developers and, naturally, more React devs on the market. Companies may want to mitigate potential hiring problems by choosing the more popular library for their front end. On the other hand, Vue’s learning curve is really smooth, and any developer with JavaScript experience can quickly jump into a Vue-based project. We’ve seen juniors with no prior Vue experience get productive in a matter of hours. Therefore, I believe this should not be a deal breaker for any business.

Conclusion

There are multiple case studies from companies of different shapes and sizes out there, and I’m pretty sure the number will grow over the coming months. If you’d like to see some examples of Vue.js being used in real-world business cases, here’s a list of my favorite ones:

• How we do Vue: one year later by GitLab

• Consider VueJS for Your Next Web Project by Codeship

• Why we moved from Angular 2 to Vue.js (and why we didn’t choose React) by Rever

• Vue.js: the good, the meh, and the ugly by ASC Mexico

• More case studies from Adobe, Behance, Livestorm, and more in State of Vue.js by Monterail

I hope that this article was a good explanation of why and when Vue is a viable choice for a project. There are obviously other great frameworks out there that will fit your product well. Just remember that it shouldn’t matter how hip or popular a technology is. Do your research, as that’s the only way to make a truly educated decision.

Frequently Asked Questions about Vue.js