Vue 3.0 – The nice, the useful, and the not so pretty

It’s been a little over a year since Vue 3.0 went live.

As veteran users of the framework, we were delighted by all the new things this version introduced. 

It didn’t take long before we realized that Vue 3.0 probably was more noise than nuts. For example, we realized that you could easily do the function of composition API (now built-in) with traditional methods from Vue 2.0.

Today, we use Vue 3.0 for many of the web and mobile applications we develop. We want to make a rundown of what are the things that we like and which ones we believe could do better.  

There are tons of articles, videos, and tutorials out there about how to use this progressive framework. We will not get too much in-depth with the technical stuff here. Instead, we will simply mention some essential characteristics, a bit about the router, and some pros and cons.

Let’s make it nice and sweet and go from the ground up.    

Do you want to skip all the jargon and go straight to business? Just hop to the bottom, and let’s sit at the table. We got coffee. 

What is Vue.js used for?

In technical terms, Vue.js is a Javascript framework typically used for single-page applications or to build user interfaces. 

Evan Young created the framework and released it in February 2014. He and his team maintain and update it. 

You can use as much or as little of the framework you want or need for a project. For example, It makes it easier to add interactivity to apps. We sometimes use it to add features and enhancements to several projects. Other times, we use it as the foundation for developing an app. 

Companies like Nintendo, Gitlab, Expedia, and IBM use Vue.js as their foundation. 

Some of the advantages that Vue offers include:

• Make it easier to display and manipulate data
• Keeps code clean and organized
• Adds interactivity

To get started with Vue.js, you need to be comfortable with HTML and CSS and have some knowledge of JavaScript. 

When it comes to JavaScript frameworks, Vue is cleaner, more compact, and provides a more accessible way to maintain code, so maybe this is the one you want to get started with.

What is Vue 3.0? The basics

Vue 3.0 officially launched in September 2020. It was noticeably faster and had a better performance than its predecessor. Another distinct feature of Vue 3 is its smaller size. You add an improved TypeScript and several other nifty features, and you got yourself a tool to develop large-scale enterprise software.    

Vue 3 was rewritten from scratch, but the API stayed the same. This means that you get features you did not have before, but everything you could do in Vue 2 will work just fine. 

The company even makes it easier for you to transition with in-depth guides and a migration tool to parse your application and guide you through. Awesome, right?!

Our favorite features

Here are some highlights of the best features of Vue 3.0:

• Better performance thanks to compiler-informed paths and a rewritten DOM.
• Performance is also improved with tree-shaking. This essentially reduces the output file size. In addition, features such as the new v-model directive for creating two-way data bindings are also tree-shakeable. 
• Composition API provides a better organization and allows the extraction of repeatable parts of the interface and their functionality into shareable and reusable code pieces.
• Vue 2 only allows one root element per component, and you had to wrap it within a <div> tag. There is no such restriction in Vue 3. We can use any number of tags inside the <template></template> section. 
• Suspense is a new feature from Vue 3 that renders fallback content in the place of your component until a condition is fulfilled. Usually, this condition is an async operation in a component. For example, maybe you don’t want to display a component until the user data is fetched, or perhaps you want to display a loading indicator while that is happening. <Suspense> does precisely that.      

• The reactivity system in Vue 3 is more flexible and powerful. We have to say that this is thanks to the Composition API, which enables more powerful reactive systems. 

Vue Router

As we have seen, one of the great things about Vue.js is that it includes a ton of features that let you reuse web components to build. Routing is one of these features. The official Vue router makes applications look really nice and navigation swift. 

Some of the most valuable features of the Vue router include:

• The ability to create awesome Single Page Applications (SPAs). This makes the experience for the end-user much easier as they don’t require page loads with every route change. 
• Dynamic routing. No more need to hardcore every possible route as Vue Router lets you easily match the URL pattern to a component. Every time we configure stuff, it dynamically updates the application. 
• Nested route/view mapping for more complex UIs.
• Component-based and modular configuration allows us to map each route to the component that should display.
• A powerful expressive route syntax to define static and dynamic routes. 
• The debugging process through the path ranker tool is pretty practical and easily allows you to check why a route is not being matched. 

Of course, if you are working with Vue 3, you will need the Vue Router 4 documentation to start enjoying the benefits. 

Pros and Cons

Not everything can be roses, scents, and sparkles. As mentioned earlier, we do not use Vue 3 for all of our projects and not always for an entire project. But when it comes to JavaScript front-end jobs, this is definitely our favorite to use. 

The following are some of the pros and cons we have found when working with Vue.js. 

Pros

• The idea of Vue.js is to make things more practical and more manageable. We appreciate getting the same response with fewer lines of code. 
• The learning curve for Vue is not steep at all (compared to other JS frameworks like React or Angular). So if you are a starter, all you need is some basic knowledge of HTML, CSS, and JavaScript. 
• Vue 2 already had high performance, and Vue 3 cranked it up. As a result, the framework can handle a high frame rate and works pretty well with Virtual DOM.  
• Thanks to its popularity, Vue.js can easily integrate with existing applications. You do not need to set up npm and nodes, making this technology helpful in creating new applications and modifying pre-existing ones. 
• One of the reasons we can integrate Vue.js into our web projects is its simple structure. Besides a well-defined infrastructure, this JS framework includes excellent features such as directives, compound properties, and watchers. 
• Heaps of new functions to deliver with the robust set of tools included.  
• It focuses on user interfaces and only requires HTML, CSS, and JS, not much Vue-native stuff. 

Cons 

• Although it is easier to use than Angular and React, Vue is still not as big an ecosystem and does not have as many tools. 
• Vue 3 (and even Vue.js itself) is still relatively young. Therefore, the community is rather small. 
• There is a language barrier regarding discussions, content, tutorials, and pieces of code written in Chinese. Huge markets like Xiaomi and Alibaba used it in their projects, increasing its popularity in China and decreasing the chances of a generous soul contributing to translations. 

Let’s get things done with Vue 3.0

Mobile and desktop apps must provide the ultimate experience for your clients. Vue.js is our go-to when excelling the experience for the user. This framework is designed to help scale and increment. 

This is precisely what we do here in Contra Collective-build apps and processes that ensure scaling, growth, and continuous improvement. 

Want to give your customers the app treatment they deserve through a friendly and functional interface? Give us a shout, and we will build you a highly responsive and effective product.