0% found this document useful (0 votes)
96 views

State of Vue - Js 2021 Report by Monterail

Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
96 views

State of Vue - Js 2021 Report by Monterail

Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 99

HOW IS VUE DOING

State of

IN THE JS LANDSCAPE?
Vue.js 2021

BROUGHT TO YOU BY MONTERAIL

IN COLLABORATION WITH THE VUE CORE TEAM


What’s Inside?

1 Preface 3

2 What’s New in Vue 5

3 Vue Today 9

4 Survey: How Developers use Vue 29

5 Vue Experts on Using Vue 53

6 Comparison with Other Technologies 73

STATE OF VUE 2021 REPORT 2


P re f ace

V
ue.js has been around since Evan You created it in 2014. Since
then, it has grown in popularity so much that it doesn’t need
an extensive introduction. Among the innumerable JavaScript
frameworks and libraries, it has managed to rise to the top and stay there.
Currently, there are 20 members in the Vue Core team, and 130k GitHub us-
ers benefiting from the technology.

There are people who’d use Vue for virtually any job, and there are those
that would rather leverage React or alternative frameworks. The bottom
line is: Vue, like all other technologies, has some ideal fits, and things
that can be fixed with workarounds.

The goal of this report is to give you a comprehensive overview of how


Vue can be used in developement scenarios, what you can expect from it,
and how it compares to other frameworks and libraries. If you're interest-
ed in how Vue can benefit your business check out the Vue for Business
2021 Report.

Let’s dive in!

Błażej Cepil Peter Curac-Dahl Marta Klimowicz


Editor and Writer Writer Quantitative Analyst
Senior Content Marketing Digital Marketing Specialist Head of Growth
Specialist at Monterail at Monterail at Monterail

Natalia Leśniak Eliza Neumann-Pluta


Designer Writer and Publisher
Web Developer and Designer Senior Content Marketing
at Monterail Specialist at Monterail

STATE OF VUE 2021 REPORT 3


P re f ace

Contributors

Tim Benniks Damian Dulisz Filip Rakowski

Director of Web Tech Lead at Coursedog, CTO & Co-founder


Development Vue.js Core Team Member, at Vue Storefront
at Valtech Paris Vue.js Consultant

Artur Rosa Samuel Snopko Natalia Tepluhina


Frontend Developer Head of Developer Staff Frontend Engineer
at Monterail Relations
at Storyblok

Tonina Zhelyazkova
Software Developer
at Wikimedia

STATE OF VUE 2021 REPORT 4


What’s new
in Vue 3
W hat ' s new in V ue . js 3

V
ue 3 was officially released in September, 2020. Version 3, ti-

tled “One Piece”, continues the anime-inspired naming conven-

tion of preceding versions. It also replaces Vue version 2 (2.0

“Ghost in the Shell” to 2.6 “Macross”) after almost four years of reliable and

rewarding performance.

What does the new version mean for businesses and programmers alike

who want to build using Vue? There are a lot of great new features, here

are some that stand out:

 The new version gets even smaller! Streamlined libraries result

in a lightweight package (15kb), weighing in around 50% less

than version 2.6. Output file sizes have also been reduced using

tree-shaking, which removes unused features from your code.

 It’s faster. Upgrades to many aspects of the framework, including

a rewrite of the Virtual DOM, have resulted in speed improve-

ments.

 Composition API does wonders for code organization by keeping

code for individual features together. At the end of the day this

means a cleaner code, easier to read and share.

 The Teleport feature allows you to render code from one com-

ponent to others, in different parts of the DOM tree. Previously

known as portals, Teleport is now built into Vue 3.

STATE OF VUE 2021 REPORT 6


W hat ' s new in V ue . js 3

Continuous updates and improvements of Vue, show that it remains

a solid technology choice for projects going into the future. Backward

compatibility with previous versions ensures stability when it comes to

updating and adding features to already completed projects. For a full

overview of new features and changes in Vue 3 check out the full intro-

duction document from Vue’s website.

And if you're interested, you can get a fresh perspective on how Vue.js

came to be in Honeypot's documentary. It takes a look at popular frame-

works from behind the scenes; including interviews with founders and

thought leaders such as Evan You, Taylor Otwell (Laravel), Thorsten Lün-

borg (Vue core team), Scott Tolinski (Honeypot/Level up), and more.

From the documentary you'll learn how Evan's time at Google contributed

to the creation of Vue. At first, Vue was just an idea to be more efficient

at work. As the project started gaining users Evan saw it as an outlet for

building something used in real life, as opposed to a concepts with no

immediate use case.

The workload and user base increased in parallel. With more people

using Vue, the feature requests and bug reports poured in. Evan starts

working on Vue full-time and needs to find ways to monetize his new

STATE OF VUE 2021 REPORT 7


W hat ' s new in V ue . js 3

framework. The result is the Vue we know — low entry barrier with the

stability and flexibility of more mature platforms. Check out the docu-

mentary yourself, we promise it’s fascinating.

STATE OF VUE 2021 REPORT 8


Vue Today
V ue today

L
et’s take a look at the numbers. How fast is Vue growing? Should

you learn it? Does it give you a competitive edge? Can you build

something sustainable with it?

We’ve reviewed over a dozen trusted sources and compared the results

to previous years as well as comparing Vue to other popular JavaScript

frameworks. This data allowed us to establish an overview and draw con-

clusions. (Kudos to Tanguy Krotoff who prepared this data comparison

that allowed us to peek into some historical records).

Although the numbers are not consistent across sources because of dif-

ferent survey samples, we can say with certainty: Vue is steadily growing

in popularity. Some of the sources we used also don’t consider the use

of Vue in China, where it’s quite popular. You should keep an eye on it if

you didn't know. It does provide some unique (compared to React) possi-

STATE OF VUE 2021 REPORT 10


V ue today

bilities like incremental implementation into an existing project, or ease

of creating and maintaining small apps (not to mention beginner-friend-

liness). You can (and in some cases maybe should) build something

long-lasting with it, since it’s only increasing in popularity and use where

in some cases the two main competitors have seen a slight downside

curve.

Vue manages to do all this without the corporate backing that Angular

(Google) and React (Facebook) have; they are funded by the community.

Taking all this into consideration allows us to conclude that Vue is alive

and kicking strong.

We did our best to compare Vue, React and Angular, but for various rea-

sons in some of the sources we could compare historically only with

AngularJS. Nevertheless, we hope this comparison will prove a valuable

overview.

Let’s dive into the details.

STATE OF VUE 2021 REPORT 11


V ue today

Statista

In February 2020, Statista asked 42,279 developers about their frame-

work of choice and these are the results. Vue came in 7th with 17.3% of

respondents opting for it. Not bad in itself, but we sure could use some

historical context.

Most used web frameworks among developers worldwide, as of


early 2020

jQuery 43.3%

React.js 36.9%

Angular 25.1%

ASP.NET 21.9%

Express 21.2%

ASP.NET Core 19.1%

Vue.js 17.3%

Spring 16.4%

Angular.js 16.1%

Django 14.2%

Flask 14.2%

Laravel 11.1%

Source:
Statista

STATE OF VUE 2021 REPORT 12


V ue today

HackerRank

In 2020, HackerRank reached out to 116,648 developers to ask about the

same thing Statista did, but they also compared the results with previous

years. Vue came in 8th but, it showed a steady growth of interest among

the HackerRank-related developers.

2020 2019 2018

AngularJS 1 1 1

React 2 2 3

Spring 3 3 2

Django 4 6 6

ExpressJS 5 4 4

ASP 6 5 5

.NETCore 7 7 7

Vue.js 8 9 10

Ruby on Rails 9 8 8
Source:
JSF 10 10 9
HackerRank

STATE OF VUE 2021 REPORT 13


V ue today

BuiltWith

Looking at the current (January 2021) Internet landscape, we clearly see

that Vue, although not being the most widespread, positions itself re-

markably well. It has more live sites than Angular and the ratio between

live and live+historical websites is the best in the comparison, meaning

that projects that go online with Vue, tend to stay out there.

Number of websites built with

5 000 000

4 000 000 4 379 299

3 000 000

2 609 160
2 000 000

1 846 100

1 000 000 1 189 351

236 577
115 633

Vue React Angular

Total live sites

Live and historical


Source:
BuildWith

When it comes to a share in top websites, Vue built more of those in the

top 1 million than Angular. And while it built fewer big-hitters in the top

10k when compared to React, it still has quite a significant share.

STATE OF VUE 2021 REPORT 14


V ue today

Share in top sites

0.4

37.68%

0.3

0.2
20.08%
19.01%

0.1
11.17%

8.71% 8.18%
4.99%
1.47% 4.33%

Vue React Angular

% of pages in the top 1m

% of pages in the top 100k

% of pages in the top 10k


Source:
BuildWith

Live and Top Top Top


Total live
historical 1M 100 K 10 K

4.99% 11.17% 19,01%


Vue 1 189 351 1 846 100
49 870 11 167 1 901

8.71% 20.08% 37.68%


React 2 609 160 4 379 299
88 078 20 807 3 768

1.47% 4.33% 8.18%


Angular 115 633 236 577
14 695 4 331 818

STATE OF VUE 2021 REPORT 15


V ue today

NPMtrends

NPMtrends says that the use of Vue is growing steadily, maybe less so

than React but Vue has more GitHub stars. Although not the best metric

for judging a framework’s usability, it shows the high engagement of the

Vue community.

Source:
NPMtrends

STATE OF VUE 2021 REPORT 16


V ue today

NPM-stat

NPM-stat shows different numbers and somehow different trends than

NMPtrends but one thing is certain: the use of Vue packages goes up and

is almost the same as Angular.

Source:
NPM-stat

STATE OF VUE 2021 REPORT 17


V ue today

SimilarTech: market share & web


usage statistics

A look at SimilarTech crawls reveals some intriguing trends. The num-

ber of websites and unique domains built with Vue continues to grow

while its competitors face some slowdowns. The numbers for 2020 don’t

match those found on BuiltWith, but the historical context here clearly

shows a growth trend for Vue.

SimilarTech: number of websites

1 250 000 Vue


React
AngularJS

1 000 000

750 000

500 000

250 000

0
2018 2019 2020 2021
Source:
SimilarTech

STATE OF VUE 2021 REPORT 18


V ue today

SimilarTech: unique domains

300 000 Vue


React
AngularJS

200 000

100 000

0
2018 2019 2020 2021
Source:
SimilarTech

Number of websites

2021/01/07 2020/09/22 2019/12/12 2018/12/16

Vue 220 538 195 214 157 831 54 881

React 1 126 095 1 005 214 1 069 073 420 066

AngularJS 384 515 378 038 517 701 325 339

STATE OF VUE 2021 REPORT 19


V ue today

Unique domains

2021/01/07 2020/09/22 2019/12/12 2018/12/16

Vue 140 184 121 748 91 509 40 033

React 313 355 296 347 287 997 196 048

AngularJS 188 734 189 590 203 614 171 570

GitHub dependents

Again, the number of apps that wouldn't run without Vue grows steadily

over time.

Number of dependents

80 000 Vue
React
AngularJS
Angular
60 000

40 000

20 000

0
2018 2019 2020 2021

Source:
npmJS

STATE OF VUE 2021 REPORT 20


V ue today

Number of dependents

2021/01/07 2020/09/20 2019/12/12 2018/12/16

Vue 36 179 32 101 21 575 9 792

React 66 033 61 870 48 718 32 331

AngularJS 4 125 4 112 3 959 3 693

Angular 2+ 11 246 10 873 9 610 7 555

Stack Overflow surveys


Stack Overflow surveys its users each year, asking about their most and

least favorite frameworks. While the available survey questions are not

consistent over the years, the results confirm the upward popularity trend

for Vue (and downward for Angular).

Stack Overflow survey: framework popularity

40% Vue
React
AngularJS

30%

20%

10%

0
2018 2019 2020
Source:
Stack Overflow

STATE OF VUE 2021 REPORT 21


V ue today

2020 (65,000 developers)

Popularity Loved Dreaded Wanted

Vue 17.3% 66.0% 34.0% 16.4%

React 35.9% 68.9% 31.1% 22.4%

AngularJS 16.1% 24.1% 75.9% 7.7%

Angular 25.1% 54.0% 46.0% 10.6%

2019 (+90,000 developers)

Popularity Loved Dreaded Wanted

Vue 15.2% 73.6% 26.4% 16.1%

React 31.3% 74.5% 25.5% 21.5%

AngularJS/
30.7% 57.6% 42.4% 12.2%
Angular

2018 (+100,000 developers)

Popularity Loved Dreaded Wanted

Vue - - - -

React 27.8% 69.4% 30.6% 21.3%

Angular 36.9% 54.6% 45.4% 14.3%

STATE OF VUE 2021 REPORT 22


V ue today

Stack Overflow questions

The questions asked on Stack Overflow increased in numbers for Vue

and React. More so for React, but this could be explained by the fact

that Vue is more beginner-friendly and is lauded for its comprehensive

documentation.

Source:
StackOverflow

STATE OF VUE 2021 REPORT 23


V ue today

JetBrains survey

In 2020, JetBrains released a new report based on the answers of 19,696

developers from 18 countries. This is the only source that shows a de-

creasing popularity of Vue, but the reason for that might be the demo-

graphic background of the respondents. Since 2017, the majority of them

are employed full-time in a company of 51-500 people, working in 2-7

people teams. It seems that React is most often used in such environ-

ments.

JetBrains survey: framework popularity (regular use)

80% Vue
React
AngularJS
Angular
60%

40%

20%

0
2017 2018 2019 2020

Source:
JetBrains

STATE OF VUE 2021 REPORT 24


V ue today

2020 2019 2018 2017

Developers 19 696 7 000 6 000 5 000

Vue 32% 39% 33% 20%

React 64% 54% 60% 49%

AngularJS 11% 14% 21% 44%

Angular 24% 23% 20% 22%

Google Trends
Google Trends gives us quite a broad spectrum of interests but for

gauging popularity it’s one of the most trusted sources out there. And it

confirms the trend: Vue is going up (as well as React).

Source:
Google Trends

STATE OF VUE 2021 REPORT 25


V ue today

Social media

And one last place we can look at to see how Vue is doing is social me-

dia, namely Reddit and Twitter — virtually two of the most authoritative

social sources out there. Looking at the number of followers over the

years, it’s clear that Vue continues to get traction.

Reddit followers

Source:
Frontpagemetrics

STATE OF VUE 2021 REPORT 26


V ue today

Twitter followers (k)

500 Source: Vue


Front Page Metrics React
Angular

400

300

200

100

0
2018 2019 2020 2021
Source:
Twitter

2021/01/07 2020/09/22 2019/12/12 2018/12/16

Vue 196.8 K 183.8 K 149.3 K 102 K

React 451.1 K 421.8 K 355.5 K 278 K

Angular 376.8 K 370 K 345.9 K 304 K

STATE OF VUE 2021 REPORT 27


V ue today

Summary
So there you have it — all the sources (barring JetBrains) tell us that Vue

is used, liked, and will be used with success in the future. It has some

unique benefits to offer and the community is exceptionally engaged.

Add to this the popularity in China (that flies a bit under the radar of our

tools) and the fact that Vue grows its impact without corporate backing,

and you have a framework that is here to stay.

STATE OF VUE 2021 REPORT 28


Survey:
How Developers
use Vue
S urvey : H ow D evelopers use V ue

L
ike the previous editions, the 2017 and 2019 State of Vue reports,

this new, updated version allows us to learn more about the

community of professionals using Vue.js for their projects and

what they think lays ahead of Vue after the release of Vue 3.

Using an online survey, we received answers from 1635 software devel-

opers and Chief Technology Officers which we then examined to gain

insights on:

 the popularity of Vue.js in their organizations,

 the reasons behind adding Vue to their tech stack and the doubts

that accompanied their decision,

 the solutions they choose when developing Vue projects,

 the other libraries/frameworks and languages they use for fron-

tend and backend development,

 their predictions and expectations for the future of Vue.js.

Report Data

All the data that was used to draft the report was collected from a survey

conducted over a five-week period between December 2020 and January

2021. We received 1,635 responses, mainly from software developers

and Chief Technology Officers (92.4% of the respondents held one of

those roles).

STATE OF VUE 2021 REPORT 30


S urvey : H ow D evelopers use V ue

Key Insights

90%
of respondents claim there is a very
high probability of them using Vue.js
for their next project.

93%
of the survey participants used the
official documentation to learn about
Vue and 76% pointed to great documen-
tation as the biggest advantage of
the framework.

60%
decided to add Vue to their tech
stack because it’s a pretty easy
framework to start with.

56%
of the survey participants believe
Vue.js will become even more popular
within their organizations in the
next 12 months.

STATE OF VUE 2021 REPORT 31


S urvey : H ow D evelopers use V ue

Survey Questions & Answers

What was the most important reason behind adding Vue.js to


the technology stack?

More than half of the respondents describe Vue.js as easy to start with.

This percentage has been pretty steady: both in the 2017 and 2019 sur-

vey - 59% of the respondents chose this reason behind adding Vue.js to

their technology stack.

THE MOST IMPORTANT REASON BEHIND ADDING VUE.JS TO THE TECH


STACK

60%
Vue.js is pretty easy to start with 59%
59%

24%
A need to update our tech stack 27%
22%

6%
The team wanted to test it 8%
10%

It was inherited with the project 5%

5%
Other 3%
9%
2021
2019
* Percentages do not sum up to 100% due to the multiple choices. 2017

STATE OF VUE 2021 REPORT 32


S urvey : H ow D evelopers use V ue

What were the doubts you and your team had when planning
to add Vue.js to your tech stack?

Over 51% of the respondents say that the lack of former Vue-related

experience was their main doubt when planning to add Vue.js to their

tech stack. This number is pretty similar to the one we saw in 2019 and

in 2017 when the answer was picked by 49% and 45% of the people we

polled respectively.

DOUBTS WHEN ADDING VUE.JS TO TECH STACK

51%
Lack of former Vue.js experience
among employees 49%
45%

36%
Uncertainty regarding its future 36%
45%

21%
Doubts about its scalability 19%
15%

13%
Other 14%
12%
2021
2019
* Percentages do not sum up to 100% due to the multiple choices. 2017

STATE OF VUE 2021 REPORT 33


S urvey : H ow D evelopers use V ue

What are the biggest advantages that Vue.js brings to your


organization?

For the third time in a row, we see similar results for the key benefits of

bringing Vue.js to organization. There are no doubts that great documen-

tation, ease of integration, and progressiveness support the choice of

this framework.

THE BIGGEST ADVANTAGE

76%
Great documentation 75%
45%

75%
Ease of integration 76%
81%

53%
Progressiveness 50%
49%

50%
Performance 51%
56%

40%
Highly involved community 36%
29%

3%
Other 5%
4%
2021
2019
* Percentages do not sum up to 100% due to the multiple choices. 2017

STATE OF VUE 2021 REPORT 34


S urvey : H ow D evelopers use V ue

Is there anything you’re missing when it comes to Vue.js?

Over 500 respondents shared their suggestions on what from the Vue.js

framework. Most of the replies were related to individual needs of proj-

ects or developer’s skills. However, we have managed to segment some

of them to provide a clearer overview of the business's and developers'

needs.

It’s worth observing that when we asked the same question in 2019, the

most frequent reply was the need for a mobile solution. That answer

was given by over 130 respondents, over two times more than this year’s

most popular reply. This year, the lack of a native mobile solution was

mentioned only by 16 people, so it seems that one of the most important

needs has been addressed with a Vue Native solution.

This year, the need for TypeScript support became the most popular an-

swer to this question, with 63 people expressing this need.

14 respondents brought up the need for better documentation, along with

real-life examples of Vue.js' development, and case studies. Again, it’s

worth mentioning that in 2019 this need was expressed more widely – 46

respondents mentioned it in their replies. This suggests that the docu-

mentation is being improved, though there’s still room for improvement

in this area. Similarly, in 2019, 35 people suggested improvement of the

learning resources. However, this time that need was expressed by less

than 10 people, which may mean that not only the learning resources

STATE OF VUE 2021 REPORT 35


S urvey : H ow D evelopers use V ue

have been improved, but also that a growing number of developers are

more advanced in Vue itself, therefore they don’t need that much addi-

tional help.

One of the new needs expressed in this year’s edition of the survey is

connected to Vue 3, released on the 18th of September 2020. 11 respon-

dents mentioned the lack of easy migration to the higher version of the

framework.

The same number of respondents expressed the need for IE 11 support

(one of them adding “Yes, it’s an enterprise”).

STATE OF VUE 2021 REPORT 36


S urvey : H ow D evelopers use V ue

What’s the probability of you using Vue again for a new


project?

Almost 90% of respondents claim there is a very high probability of

them using Vue.js for their next project.

PROBABILITY OF USING VUE IN AN UPCOMING PROJECT

2021
83%
2019
2017 74% 74%

6% 5% 4% 16% 18%
13%
2% 1% 2% 2% 1%
0%

Definitely no Definitely yes

STATE OF VUE 2021 REPORT 37


S urvey : H ow D evelopers use V ue

How long has Vue.js been in use within your organization?

In 2019, 11% of the respondents had been using Vue.js for over two

years. This year that percentage has grown to 42,1%, showing that Vue

is continuously being used within the companies.

HOW LONG HAS VUE.JS BEEN IN USE WITHIN YOUR ORGANIZATION?

41%
More than 2 years 11%
2%

35%
1-2 years 37%
19%

14%
6-12 months 33%
34%

8%
Less than 6 months 19%
45%
2021
2019
* Percentages do not sum up to 100% due to the multiple choices. 2017

STATE OF VUE 2021 REPORT 38


S urvey : H ow D evelopers use V ue

What resources do you use to learn about Vue.js?

Like twice before, the official documentation continues to be the most

popular resource among those willing to improve their knowledge of the

framework.

LEARNING RESOURCES

93%
Official documentation 94%
94%

79%
Online articles and blogs 81%
72%

75%
Online communities (eg. StackOver-
flow, Vue Forum) 77%
72%

55%
Online courses 51%
41%

29%
Conferences and meetups
24%

27%
On-the-job training 24%
22%

16%
Books 17%
12%

STATE OF VUE 2021 REPORT 39


S urvey : H ow D evelopers use V ue

3%
Bootcamps
1%

2%
Other
3%
5% 2021
2019
* Percentages do not sum up to 100% due to the multiple choices. 2017

Do you think the number of employees using Vue.js in your


organization will increase in the next 12 months?

Over 55% of respondents are convinced Vue.js is going to get even more

popular in their organization within the next 12 months.

INCREASE IN THE NUMBER OF EMPLOYEES USING VUE.JS

2021
2019
2017 34% 35% 33%

25% 22% 24% 22% 25%


21%

11% 9% 11% 9% 10% 11%

Definitely no Definitely yes

STATE OF VUE 2021 REPORT 40


S urvey : H ow D evelopers use V ue

In Vue.js projects over the past year, which of the following


have you used for JavaScript?

JAVASCRIPT LANGUAGE OVER THE PAST YEAR

78%
ES2015+ (e.g. with Babel)
86%

39%
Plain Javascript (ES5)
36%

38%
Typescript
20%

2%
Other
2%

2021
* Percentages do not sum up to 100% due to the multiple choices. 2019

STATE OF VUE 2021 REPORT 41


S urvey : H ow D evelopers use V ue

In Vue projects over the past year, which of the following have
you used to write HTML?

HTML LANGUAGE OVER THE PAST YEAR

String templates 85%


(i.e. written in strings within JavaScript or in the
<template> of .vue files) 82%

In-DOM templates 38%


(i.e. written in HTML files or backend view files,
e.g. .ejs, .php, .erb) 44%

Hyperscript in a render function 12%


(e.g. h(‘div’, { class: ‘container’ }, ‘Hello’)
10%

9%
JSX in a render function
9%

2021
* Percentages do not sum up to 100% due to the multiple choices. 2019

STATE OF VUE 2021 REPORT 42


S urvey : H ow D evelopers use V ue

In Vue.js projects over the past year, which of the following


use cases for Vue have you had?

VUE USE CASES OVER THE PAST YEAR

Control the entire frontend, in a 85%


single-page application (SPA) 85%

35%
Add extra interactivity to a static site
36%

Enhancing existing apps and


33%
websites

Control the entire frontend, with 31%


server-side rendering (SSR) 23%

Add extra interactivity to a backend 28%


application 33%

Universal apps 24%

JAMstack (static generation) 19%

2021
* Percentages do not sum up to 100% due to the multiple choices. 2019

STATE OF VUE 2021 REPORT 43


S urvey : H ow D evelopers use V ue

In Vue projects over the past year, which of the following have
you used for routing?

ROUTING TECHNOLOGY OVER THE PAST YEAR

89%
Vue Router
85%

7%
Server-side routing
9%

None - some projects had only 3%


1 page 4%

1%
Another client-side library
2%

2021
* Percentages do not sum up to 100% due to the multiple choices. 2019

STATE OF VUE 2021 REPORT 44


S urvey : H ow D evelopers use V ue

In Vue.js projects over the past year, which of the following


have you used for global state management?

GLOBAL STATE MANAGEMENT OVER THE PAST YEAR

88%
Vuex
87%

None — some projects had no global 18%


state 20%

10%
Shared state on $root
12%

2%
Redux
2%

6%
Other
4%

2021
* Percentages do not sum up to 100% due to the multiple choices. 2019

STATE OF VUE 2021 REPORT 45


S urvey : H ow D evelopers use V ue

In Vue.js projects over the past year, which of the following


have you used to scope CSS?

CSS SCOPING OVER THE PAST YEAR

82%
The “scoped” attribute in .vue files
79%

A manual scoping strategy (e.g. 29%


BEM) 31%

None — some projects had 100% 22%


global CSS 25%

9%
The “module” attribute in .vue files
10%

5%
Some other scoping strategy
5%

2021
* Percentages do not sum up to 100% due to the multiple choices. 2019

STATE OF VUE 2021 REPORT 46


S urvey : H ow D evelopers use V ue

In your last Vue project, how much of the CSS was global?

CSS GLOBALISATION

44%
1–20%
38%

17%
81–100%
19%

16%
21–40%
17%

12%
61–80%
13%

11%
41–60%
13%

2021
* Percentages do not sum up to 100% due to the multiple choices. 2019

STATE OF VUE 2021 REPORT 47


S urvey : H ow D evelopers use V ue

Which CLI tool did you use to create your last Vue project?

CLI TOOLS

Vue CLI 3 53%


(i.e. @vue/cli-service is listed in your package.json)
51%

16%
Nuxt
9%

None - I wrote my own build


10%
configuration
(i.e. with Webpack, Rollup, Browserify, Parcel, etc) 19%

8%
Quassar
2%

None - I just dropped Vue in with a 4%


script tag 5%

An official template created with Vue


4%
CLI 2
(e.g. vue init webpack my-project) 8%

A 3rd-party template created with


1%
Vue CLI 2
(e.g. vue init simulatedgreg/electron-vue my-project) 2%

4%
Other
3%

2021
* Percentages do not sum up to 100% due to the multiple choices. 2019

STATE OF VUE 2021 REPORT 48


S urvey : H ow D evelopers use V ue

What libraries/frameworks do you use for frontend develop-


ment?

LIBRARIES OR FRAMEWORKS

97%
Vue.js 96%
33%

28%
jQuery
42%

27%
ReactJS 26%
24%

12%
Angular (v2 and above)
12%

8%
Angular JS
13%

2%
Backbone.js 4%
6%

5%
Other 7%
11%
2021
2019
* Percentages do not sum up to 100% due to the multiple choices. 2017

STATE OF VUE 2021 REPORT 49


S urvey : H ow D evelopers use V ue

What languages does your organization use for backend de-


velopment?

LANGUAGES FOR BACKEND DEVELOPMENT

50%
Node.js 53%
45%

42%
PHP 44%
53%

20%
Java 19%
18%

20%
C#/.Net 19%
17%

19%
Python (Django, Flask, etc.) 19%
17%

8%
Ruby (on Rails or otherwise) 10%
10%

7%
Other
10%
2021
2019
* Percentages do not sum up to 100% due to the multiple choices. 2017

STATE OF VUE 2021 REPORT 50


S urvey : H ow D evelopers use V ue

Demographic
We surveyed 1,635 software developers, CTOs, and other technical roles
familiar with Vue from 114 countries.

16.2% USA
7.6% Germany
7.4% France
5.7% Brazil
5.4% UK
India, Italy, Poland, Canada, Netherlands, Spain,
Between
Russian Federation, Austria, Sweden, Japan, Ukraine,
3.5% - 2.8%
Belgium, Mexico, Turkey, Nigeria, Switzerland
26% Other

STATE OF VUE 2021 REPORT 51


S urvey : H ow D evelopers use V ue

11.5%

Company size
19.1%
Small and Medium-Sized (<100)
Medium Enterprise (101-1.000)
69.4%
Enterprise (1.000+)

3.2%

Team size 10.6%


(number of teammates)

13.8%
Small team (2-10 people)
Solopreneur
Medium team (11-25 people) 72.4%

Large team (25+ people)

4.5%

7.2% Role in
organization
14.3% Software developer
Chief of Technology Officer

74% Other
Project Manager

STATE OF VUE 2021 REPORT 52


Vue Experts
on Using Vue
V ue E x perts on U sing V ue

W
e've reached out to experts working on some exciting Vue-
based projects, to pick their brains a bit. They answered five
questions that will help you gauge how Vue is used and can
be used. The questions we asked were:

 Why do you use Vue and what do you like most about it?

 A new version of Vue was recently released — are you planning


to adopt it anytime soon?

 What's the most exciting project you've done with Vue?

 For what type of projects would you recommend to try out Vue?

 What is the most burning problem you'd see Vue as a developing


framework tackling next?

Opening this section is a comment from Damian Dulisz — member of the


Vue Core Team — about the new Composition API and its implications.

Here you'll find a lot of insightful information, so let's jump in!

STATE OF VUE 2021 REPORT 54


V ue E x perts on U sing V ue

Damian Dulisz
Tech Lead at Coursedo
Vue.js Core Team Member
Vue.js Consultant

@DamianDulisz

The introduction of the Composition-API is what excites me the

most. Commonly, when people talk about Composition-API, they

mention improved application scalability and flexibility. That’s

true, of course, but the benefits of the Composition-API don’t end

there.

From a library author perspective, the Composition-API also en-

ables completely new ways of architecting 3rd-party plugins. It is

now easier than ever to create libraries that use Vue’s reactivity in

a way that is more maintainable and flexible. Gone are the hacks

of using a Vue instance behind the scenes, which introduced un-

necessary complexity. I’m pretty sure we will see new state man-

agement libraries as alternatives to Vuex.

Another change that I believe will impact the library landscape is

that Vue itself now consists of multiple packages that have dif-

ferent responsibilities: compiler-core, compiler-dom, or reactivity

and others. It’s now easier than ever to create an alternative com-

pile target, which means we might see some new mobile (native)

solutions like React Native!

STATE OF VUE 2021 REPORT 55


V ue E x perts on U sing V ue

GitLab
Natalia Tepluhina
Staff Frontend Engineer
at GitLab

@N_Tepluhina

GitLab is a complete DevOps


platform, delivered as a single
application.

Why do you use Vue and what do you like most


about it?

If we speak about the company, GitLab uses Vue because it was the best

framework for the iterative migration from jQuery for the setup we had.

We were able to make parts of the page interactive without rewriting the

whole frontend from scratch.

If we speak about personal reasons, I use Vue because it’s one of the

most flexible and progressive tools I know. You can adjust it to almost

any case, be it a small app to validate a form or a full-featured enter-

prise-size application.

A new version of Vue was recently released -


are you planning to adopt it anytime soon?

STATE OF VUE 2021 REPORT 56


V ue E x perts on U sing V ue

Yes, but ‘anytime soon’ may be a good amount of time if we speak about

a big company :) GitLab plans a migration but this will take time. I would

say the most impressive changes are performance improvement and

Composition API.

What’s the most exciting project you’ve done


with Vue?

Not that I have done it alone but GitLab’s codebase is really exciting to

work with.

For what type of projects would you recommend


to try out Vue?

Honestly, I don’t think there are any limiting factors. Try it for whatever

you plan to build.

What is the most burning problem you’d see


Vue as a developing framework tackling next?

Right now it would be aligning the ecosystem of plugins and libraries to

support both 2.x and 3.x versions.

STATE OF VUE 2021 REPORT 57


V ue E x perts on U sing V ue

Valtech
Tim Benniks
Director of Web Development
at Valtech Paris

@timbenniks

Valtech is a global digital timbenniks

agency focused on business


transformation.

Why do you use Vue and what do you like most


about it?

I stumbled into using Vue for work. I didn’t plan on using it as I have a

Vanilla JS background. But, when I saw it in action I knew it was a game

changer. More accessible and performant than its competition, Vue saw

a fast adoption at my place of work. What I like most about Vue is that

it has a shallow learning curve and it allows you to use it in different

forms: from agnostic native-like web components to SPA implementa-

tions. Working in enterprise for huge global clients, this is a must. I lead

teams of developers with different skill sets and cultures. Vue is easy to

learn, it is just strict enough to make junior developers successful and

it is flexible enough to make architects happy. It’s basically a slam dunk

in my type of work.

STATE OF VUE 2021 REPORT 58


V ue E x perts on U sing V ue

Vue 3 was recently released - are you


planning to adopt it anytime soon? If so,
what’s the most important change you've
noticed?

Personally I have used it for a while and I think the most important

change is the flexibility of composition API, performance with Proxies

and TypeScript support.

As I work in enterprise, software systems are large and having stable


versions of tools is paramount. Therefore we will wait a little to jump on
the new version train. However, on smaller, new projects, we are already
using Vue 3.

What’s the most exciting project you’ve done


with Vue?

The L'Oréal WSF (Website Factory) program is the new vision for L’Oréal’s

digital landscape. L’Oréal is huge and they have an impressive number of

websites up and running.

The WSF program aims to deliver high-quality modern websites. All the

new sites will share the same tech stack. From continuous integration,

hosting, CDN, CMS platform to front-end code and its toolsets. Projects

have the same foundation while the design and tone of voice are unique

for each website.

My job in the WSF was that of global front-end architect. We decided

Vue.js would be used for every L’Orèal website as it enabled us to reach

accessibility, SEO and performance KPIs relatively easily. With Vue.js at

STATE OF VUE 2021 REPORT 59


V ue E x perts on U sing V ue

its center, this is one of the biggest Vue.js implementations globally.

There are a bunch of other cool projects which I can’t talk about. They are

in the luxury space and we do not disclose our clients.

For what type of projects would you recommend


to try out Vue?

Vue.js has two applications that I think work very well. First of all, when

you have a headless setup where all dependencies are Cloud Native. In

this case I would suggest using Nuxt.js in either Universal mode or static

with jamstack.

It’s other application is with enterprise systems like Sitecore or Adobe

AEM. Vue is in the unique position that you do not have to use it as an

SPA per se. You can also use Vue to provide a native web component like

experience which could then replace the native frameworks these enter-

prise systems come with. This is not really possible with the competition.

However Svelte is also a good contender here.

What is the most burning problem you’d see


Vue as a developing framework tackling next?

I had the privilege to speak with Evan You the other day and he mentioned

that the developer experience is a point of interest. Front-end technolo-

gy is starting to catch up with JAVA and dotnet and compile times are

starting to be slow. By creating Vite, the Vue team is making big strides

in compilation performance and hot module reloading. Hence, a better

developer experience.

STATE OF VUE 2021 REPORT 60


V ue E x perts on U sing V ue

Storyblok
Samuel Snopko
Head of Developer Relations
at Storyblok

@SamuelSnopko

Storyblok is a headless CMS that


helps your team manage content
for every use-case: corporate
websites, e-commerce, helpdesks,
mobile apps, and screen
displays.

Why do you use Vue and what do you like most


about it?

I like the learning curve - in my opinion, Vue is the natural step in evo-

lution, not a revolution like React and other frameworks. It accepts the

HTML and CSS standards. If somebody masters HTML and CSS, the JS

& Vue is very easy to adopt.

A new version of Vue was recently released -


are you planning to adopt it anytime soon?

I am not planning on adopting it soon. I will wait for Nuxt 3, as I don’t

have any projects with pure Vue. Meanwhile however, I will keep learning

STATE OF VUE 2021 REPORT 61


V ue E x perts on U sing V ue

in VueMastery or somewhere else to see what has changed.

What’s the most exciting project you’ve done


with Vue?

From what I am allowed to share :)

www.sz-brandstudio.de

www.advertorial.sueddeutsche.de

For what type of projects would you recommend


to try out Vue?

I’d recommend it for any project. Vue is mature enough to handle any-

thing on the Web.

What is the most burning problem you’d see


Vue as a developing framework tackling next?

Probably transitioning from Vue2 to Vue3 - this would mean also updat-

ing all plug-ins, packages and tools all around. However, this will also

bring a fresh start to many solutions and projects in the future

STATE OF VUE 2021 REPORT 62


V ue E x perts on U sing V ue

Monterail
Artur Rosa
Frontend Developer
at Monterail

@rosickeyy

Monterail is a full-service
software development company
with 110+ experts on board
delivering meaningful software
for start-ups, SMBs and
enterprises.

Why do you use Vue and what do you like most


about it?

I use Vue because it is a very flexible framework that allows you to create

applications in a declarative way. Flexibility often comes with a high level

of difficulty, but Vue has great documentation and a style guide, which

makes it hard to use it incorrectly.

What I like most about Vue is that you don’t have to actually know the

framework to read the code of Vue components. Basic knowledge of

HTML, CSS and JS is enough to introduce simple changes in Vue appli-

cations. Thanks to this, even less experienced developers can easily start

STATE OF VUE 2021 REPORT 63


V ue E x perts on U sing V ue

working on a Vue project.

Are you planning to adopt Vue 3 anytime soon?

Definitely. I’m watching the Vue ecosystem carefully, especially the tools

we use in our projects. As soon as Vue 3 is stably supported by these

tools, we can start migrating some of the projects.

I already had the opportunity to use Vue 3 on small internal projects and

one of the changes I am very happy about is the better adoption of Type-

Script by the Vue community.

What’s the most exciting project you’ve done


with Vue?

Some time ago I had the opportunity to work on a 3D interior designer,

iDesigner. It was an application in which the user could arrange their new

apartment. This is a great example of how flexible, efficient and fasci-

nating Vue can be.

In this project, Vue acted as scene manager of the entire editor. It’s re-

activity system was used to declaratively describe the scene graph. The

user could work on a 3D scene made with WebGL as well as on a 2D

scene that was implemented using SVG. In both cases, scene objects

and their properties were two-way bounded with the corresponding Vue

components that represented them. Of course, the application interface

was also created in Vue.

STATE OF VUE 2021 REPORT 64


V ue E x perts on U sing V ue

For what type of projects would you recommend


to try out Vue?

I recommend Vue especially for projects that will be created by teams of

developers with different levels of experience. I’m not saying that I don’t

recommend Vue for senior teams, but in the first case you’ll very quickly

see Vue’s advantage over other popular frameworks.

What is the most burning problem you’d see


Vue as a developing framework tackling next?

It seems to me that there is still some room for improving the developer's

experience. Especially for TypeScript users. I’m glad that there are people

who are currently working on this part of the Vue ecosystem.

STATE OF VUE 2021 REPORT 65


V ue E x perts on U sing V ue

Wikimedia
Deutschland Tonina Zhelyazkova
Software Developer
at Wikimedia

@tonina_zh

Non-profit organization
dedicated to the dissemination
of free knowledge.

Why do you use Vue and what do you like most


about it?

At Wikimedia Deutschland we maintain and develop open source software

such as Wikibase and Wikidata. Our frontend code was originally built

using a home-brewed framework based on jQuery and other JavaScript

libraries. While this was the best choice at the time when the core part

of the software was built, it is not the best choice of technology these

days, because there are better frameworks available. Our legacy frontend

code has been hard to maintain and is not well-documented. Building

new features has been unnecessarily complex due to being the difficulty

to onboard new developers in them, and having unexpected bugs show

up in the outdated code.

STATE OF VUE 2021 REPORT 66


V ue E x perts on U sing V ue

To tackle these problems, we decided to adopt Vue.js gradually by

creating and growing features which live alongside the legacy front end

code, instead of doing a big overhaul of all our code.

We liked Vue.js because it allows us to organize our code into single

file components and it has rich, easy to follow documentation. Another

major factor in choosing Vue was the native SSR support it provides,

allowing us to future proof ourselves from this requirement.

At Wikimedia Deutschland we believe in the power of open source soft-

ware. We like to build upon the base created by the open source commu-

nity, therefore we’ve decided to use Vue.js as the well-established open

source framework. All software we develop is also open source, and we

strive to contribute back to projects we use whenever possible.

A new version of Vue was recently released -


are you planning to adopt it anytime soon?

We’ve been following the Vue.js framework and its progress closely since

we started using it at WMDE and we’re very excited about Vue 3 and the

new Composition API.

We intend to migrate from Vue 2 to Vue 3. We are considering doing an

immediate step by using the composition API Vue 2 plugin.

As our software is used by a significant number of IE11 users, we would

be able to use Vue 3 itself as soon as IE11 support is provided.

STATE OF VUE 2021 REPORT 67


V ue E x perts on U sing V ue

What’s the most exciting project you’ve done


with Vue?

All projects we’ve done with Vue are exciting in their own way, but the

most notable one has to be the product called Data Bridge. It’s a frontend

feature which runs on Wikipedia and connects it to Wikidata, allowing

editors to change Wikidata items through Wikipedia.

It was particularly exciting to work on it because we used Vue with Type-

Script and it is the very first project to bring TypeScript to Wikipedia.

For what type of projects would you recommend


to try out Vue?

Vue is easy to integrate with existing projects using different libraries.

Like in Wikimedia Deutschland’s case, if you have a large codebase which

uses different technologies for its frontend, and you’d like to start incre-

mentally improving it, Vue is perfect for the job.

Vue is also perfect for building SPAs from scratch, because its commu-

nity has built tooling and libraries that solve common problems in front

end development, which allow you to focus on the essentials of your

applications.

What is the most burning problem you’d see


Vue as a developing framework tackling next?

I can’t think of anything. So far, we haven’t had a problem which Vue can-

not solve for us.

STATE OF VUE 2021 REPORT 68


V ue E x perts on U sing V ue

Vue
Storefront Filip Rakowski
CTO & Co-founder
at Vue Storefront

Vue Storefront is the most


popular framework for building
eCommerce Storefronts that can
work with any eCommerce platform
and third-party service.

Why do you use Vue and what do you like most


about it?

I started using Vue more than 3 years ago, just after v2 got released.

Back then I was new to the modern frontend frameworks, world with

previous experience in AngularJS and Knockout. I spotted Vue in some

article on Medium, tried it and it just felt so much better than AngularJS.

Thanks to the similarities between these two frameworks, it took me just

a few days to become fluent and I was making far fewer mistakes while

producing much cleaner code so it also helped me to be more productive

and confident. At that time simplicity and approachability were the main

STATE OF VUE 2021 REPORT 69


V ue E x perts on U sing V ue

reasons that gauged my interest. Right now with Vue 3 and Composition

API, I’d say flexibility is a much bigger asset and this is what I value the

most as an experienced developer.

A new version of Vue was recently released -


are you planning to adopt it anytime soon?

Yes! We started using new Vue 3 APIs in Vue Storefront even before Vue

3 was usable - right after the release of the CAPI plugin. At that time

we were figuring out new architecture so the timing was perfect. Even

though we experienced a lot of struggles with the plugin itself, the API is

absolutely amazing and brings a lot of improvements and new possibili-

ties - especially for the library authors.

We’re great fans of domain-driven design. Before the Composition API we

had to invent our own ways of utilizing this approach. We sometimes felt

it worked against the framework and its good practices. With Composi-

tion API these limitations are no longer there. I generally feel that Vue 3

shines the most when you compare the limitations of these two versions

in terms of architecture or building APIs. With all the tiny bits of Vue like

the reactivity system exposed as independent packages, Composition

API with additions like customRef or shallowRef it’s hard to imagine a

frontend use case that is hard or unintuitive to achieve with Vue.

What’s the most exciting project you’ve done


with Vue?

For the last few years, we’ve been building Vue Storefront and a whole

STATE OF VUE 2021 REPORT 70


V ue E x perts on U sing V ue

ecosystem of tools around it - UI library and visual UI builder to name

a few. I find all of them really exciting but I think Vue Storefront Next

- which is a rewrite of Vue Storefront with Composition API itself - is

the one where Vue shines the most. Thanks to the declarative approach

(just like Vue) and Composition API, we managed to make an extremely

complex area (which is eCommerce frontend development) into some-

thing that is easily approachable, even to junior developers. I don’t think

it would be possible to that degree in any other framework.

For what type of projects would you recommend


to try out Vue?

With Vue 3? Almost all of them! Thanks to the granularity of Vue 3 you

can fit it into almost any context. It’s obviously a great choice for SPAs,

just like it was with Vue 2.

It’s a great choice for Native apps as well with tools like Nativescript or

Weex. Improvements in Vue 3 will also make it much easier to render

native components in non-Web environments so we could expect these

tools to be even better.

What is the most burning problem you’d see


Vue as a developing framework tackling next?

If you add a new way of interacting with the framework internals while

still keeping the old one it always leads to problems. Especially if you in-

troduce the new API, yet still promote the old one in the documentation.

People could get confused. I’m sure not all library authors will embrace

STATE OF VUE 2021 REPORT 71


V ue E x perts on U sing V ue

both Composition API and Options API in their libraries. In many cases,

we will see only one approach being exposed in the documentation and

via public APIs. Because of that, it will be much harder to build apps fol-

lowing just one of the component APIs. It could lead to fragmentation or

even duplication of the ecosystem which will make it much harder to nav-

igate through it. I’m curious how the Vue community will approach this.

STATE OF VUE 2021 REPORT 72


Vue Comparison with
Other Technologies
V ue C omparison with other technologies

Intro
The landscape of JavaScript frameworks and libraries is vast and rich in

possibilities. It seems as if there are half as many frameworks as there

are developers. OK, maybe that’s a little over the top, but you know what

we mean.

So — why Vue? Why not one of its competitors like React, Angular, jQue-

ry? Or something less popular but better fitted to your use case? (Preact,

Svelte, Knockout, Polymer anyone?)

We’re not here to convince anyone to pick Vue against their best interest.

This section will provide an overview, as objective as possible, of the

most used (and up-to-date) JavaScript libraries and frameworks: Vue,

React, Angular, and Svelte.

It should help you answer questions such as: should you learn and imple-

ment Vue? What projects is it best used for? Is it future-proof?

STATE OF VUE 2021 REPORT 74


V ue C omparison with other technologies

Technology overview

Vue

The first version of Vue was built by one developer, Evan You in 2014 to

improve on available JS tools. A former Google employee in Google Cre-

ative Labs, Evan You wanted to create a framework that combined the

best approaches towards frontend development from Angular, Ember,

and React with other features that made writing Web apps faster, easier,

and more pleasant.

From the get-go, Vue was a truly open source project, relying on the com-

munity, contributors, and crowdfunding to move forward.

It shares several major similarities with React, like:

 Virtual DOM — React and Vue work with a lightweight copy of the

actual DOM, updating only those fragments of the website that

need to be updated, and saving the time and resources that heavy

DOM manipulations otherwise consume.

 Component-based UI development — both Vue and React have

considerable libraries of components that facilitate code reuse,

STATE OF VUE 2021 REPORT 75


V ue C omparison with other technologies

improve developer productivity, and speed up the development

process.

 Focus on the view library — separate libraries for routing, state

management, etc.

But Vue also has some distinct features which make it stand out:

 Gentle learning curve.

 Elasticity — Vue can be both: easily integrated with existing proj-

ects and used as the main framework in huge apps.

 Progressiveness — Vue can be incrementally implemented into a

project, you don't need to rewrite it from scratch.

 Superb documentation.

React

React was created in 2013 for the purpose of meeting specific needs at

Facebook, and it continues to be maintained by the tech giant. In the past

there were doubts regarding React’s license; currently, however, the tool

operates under the MIT License — which makes it open source.

React’s corporate backing, especially from such a major player, indicates

stability in the future and implies that React will continue to be developed

with long-term support.

STATE OF VUE 2021 REPORT 76


V ue C omparison with other technologies

Angular

Angular came to be when Google’s team decided to completely rewrite

AngularJS in 2014. Their aim: solving scalability issues. With the help of

the community and other corporations, Angular came to be a widely-used

framework.

The framework is TypeScript-based, uses modules, components, and

both property and event binding.

Some of Angular characteristics:

 Angular has many predefined modules, classes and services


which help you build apps faster, but makes the entry treshold
much higher than other frameworks.

 Angular introduced a new generation rendering and compiling


pipeline called Ivy. It enables quick re-building and lowers payload
size.

 Angular has built-in features that help you deal with lazy-loaded
modules and improve app’s performance.

 Angular uses Incremental DOM instead of Virtual DOM.

STATE OF VUE 2021 REPORT 77


V ue C omparison with other technologies

Svelte

Svelte was created by Rich Harris in 2016 and is now maintained by him

and the Svelte core team.

This framework is the newcomer in this comparison — how its fate will

turn out, only the future can tell. Its main focus is on: using less code,

eliminating virtual DOMs to improve performance, and running at build

time (converting components into imperative code that updates the DOM,

improving the performance further).

Vue React

Angular Svelte

STATE OF VUE 2021 REPORT 78


V ue C omparison with other technologies

Popularity and support

Vue, React, and Angular


The popularity of these technologies has been covered in the Vue Today

section, so to recap: React is the most used framework right now, and its

popularity is growing, as well as Vue’s.

 161k GitHub starts

 13.6k GitHub commits

 1.5k GitHub contributors

 257k questions on Stack Overflow

 2609k live websites

React’s communities tend to be described as more fragmented than

those of Vue for example, but there are a few places where you can go to

ask any question: DEV’s React community, Hashnode’s React community,

Reactiflux chat on Discord, and Reddit.

STATE OF VUE 2021 REPORT 79


V ue C omparison with other technologies

 177k GitHub stars

 3.1k GitHub commits

 382 GitHub contributors

 67k questions on Stack Overflow

 1189k live websites

When looking for answers to Vue-related questions it’s always worth tak-

ing a look at these communities: Vue forum, Discord, and Reddit. The Vue

community is famed for always being ready to help.

 69k GitHub stars

 19.1k GitHub commits

 1.2k GitHub contributors

 235k questions on Stack Overflow

 115k live websites

Angular communities tend to gather in these places: Slack, Gitter, Stack

Overflow, Reddit.

STATE OF VUE 2021 REPORT 80


V ue C omparison with other technologies

 43k GitHub stars

 5.9k GitHub commits

 342 GitHub contributors

 1200 questions on Stack Overflow

 5k live websites

As for available jobs, the number of vacancies on stackoverflow.com jobs

are as follows (descending order): React, Angular, Vue. We couldn't find

any openings that require specifically Svelte — it’s more of a nice-to-have

skill.

Documentation
Vue

If you’ve heard anything about Vue, you’re aware of its great documenta-

tion. There, the creators describe in a clear and accessible way everything

you need to know, taking you step-by-step through solutions. You’ll also

gain insight into Vue’s ecosystem, and scaling options. Vue’s clear syntax

compliments the usefulness of the documentation. Additionally, you get

STATE OF VUE 2021 REPORT 81


V ue C omparison with other technologies

an official styleguide which saves developers a lot of frustration when

changing projects.

React

React’s documentation remains far behind Vue’s in terms of accessibility

and structure. It goes through basics and advanced uses, but navigating

all the material isn’t nearly as smooth as with Vue. There’s no overview

of React’s ecosystem.

Angular

Angular’s documentation is known for its complexity and can be quite

overwhelming. In 2016, the documentation was overhauled to be more

user-friendly, but diving into chapters, subchapters, and sub subchapters

can still confuse many developers. The documentation tries its best to

guide the user through the development process but the steep learning

curve of Angular compounds the issue.

Svelte

Svelte’s documentation is neatly divided into sections about operators,

STATE OF VUE 2021 REPORT 82


V ue C omparison with other technologies

processes, and functions. Those entirely unfamiliar with the framework

can start with an interactive tutorial or by asking around in the Discord

chat room. The creators are doing their best to introduce Svelte concepts

in an accessible way, and it shows — Openbase users rank Svelte docu-

mentation high.

Performance
Raw performance data can be easily found on Stefan Krause’s website.

The most up-to-date version, tested on Razer Blade 15 Advanced (i7-

8750H, 64 GB RAM, Fedora 33 beta (Linux 5.8.13-300, mitigations=off),

Chrome 86.0.4240.75 (64-bit), returns following:

STATE OF VUE 2021 REPORT 83


V ue C omparison with other technologies

Duration in milliseconds ± 95% confidence interval (Slowdown = Du-


ration / Fastest)

Source:
Stefan Krause

STATE OF VUE 2021 REPORT 84


V ue C omparison with other technologies

Startup metrics (lighthouse with mobile simulation)

Source:
Stefan Krause

Memory allocation in MBs ± 95% confidence interval

Source:
Stefan Krause
V ue C omparison with other technologies

Svelte is ahead of Vue in many aspects, but the differences tend to be

slight. React beats Angular in 12 out of 20 metrics.

A more readable (but less in-depth) comparison was written by Jacek

Schae for Daily JS (a score of 100 means the tested website was light-

ning-fast.)

Svelte 99

Vue 86

Angular 82

React + MobX 82

Ember 79

C# Bridge.Spaf 73
Source:
React + Redux 67 Medium

Looking at these two sources, we can draw a draft performance score-

board that looks like this:

 Svelte

 Vue

 React

 Angular

STATE OF VUE 2021 REPORT 86


V ue C omparison with other technologies

With that being said, we have to remember that both React and Vue are

considered exceptionally fast in day-to-day use. This means that Svelte

has virtually no hiccups at all, while Angular occasionally gives develop-

ers a hard time (performance-wise).

Scalability

Vue

Vue is a progressive framework that can adapt to multiple environments.

It can be added to an existing multi-page application to make it more

interactive, but can just as well be used to build large-scale single-page

applications or even universal apps, thanks to the state of the art serv-

er-side rendering capabilities.

Also, the Vue CLI comes with a ready-made scaffolding that allows you

to start a new project in no time, taking care of all the necessary build

tools. Thanks to plugins, the Vue CLI makes it super easy to extend the

setup with additional libraries (like TailwindCSS, GraphQL, routing and

state management) and tools (like Cypress for e2e testing). When you

install project dependencies, you implement them as plugins, so even if

some standards change, you simply update the dependency.

STATE OF VUE 2021 REPORT 87


V ue C omparison with other technologies

As for the companion libraries for state management and routing, in Vue

they are a part of the core library, so they are officially supported and up-

to-date (unlike React, where they are community-based).

React

React, because of its impressive community, has a lot to offer. It can

build multi-page apps and single page ones.

The React’s CLI comes out a bit poorer when compared to Vue’s. You

cannot customize your project after a generation, you can only use a sin-

gle page app template, and you cannot generate projects from user-built

presets.

Other than that, React is immensely useful for building scalable web apps

(look at Facebook).

Angular

Just as Vue and React are purpose-built for creating interactive web apps,

Angular aims primarily at being scalable. Its component-based structure

can be further optimized using feature modules. This goes a long way

when building really large apps. Furthermore, dependency injections in

STATE OF VUE 2021 REPORT 88


V ue C omparison with other technologies

Angular allow you to design apps that can be easily extended or have

their functionalities refactored.

With that being said, the architecture of Angular components has to be

carefully planned and thought-through. This can sometimes generate an

overhead too large for a certain project. You can build complex Angular

architectures, but for them to be effective, you need to design them be-

fore you start developing. If you’ve never used Angular before, learning

all the pros and cons of each architecture design can be daunting.

Svelte

In theory, looking at the performance numbers, and the fact that Svelte

aims at using less code and should be more readable than other frame-

works, it should be the best candidate for scaling applications.

In practice, however, another core characteristic of Svelte — lack of vir-

tual DOM — places a big caveat on code design. Two sources state that

Svelte loses its upper hand in being super lightweight (compared to Re-

act) when reaching an inflection point: 137 KB or 120 KB. This means

that to benefit from Svelte the developers need to wisely use code-split-

ting and avoid building big single pages.

STATE OF VUE 2021 REPORT 89


V ue C omparison with other technologies

Syntax

Vue and React

One of the biggest differences between Vue and React is the way the

view layer is built.

By default, Vue uses HTML templates, but there’s an option to write in

JSX.

In React, on the other hand, there’s solely JSX. Vue’s traditional sepa-

ration of concerns into HTML, CSS, and JS makes it easier (even for

beginner frontend developers) to learn how to create Web applications.

HTML templates are also familiar to most Web designers, and improve

collaboration between developers and designers.

React’s JavaScript Expressions (JSX) combine HTML and sometimes

CSS together into JavaScript. This XML-like syntax lets developers build

self-contained UI components with view-rendering instructions included.

Two main advantages of this solution are the ability to use the entire

strength of JS to build the view layer, and having a more advanced tool-

ing support for JSX.

STATE OF VUE 2021 REPORT 90


V ue C omparison with other technologies

However, working with HTML when creating the view layer feels more

natural to many developers, and when they need to, Vue gives them the

option to switch to JSX or to a simple render function.

It is also possible to use TypeScript with Vue and with React, although

this requires a bit of a set-up.

Angular

When it comes to syntax, Angular is based on TypeScript. One of the

most prominent and valued features of TypeScript is its type annotations.

It’s easier to track bugs on compile time, although some point to more

syntax noise because of that.

Because of the above, Angular is recommended for big projects where

many developers work together (interfaces and access modifiers), and

for those who prefer compile time type checking.

Svelte

Svelte aims at reducing the amount of code developers need to write

when compared to other JS frameworks, and this is something that

Svelte achieves without a doubt. The trade-off, however, is a syntax that

STATE OF VUE 2021 REPORT 91


V ue C omparison with other technologies

may confuse many developers.

In Svelte syntax, the derived and computed states of a variable are kept

under the mask and calling the computed state with only the variable

name feels for some developers somewhat unnatural. Passing proper-

ties also tends to confuse developers, as you have to export a basically

imported declaration. Conditionals and loops are another thing on a list

that developers don’t like — they look and feel archaic.

On the upside, Svelte finds praise for its event modifiers and attribute

shorthands.

In summary — we’re still waiting for Svelte to become popular enough so

that we can draw some solid conclusions from thousands of developers'

opinions.

STATE OF VUE 2021 REPORT 92


V ue C omparison with other technologies

Mobile development

Vue

There are a couple of ways a developer can choose from when develop-

ing a cross-platform mobile app with Vue. The most popular currently is

NativeScript-Vue.

NativeScript-Vue is a NativeScript plugin that allows developers to use

Vue.js syntax.

Reasons to go for NativeScript:

 Access to the entire native API — you can always access the na-

tive objects and APIs from JavaScript, and simply write overrides

on plugins within your project if you want to customize anything.

 Very convenient code sharing.

 Works with Angular, core JS, TypeScript.

It is also possible to write cross-platform apps using Ionic Vue

STATE OF VUE 2021 REPORT 93


V ue C omparison with other technologies

React

React Native is the way to go when developing mobile apps with React.

The framework has been praised for its “learn once, write anything” ob-

jective which means you get a native look and feel of your app for both

iOS and Android, and you may also include platform-specific modules.

Unlike other cross-platform frameworks like Ionic, the Facebook team

stresses that they acknowledge the differences between different plat-

forms, and React Native reflects that. Therefore, you can still include

modules specific for iOS and Android like status bars, navigation, or ac-

cess to native elements like camera and contacts are built according to

the platform.

Using libraries such as React Native for Web or ReactXP allows a devel-

oper to build a cross-platform app that runs on the Web too, so there’s no

need to build separate apps at all.

There are some cons, though:

 Need for expertise from a native developer for some plat-

form-specific modules.

 It’s not a fully cross-platform, single-codebase approach.

STATE OF VUE 2021 REPORT 94


V ue C omparison with other technologies

However, if you need a web-first approach, it is also possible to use Ionic

React.

Angular

NativeScript is most often the way to go when developing mobile apps

with Angular. On paper, this framework has everything that is needed in

cross-platform projects, but in practice, developers claim that Native-

Script + Angular is good when you:

 Develop a simple app with functionalities common for Android

and iOS.

 Need custom native UI components, but you don’t know Objective

C or Java.

 Need to use the framework accompanying NativeScript (Angular

in this case) to develop the web part on an app.

There are voices that point to a need for a better NativeScript documen-

tation before the combination with Angular will be useful for ambitious

projects. So if you’re on a lookout for another option, you can always use

Ionic Angular.

STATE OF VUE 2021 REPORT 95


V ue C omparison with other technologies

Svelte

Svelte Native is also based on NativeScript. It will have all the pros and

cons of Svelte and NativeScript.

Best use cases


All of the mentioned technologies have their pros and cons, and their

loyal advocates. But like with most technologies, it all comes down to

what you need to achieve and how you want to do it.

To make the decision process a bit easier, here’s a handy comparison

table:

STATE OF VUE 2021 REPORT 96


V ue C omparison with other technologies

Choose Choose Choose Choose


Vue to: React to: Angular to: Svelte to:

Build a highly scalable


Experiment with a new
Quickly get a working Build a complex solu- app that follows an ar-
and interesting frame-
solution tion/SPA chitecture design you
work
picked from the get go

Have the possibility Build a big project with


Build a lightning-fast Build ultra light-weight
of expanding your app many separate teams
app web and mobile apps
heavily in the future working on it

Migrate your existing


Pick JavaScript over Check variable types at Target low power/low
project incrementally
HTML compile time capacity devices
to a modern framework

Have the backing of


Learn as you go (Vue
the most-used mobile Pick a framework Create your own infra-
has a gentle learning
development frame- supported by Google structure
curve)
work

Make use of immense


Have clean code and Have compo-
database of third-party
HTML templates nent-based structure
libraries

STATE OF VUE 2021 REPORT 97


© Monterail, February 2021

Monterail is a full-service software development company with 110+ experts

on board delivering meaningful software for start-ups, SMBs and enterprises.

Why Monterail + Vue? Because we've been using it for a while now:

we’re the first VueConf organizers, Vue evangelists, and we kinda love Vue!

www.monterail.com

hello@monterail.com

You might also like