Everyone has their favorite JS framework based on their own style and preference. Why would a developer bother looking into a different one if what they are currently using is working?
- VueJs is very easy to learn and easy to use. It uses components as building blocks that are small, reusable, and can be dropped in different parts of the application.
It has directive that will let us render a data very easily.
<div id="app">
{{ message }}
</div>
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
Also, have a directive to loop over a list in a template.
<div id="app">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
There is so much functionality that this framework has done to make our lives easier. Check their website
- VueJS documentation is one of the best I have ever read with great examples
- Ecosystem is big and great. The framework has the community that created all the libs and tools you will ever need to build, organize and scale your front end applications
- Their CLI is outstanding and flexible. You can choose to what level of libs and tools. For example: You can add unit or integration framework you want, whether you want to include a store, router, es6, and many more and the CLI will build this kind of customization for you.
- VueJS according to the survey is trending as the top 2 in terms of popularity and satisfaction. More metrics can be found here - Survey Metrics
Stack Overflow survey
2020 (february 2020, 65,000 developers): https://insights.stackoverflow.com/survey/2020
Popularity: React.js 35.9%, Angular 25.1%, Vue.js 17.3%, Angular.js 16.1%
Loved: React.js 68.9%, Vue.js 66.0%, Angular 54.0%, Angular.js 24.1%
Dreaded: Angular.js 75.9%, Angular 46.0%, Vue.js 34.0%, React.js 31.1%
Wanted: React.js 22.4%, Vue.js 16.4%, Angular 10.6%, Angular.js 7.7%
2019 (january 2019, +90,000 developers): https://insights.stackoverflow.com/survey/2019
Popularity: React.js 31.3%, Angular/Angular.js 30.7%, Vue.js 15.2%
Loved: React.js 74.5%, Vue.js 73.6%, Angular/Angular.js 57.6%
Dreaded: Angular/Angular.js 42.4%, Vue.js 26.4%, React.js 25.5%
Wanted: React.js 21.5%, Vue.js 16.1%, Angular/Angular.js 12.2%
2018 (january 2018, +100,000 developers): https://insights.stackoverflow.com/survey/2018
Popularity: Angular 36.9%, React 27.8%
Loved: React 69.4%, Angular 54.6%
Dreaded: Angular 45.4%, React 30.6%
Wanted: React 21.3%, Angular 14.3%
stateofjs.com survey
2020 (december 2020, 23,765 respondents): https://2020.stateofjs.com/en-US/technologies/front-end-frameworks/
React satisfaction: 87.49% 100-(100/(15071+2154)*2154) for 17,225 users
Vue satisfaction: 85.15% 100-(100/(9029+1574)*1574) for 10,603 users
AngularJS + Angular 2+ satisfaction: 41.60% 100-(100/(5046+7081)*7081) for 12,127 users
2019 (december 2019, 21,717 respondents): https://2019.stateofjs.com/front-end-frameworks/
React satisfaction: 89.33% 100-(100/(14382+1717)*1717) for 16,099 users
Vue satisfaction: 87.14% 100-(100/(8122+1198)*1198) for 9,320 users
AngularJS + Angular 2+ satisfaction: 37.95% 100-(100/(4396+7186)*7186) for 11,582 users
2018 (november 2018, 20,268 developers): https://2018.stateofjs.com/front-end-frameworks/overview/
React satisfaction: 90.60% 100-(100/(13062+1355)*1355) for 14,417 users
Vue satisfaction: 91.15% 100-(100/(5810+564)*564) for 6,374 users
AngularJS + Angular 2+ satisfaction: 41.37% 100-(100/(4817+6826)*6826) for 11,643 users
Want to watch a video instead? Below is a youtube video. Happy coding!
If you want to support me - Buy Me A Coffee
Top comments (24)
Vue is great, and Vue3 has made it much better yet. While in general I agree that the docs and ecosystem are great, the Vue2/Vue3 split has made that less true.
I recently upgraded a big Vue2 project to Vue3. It was less painful than I expected, but I found it difficult to figure out which version of Vue any given 3rd party library or even the Vue docs are referring to.
glad to hear your experience on the upgrade. I am interested on how did you approach the upgrade - manually or using a cli or a migration docs/guide?
Did you also include typescript? We are currently using VueJS version 2 in the company.
I used the CLI and followed up with a lot of manual fixes. I did switch to Typescript as part of the process.
i need to take a look at typescript. Companies are investing into it now and getting so much attention because of the advantage it brings.
After making the switch I'll never go back. I started to slowly adopt it early last year, and once I got over the initial learning hurdles it quickly became the only way I wanted to code!
thanks for sharing. I have typescript docs open at the moment and I would dive into it.
I used to think that TS is just an additional overhead, I didn't bother learning as JS is meant to be loosely typed. It is an eye-opener to see the community slowly adapting to it. Hope that TS will just be embedded on JS itself.
Typescript is great because it doesn't limit what you can do, it just documents what you did do, or plan to do, so that you can catch errors from accidentally not doing those things. You can adjust type definitions easily and on the fly.
At the beginning of learning it's hard to use Typescript to express your intent, so it may feel constraining at first. But it's worth sticking to it!
im sold! thanks for the valuable input. i currently know the basics and watched tutorials last night. will get my hands dirty this weekend. Thanks Adam.
Good luck! Definitely best to start with small projects until you feel confident with it. The official docs are very good. I've found that the vast majority of my frustrations stem from configuration issues, which can be tricky to get right.
The Vue.js docs really are the best I've seen 💚 Great framework and super lightweight. I'm surprised it's still not as popular as React.js. Although I think React.js is great, but I found the syntax a little bit awkward (although not impossible) to work with.
if I would make an educated guess, ReactJS came in first so they have the first-mover advantage from angular and other frameworks. Also, ReactJS focus heavily on javascript which is the preference of most devs. Since this is preferred, jobs will be massive as demand is higher.
JSX is a bit weird but I could argue that the same thing could be said on the directive, filters, etc as well on angular/vue. Might be something to just getting used to.
That is true, that React did sort of revolutionize the framework world. It’s definitely more JS-heavy with the JSX but it’s an interesting philosophy I’d take up learning in the future 🙌🏼
You will be able to pick it up quite easily. In the end, frameworks help us devs but just different ways of doing things. Is there any other framework you are familiar other than vuejs?
Completely agree that frameworks just provide different means of doing things - I’m familiar with Nuxt.js but that doesn’t quite count since it’s based off Vue 😄 Only a bit familiar with React 😅
im going to spend some time with Svelte this week. it is very similar with VueJS. They claim to be lighter as they remove the actual lib from the code. imagine a vuejs app with vuejs or react app without react, no overhead. 😀
That’s awesome! I’ve heard of Svelte getting big these days! Woooo must be so different and interesting - have fun! 😀🎉
If React did not exist I am sure that Vue would be number 1. Regardless it is a great framework to use definitely my second choice after React. I agree though the syntax is probably easier to learn compared to JSX. And their docs are great.
VueJS made some difficult things easier. An example is the form fields v-model. In react you would have to manually handle it. Although some devs preferred to have this flexibility, do everything themselves.
Looping through lists is quite a breeze, kinda angular-ish that Evan You love and replicated.
Please also share your thought on Vue2 (@vue/cli) vs Vue3 (vite) vs NuxtJS (vs Quasar, although I haven't really tried it yet.)
i have no production experience with Vue3 or NuxtJS unfortunately. Hope someone can come in and share.
I'm a React guy, but I also work with Vue.js and it's very a solid framework, it's really cool. I also like that the Vue.js team also maintains the official router and state management libraries for the framework.
Vue.js team maintaining these libs will ensure compatibility with the framework and I definitely like that idea. The more brain on lib, the better software will be. Have you tried or looked over Svelte?
There would be a lot to say about Vue. Personally I love its extensible ecosystem (Vuex, Vue Router and Vue CLI) which is totally followed by the core team members, giving to it more reliability, and I also like Vue's Single File Components which make possible to write a super-clean and understandable code.
I wrote a couple of posts about Vue; you may give them a look if you want! :)
will definitely visit. Glad to see vuejs users on this platform.
SFC and directives are my favorite part of vue.