We won’t go too far into framework-by-framework comparisons here—that’s something the folks at Vue pulled together beautifully (and fairly) on their site, laying out what problems Vue is really good at solving and comparative pros and cons. However, we will talk about the things it does well on its own
Here’s a quick, high-level look at what you need to know about Vue.js so you can decide if it’s right for your front-end UI build.
Frameworks with more “scaffolding” can be more opinionated and often require more time to learn your way around. It’s a definite trade-off, because those full-featured frameworks can really boost productivity if you’re experienced with them. Vue has a lot smaller learning curve. It’s billed as being “approachable,” so if you’re already comfortable writing front-end code, all it’s going to do is make what you’re doing easier—not more complicated.
Think of a feature-packed framework like Ember. Vue is more easily compared with Ember’s specific object model and templating components than the entire framework itself. It’s specific to its core, giving developers more flexibility and control over the architecture as a whole.
IT’S BUILT SMALL, BUT WITH COMPONENTS THAT GIVE YOU ROOM TO GROW AS YOU NEED.
Vue.js is built on a minimal core—a bonus when you want a lightweight framework that’s not going to add a lot of bulk to your codebase—but has an “incrementally adoptable stack” that lets you build on it to scale up as much as you need, or only use the parts you need and integrate those parts right in with an existing application. Its components are a bit like the elements you’d find in the Web Components-based Polymer framework.
That core library is all about the “View”—the “V” in the MVC paradigm that focuses solely on what the users of an app or site sees and interacts with.
Excellent performance thanks to a lightweight virtual DOM.
These days, every hot new framework (React.js, Ember.js, and now Vue.js) seems to be incorporating a Virtual DOM. So what is a Virtual DOM and why is Vue’s typically faster?
As for what makes the Vue.js Virtual DOM “blazingly fast”—weighing in at 20 kb minified and compressed using a gzip algorithm at runtime, Vue.js is simply significantly lighter than its competitors (Ember 2.2.0 and Angular 2 are roughly 111 kb). As an added bonus, less out of the box code to worry about means optimization effort is significantly reduced.
Vue’s not just for client-side SPAs—it can be rendered on the server, too.
If you’re building an app where time-to-content is a priority and shaving a few hundred milliseconds off of an initial page load is a must, it can be worth the extra development time to implement SSR in a Vue app with Nuxt. On the other hand, if you’re only interested in the SEO boost, prerendering static HTML files for specific routes at build time is a much simpler solution, made available courtesy of the prerender-spa-plugin.
Vue lets you manage state as you scale with Vuex, Vue’s answer to React’s Flux/Redux.
State management becomes more important as you begin to scale an application. This is especially true for component based frameworks like Vue or React, where multiple components in an application are sharing data and interacting with one another. As the complexity of those interactions scale with the app, it becomes harder to understand or predict data state, and bugs are likely to follow.
Enter Vuex, an application design pattern and library that draws inspiration from Flux, Redux, and the Elm Architecture. In Vuex, shared state is managed in one central location—a global singleton that is synonymous with Flux’s “store.” This allows the component tree to act as a large “view” that any component can interact with to access state or trigger actions regardless of their location within the tree. Components can freely read data from the store, but can’t change it directly. Instead they inform the store which in turn updates state using Vuex functions called mutations. Put it all together and you have a scalable front-end that’s easier to manage.
IT SUPPORTS TYPESCRIPT FOR EVEN MORE PRODUCTIVITY.
Get cross-platform app development on par with React Native using Vue’s Weex collaboration.
Vue has collaborated with Weex to offer cross-platform UI framework development, which allows developers to use the same Vue component syntax to author components that are compatible both in the browser and natively on iOS and Android operating systems.
At the time of this article, Vue’s Weex collaboration is still maturing.