This article will take a look into what Vue is, why and when to use it, and some of Vue’s potential drawbacks. After that, we will highlight some of the updates of Vue v3 and some parts of the Vue Ecosystem. Finally, we will see how Vue compares with two of its rivals: React and Angular.
Vue.js, the progressive JavaScript framework
Vue is an open-source JavaScript framework, first released in February 2014. It was developed by Evan You, a former Google employee who was part of the team that worked on AngularJS. What started as a personal project inspired by Angular, You would go on to create something more lightweight. His goal was…
“… to capture the declarative nature of Angular’s data binding, but with a simpler, more approachable API.” ~ Evan You
Vue: The who, what, when, where, and why
We know the Who (Evan You), so now let’s jump into the Why. With large frameworks and libraries out there like React and Angular, why use Vue?
First, Vue is quite popular, increasingly growing in popularity. It’s easy to learn with fundamental knowledge of HTML, CSS, and JavaScript. And it’s quick to get started on a project and to quickly create prototypes with basic interactive elements. Vue can easily be incorporated into your app, either by the CDN <script>, downloading and hosting on your web server, or installing it using the npm package. Another big draw towards Vue is its small size, coming to about 20KB min+gzip at runtime. This small size makes it one of the fastest frameworks to load.
“Vue sounds great! When do I use it?” Vue is a great library to use for any size application, from a small side project up to enterprise level code. Additionally, Vue can be used in a variety of teams, both in size, from individuals to teams, small to large, and in experience. With its small size and ease of use, Vue is a great framework to use for prototypes, single page applications, and Desktop and Mobile applications. And for Native applications, Vue Native (released in June 2018) is also now available. In addition, because it works well with other frameworks, it can easily be integrated page by page into old legacy code in order to update, modernize, and make old code more maintainable.
Downsides of Vue
“Vue just keeps getting better, but what’s the catch?” Though Vue is quite powerful, there are some potential downsides to be aware of when considering using Vue in your application.
The main library of Vue is a toolset of what you need to build the view layer of your application, resulting in the library’s small size. However, because of this, there is not a lot of utility out of the box. You do need to use its complimentary library, the Vue Ecosystem, in order to add more functionality.
Another downside of Vue is, when compared to other frameworks, there are less full-time paid developers working on Vue. Consequently, there may be a delay in potential bug fixes, if there is an issue during your app’s development. In addition, despite its growing popularity, there still may be some scenarios out there that have not been tested in production and you may be the one testing out that specific scenario.
Features of Vue
Vue is a component-based library with built-in reactivity. Where other frameworks need to declare DOM updates, Vue does it automatically. Through the use of directives, Vue can render elements, handle events, and bind class and styles to elements. Vue also has its own proprietary .vue file extension.
Vue directives
In the following table are some examples of Vue directives syntax, which may look familiar if you have used Angular before. This syntax is used within the HTML elements to conditionally render an element, for list rendering, for event handling, and for class and style binding. As you see, there is also shorthand syntax for some of the more commonly used directives.
| Use | Examples of Directive syntax |
|---|---|
| Conditional rendering | v-if, v-else, v-else-if, v-show |
| List rendering | v-for |
| Event handling | v-on, shorthand uses @ |
| Class and style binding | v-bind, shorthand uses : |
Single file components: The .vue file extension
The .vue file extension (shown in the following example) is a single file component that contains all the logic for the component. It is important to note that this file type cannot be read by the browser and will require a build step to compile it.
Having all the logic within a single file makes it easy to work within a team and check in code without having multiple people in the same file. But this structure may be confusing to newer developers as there is nothing else like it out there.
<template>
<p>{{ greeting }} World!</p>
</template>
<script>
module.exports = {
data: function() {
return {
greeting: "Hello"
}
}
}
</script>
<style scoped>
p {
font-size: 2em;
text-align: center;
}
</style>
Vue v3
Recently released in September 2020, Vue v3 brings with it a lot of exciting new features and improvements. We will only touch on a few of the updates today.
Even with these updates, Vue still maintains its small size of 20KB min+g-zip at runtime, but with an added benefit: you can import only what you need from the library, resulting in an even smaller size, as small as 12KB min+g-zip. They’ve rewritten the DOM to render faster through tree-shaking and have introduced the Composition API, similar to React Hooks, to help manage features and functionality across components. And they’ve also increased their TypeScript support.
v3 – Teleport component
Another update I’d like to mention is the new Teleport component, which allows you to specify the logic of a component in one location and then send the HTML template to another location. This can be useful for components like modals that are placed in different parts of the app. To use the teleport component, you wrap the template html in the <teleport> tag and set the “to” prop to a class, id or HTML element, but this does have to be specific; it can’t be a generic HTML element like “h1”.
<teleport to='body'>...</teleport> <teleport to='.form-grid'>...</teleport> <teleport to='#submit-form'>...</teleport>
v3 – Suspense API
The last update we’ll go over is the Suspense API, which that at the time of this writing is experimental and is not recommended for production use. The Suspense API allows you to set a fallback component, meaning the application will render placeholder content (the fallback) while the default component is updating. In the <suspense> tag, there are two slots where you can either declare a component or an HTML element, however each slot can only take one child node. This concept is similar to how Angular uses ng-if and React uses ternary statements.
<template> <suspense> <template #default> <shopping-list /> </template> <template #fallback> <div> Loading </div> </template> </suspense> </template>
The Vue ecosystem
The Vue Ecosystem is Vue’s companion library, which adds additional tools and functionality to Vue. We will highlight only a few pieces of this ecosystem.
Vue router
Vue Router, similar to React-Router, is how Vue can handle routing within the application. It can be added using a CDN or as an npm or yarn package. With Vue Router, each route can display its own component and can set up static and dynamic routes using parameters. It can set up URL segmentation using nested routes and set up redirection, statically or dynamically, which can be based on input or by user.
Vuex
Vuex is Vue’s state management library, similar to Redux. It can be installed using a CDN or as an npm or yarn package. Vuex is where the application state can be stored and rules can be set for how the state can be changed. This is beneficial on medium to large applications with a lot of state and when there are multiple components that share state.
Vue CLI
Vue CLI is Vue’s command line interface that gives you added tools using basic commands and the Vue CLI UI gives the CLI a visual interface. This can be installed using npm or yarn. With the Vue CLI, you can create, build, serve, and update applications and add to and update the folder structure. In the Vue CLI UI, you can create, configure, add plugins, build, serve and view stats of the app, like its speed.
Vue DevTools
The last feature I want to mention is the Vue DevTools, an extension that is available for Chrome and Firefox desktop browsers. It is also available as a standalone package that can be installed globally or locally to the project. This is a helpful set of tools to help you debug your Vue application and the standalone package will help you test beyond the two browsers.
Vue vs React vs Angular
Now that we have a better understanding of what Vue is, let’s get into some similarities and differences between Vue, React and Angular.
All three of these frameworks/libraries can be used to create Progressive web applications, they are all component based and can be used to quickly create the user interface of an application. However, what sets Vue apart is its minified file size, making it the smallest of the three and the fastest to load. Vue is also the quickest to learn, with only needing fundamental knowledge of HTML, CSS, and JavaScript. Also, Vue doesn’t require certain steps to get started, such as a build step or pre-determined file structure, which can be added at any time, where its counterparts may require more time or planning to get set up.
Vue vs React
Vue and React share a lot of similarities. They both use the virtual DOM, can be added to a project page-by-page, and don’t necessarily need a specific folder structure in order to get started. Both are also faster to render the page than Angular. And they both have CLI commands to create a new application: Vue uses the Vue CLI create and React uses npx create-react-app. But some of the differences are Vue gets its functionality by using directives while React uses plain JavaScript.
Vue vs Angular
It’s not surprising to see similarities, like their use of directives, between Vue and Angular, given the creator’s previous experience. However, as previously mentioned, his goal was to create a more lightweight framework. Vue can be integrated at any point in an application, whether in the beginning stages or to update old applications, while Angular has to be used at the beginning and be part of the whole application. Vue is also most productive for small to medium-sized apps, while Angular is best used in large, enterprise level apps. Not to say Vue isn’t good for enterprise level, just that Angular may be more ideal. And Angular can take a long time to learn, especially if you don’t have much experience using TypeScript.
Comparing popularity
(as of July 27, 2021)
| Vue | React | Angular* | |
|---|---|---|---|
| *AngularJS has a separate repo, not included here.
**highest of the three. |
|||
| Developed and maintained by: | Evan You, 2014 | Facebook, 2013 | Google, AngularJS 2010/Angular 2016 |
| Stars (GitHub Repo) | 186k** | 172k | 74.9k |
| Watching (GitHub Repo) | 6.3k | 6.7k** | 3.2k |
| Forked (GitHub Repo) | 29.7k | 34.5k** | 19.6k |
| Latest Release (GitHub Repo) | June 7, 2021 | March 22, 2021 | July 21, 2021** |
| Pending Pull Requests (GitHub Repo) | 206** | 199 | 166 |
| Contributors (GitHub Repo) | 399 | 1489** | 1441 |
| NPM Weekly Downloads (compared to last year) | +87%** | +44% | +50% |
| Number of Live Sites | 1.6 million | 9.2 million** | 112k |
Why Vue
In conclusion, here are a few key takeaways I hope you get from this article. As we saw, despite not having a big tech company backing Vue, it is still rapidly growing in popularity among the open-source community and they are still frequently updating and improving its code base. And though the functionality of Vue is simplistic out of the box, the use of Vue’s Ecosystem helps make it a more robust framework.
Vue is also one of the fastest frameworks for a team with a variety of skills to learn and implement in order to quickly get started on a project. It can be used on a variety of projects, small to large and new or updating applications. And it is great for quickly creating a prototype, especially when trying to win a bid for a new client or project. And if you are deciding between Vue, React and Angular as a framework for your project, all three provide a lot of benefits. You just need to decide which one would work best for what you are looking to achieve.
Want more information?
Are you curious about how we can help you start your journey with Vue.js? Please contact us today!
