What Is Vue?

Vue is a model–view–ViewModel front-end JavaScript framework that strongly emphasizes the view layer and supports a component-based architecture.

The framework is an excellent option for creating complex single-page applications (SPA). It also has a progressive design that makes it incrementally adaptable, so developers don’t have to go all-in from the project’s outset. Instead, they can start small by bringing tools or features in as needed and gradually convert their application architecture to leverage Vue.

Vue’s Features

There’s a number of reasons Vue is so popular among the developer community. Specifically, Vue is well-loved because of its:

• Low learning curve
• Elegant programming patterns
• Comprehensive documentation
• Ability to enable the creation of lightweight applications
• Ease with which it can be incorporated into existing projects

Let’s dig into the core features behind these benefits.

Small Bundle Size

Compared to competing frameworks, Vue has a relatively small bundle size of 18KB. This makes the framework a performant choice for load time, as it can positively impact an application’s performance, Search Engine Optimization (SEO), and user experience.

Component-based Architecture

Because of Vue’s component-based architecture, large and complex sections of code can be broken up into smaller components. What’s more, everything in Vue can be written as a component that consists of HTML, CSS, and JavaScript. This promotes encapsulation, readability, simplicity, and separation of concerns.

It’s Feature-Rich, Right Out of the Box

Vue supports numerous front-end build tools with little-to-no configuration. For instance, Vue supports tools like Babel and Webpack. It also offers server-side rendering (SSR), state managers, configurable and user-friendly routing systems, unit tests, end-to-end testing libraries, and much more.

Ease of Use

Vue was built to offer a great developer experience. It leverages and modernizes the conventional approach to web programming, making it simple for any beginner to get started and feel at ease. It also has a low learning curve and thorough documentation.

Incremental Adoption

Vue doesn’t require complete integration of the framework, making it easy to incorporate into existing projects. So if you decide to use Vue, you can start implementing it in any part of your application.

Comparing Vue and the Most Popular Alternative: React

According to a Stack Overflow survey, 22% of developers say React is one of their most desired frameworks. While React has maintained this status for the last five years, Vue continues to climb the ranks taking third place this year.

Let’s take a look at some of the main differences and similarities between the two technologies.

Background and Development

React is an open-source front-end library developed and maintained by Facebook (Meta). The library offers developers flexibility, simplicity and a rich package ecosystem for building applications. With such a prominent organization backing React, it will likely continue to exist with long-term support.

Vue, on the other hand, was created by Evan You to improve on existing tools from the JavaScript ecosystem. He had a goal to develop a framework that combined the best front-end development strategies from Angular, Ember, and React, along with additional features to make developing web apps quicker, simpler, and overall a better experience for developers.

Vue and React Syntax

A significant difference between Vue and React is the construction of the view layer. Vue, by default, supports the usage of HTML templates. The usage of the traditional separation of concerns by dividing the logic into HTML, CSS, and JavaScript in Vue makes it simpler for front-end developers of all skill levels to understand how to build web applications. Some web designers are also knowledgeable in HTML templates, which helps facilitate communication between developers and designers.

In contrast, the default way of building the view layer in React is by using JSX, which merges HTML and CSS into JavaScript. This can erode the separation of concerns but can help co-locate all the relevant logic into one location.

Below are more key differences, benefits, and uses of each React and Vue:

While there are some differences, Vue and React share key characteristics. For instance, both platforms:

• Make use of a virtual DOM
• Are performant
• Leverage modular view components
• Consist of a core library and let companion packages handle issues like routing and global state management

Vue Usage and Popularity Compared to React

The Jet Brains Dev Ecosystem 2021 poll found that developer proficiency with the two frameworks, and frequency of use, were high, with Vue being on the rise. In a year-over-year comparison, Vue users increased from 34% in 2020 to 43% in 2021, while React users decreased from 64% to 49%.

The State of Vue in 2022

As Vue continues to gain popularity, more companies are adopting the framework into their organizations. Usage climbed from 10% in 2016 to 51% in 2021, among these users are large-scale companies like the media behemoth NBC and the American university MIT.

Large-Scale Companies Using Vue

Vue is popular with a number of large organizations. Adobe, Netflix, and Nintendo are some more well-known tech companies that use Vue. Here is a quick look at the tools these companies are leveraging Vue for:

• Adobe: Adobe Portfolio, which enables users to build custom websites via online portfolios.
• Netflix: The Netflix team uses Vue for certain internal apps, including some crucial cloud tools relating to the administration and operation of infrastructure.
• Nintendo: Vue is used by the video game giant on a few regional European websites, including those for Germany, France, Spain, and the UK. My Nintendo and the Nintendo rewards program for game accounts use Vue as part of its architecture.

Industries Utilizing Vue

According to Enlyft, Vue’s customers by industry are largely made up of Information Technology and Services (20%), Computer Software (15%), Internet (7%) and Marketing and Advertising (5%).

Apps Made with Vue

Vue’s powerful features, like its small bundle size, server-side rendering, and progressive adaptation, make it suitable for creating various applications. Some examples include:

• Single-page (SPA) applications, such as social networks
• Microblogging services, CMS, etc.
• Sites that need to support high load
• Online stores
• Information portals and dashboards
• Application forms

Vue Resources

Vue features a sizable number of educational resources and how-to guides, a thriving forum, international conferences, and an ever-growing presence on GitHub. The framework’s creator is also heavily involved in the community, and it’s not uncommon to get a response from him if you post a question or start a discussion on the official forums.

If you would like to learn more about the future of Vue, the current hiring demand for Vue developers, or about Nuxt / Nuxt3, I would highly encourage you to read the rest of the article my colleague Eduardo wrote here.