There are several frontend frameworks available to pick from, so why do we use Vue? To research about Vue and learn about its benefits, I decided to read blogs from Vue mastery, specifically one written by Lauren Ramirez.
- Vue does not use up too much memory. Vue allows us to import only the pieces of the library that we need, which means whatever we don’t use will be removed for us via treeshaking.
- Virtual DOM (Document Object Model) uses compile-based optimization resulting in faster rendering times.
- To work with Vue, we did not have to learn HTML, CSS, and JavaScript. It was surprisingly easy how we were able to learn as we go.
- Vue has many libraries that can be added as needed. Some of which are:
- Vue Router (client-side routing)
- Vuex (state management)
- Vue Test Utils (unit testing)
- vue-devtools (debugging browser extension)
- Vue CLI (for rapid project scaffolding and plugin management)
- Vue’s one of the best features – Composition API;
- We are able to group features into composition functions then call them in the setup instead of having large unreadable and unmaintained code directly in setup.
- We are able to export features from components into the functions. This means we don’t have to keep re-writing code and avoid having useless repetition.

- Vue has enhanced support for TypeScript users as well.
- In Vue, we are able to use multi root components. In most front-end frameworks component template should contain exactly one root element because sibling elements aren’t allowed. The way around to that problem is using functional components, they are components where you have to pass no reactive data means component will not be watching for any data changes as well as not updating itself when something in parent component changes. However, they are instance less and you cannot refer to them anymore and everything is passed with context. With the multi root component support of Vue (Vue 3), there are no such restrictions and we can use any number of tags inside the template section.
- Vue 3 gives us the Teleport component, which allows us to specify template HTML that we can send to another part of the DOM. Sometimes a piece of a component’s template belongs there logically, but it would be preferable to render it somewhere else. This is useful for things like modals, which may need to be placed outside of the body tag or outside the Vue app.
- Most importantly, Vue is open source. Vue has complete freedom to be community-driven and its bottom line is the satisfaction of its end users. It doesn’t have to answer to the company-specific feature demands and corporate bureaucracy.
Source: https://www.vuemastery.com/blog/why-vue-is-the-best-framework-for-2021-and-beyond/
From the blog CS-WSU – Towards Tech by murtazan and used with permission of the author. All other rights reserved by the author.