DEV Community

loading...
Cover image for Why would you want to learn VueJS now?

Why would you want to learn VueJS now?

angelomiranda profile image angelo.miranda ・3 min read

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>
Enter fullscreen mode Exit fullscreen mode
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})
Enter fullscreen mode Exit fullscreen mode

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!

Discussion (24)

pic
Editor guide
Collapse
adamcoster profile image
Adam Coster

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.

Collapse
angelomiranda profile image
angelo.miranda Author • Edited

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.

Collapse
adamcoster profile image
Adam Coster

I used the CLI and followed up with a lot of manual fixes. I did switch to Typescript as part of the process.

Thread Thread
angelomiranda profile image
angelo.miranda Author

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.

Thread Thread
adamcoster profile image
Adam Coster

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!

Thread Thread
angelomiranda profile image
angelo.miranda Author

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.

Thread Thread
adamcoster profile image
Adam Coster

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!

Thread Thread
angelomiranda profile image
angelo.miranda Author

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.

Thread Thread
adamcoster profile image
Adam Coster

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.

Collapse
maureento8888 profile image
Maureen T'o

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.

Collapse
angelomiranda profile image
angelo.miranda Author • Edited

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.

Collapse
maureento8888 profile image
Maureen T'o

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 πŸ™ŒπŸΌ

Thread Thread
angelomiranda profile image
angelo.miranda Author

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?

Thread Thread
maureento8888 profile image
Maureen T'o

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 πŸ˜…

Thread Thread
angelomiranda profile image
angelo.miranda Author

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. πŸ˜€

Thread Thread
maureento8888 profile image
Maureen T'o

That’s awesome! I’ve heard of Svelte getting big these days! Woooo must be so different and interesting - have fun! πŸ˜€πŸŽ‰

Collapse
andrewbaisden profile image
Andrew Baisden

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.

Collapse
angelomiranda profile image
angelo.miranda Author • Edited

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.

Collapse
patarapolw profile image
Pacharapol Withayasakpunt

Please also share your thought on Vue2 (@vue/cli) vs Vue3 (vite) vs NuxtJS (vs Quasar, although I haven't really tried it yet.)

Collapse
angelomiranda profile image
angelo.miranda Author

i have no production experience with Vue3 or NuxtJS unfortunately. Hope someone can come in and share.

Collapse
nicozerpa profile image
Nico Zerpa (he/him)

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.

Collapse
angelomiranda profile image
angelo.miranda Author • Edited

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?

Collapse
sanfra1407 profile image
Giuseppe Sanfrancesco • Edited

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! :)

Collapse
angelomiranda profile image
angelo.miranda Author • Edited

will definitely visit. Glad to see vuejs users on this platform.

SFC and directives are my favorite part of vue.