Insights from My Time with Vue 3

If you’re looking for a framework that’s ideal for front-end developers, Vue might just be the answer. Although it wasn’t my initial preference, I came to realise how incredibly useful it is after exploring it further. Its documentation is well-organised, and the framework itself encourages the breakdown of code into smaller, more manageable components, which makes development and debugging a breeze.

Over the last few months, I’ve been working on revising a Vue 3 project that was originally built in Vue 2. While using this framework may seem similar to others at first glance, Vue has a distinct way of structuring and labelling attributes that is heavily guided by its own philosophy.

Having used Vue 3 myself, I can say with confidence that it is a top-notch framework. There are several reasons why:

A Programming Interface Designed for Composition

Vue has a steep learning curve when you’re just getting started.

The code organization involved in the Options API is quite sophisticated. As a developer, you’ll be working with a sizable object that includes data properties, calculated properties, methods and potentially other attributes that cater to specific use cases.

One of the perks of using Vue is the high level of visibility it provides when it comes to code. With the Options API, objects are structured in a way that makes it easy to quickly identify props, events, and reactive data. This helps users to comprehend the inner workings of the code with greater ease.

The primary drawback of this code is that it heavily relies on Vue, which makes the learning process more challenging. To work with this code, you need to have knowledge of both Vue and JavaScript, as opposed to only requiring JavaScript with some assistance from React for UI logic.

The purpose of the Composition API is to tackle this very issue.

When mixing Vue helpers with plain JavaScript for UI logic, adding a setup tag to the script tag might be required. This doesn’t considerably impact the code’s readability. As the Vue helpers are still present, the code remains identifiable to a Vue developer, which makes it easier to understand the component’s intention.

With this update, you can refer to a variable using just its name and no longer require a single large object. This means that you no longer have to worry about forgetting to include the component before the property and having the saved component not function as intended.

That being said, fans of the Options API needn’t worry as it is still being maintained. The Vue team is strongly committed to ensuring continuity of service while keeping existing features intact.

CSS V-Bind()

It’s no exaggeration to say that the Cascading Style Sheets (CSS) are incredibly advantageous. In certain situations, it becomes necessary to dynamically apply a style to a component.

Vue 2 presents a solution to this problem by combining a CSS custom property with a computed property. While this solution is effective, it may be slightly challenging to read for certain individuals.

With Vue 3, you can utilize the CSS function v-bind() which empowers you to make your style dynamic by merely inputting your data property within the brackets.

Pinia, Please Save Me!

Just like Vue, VueX has a grasp of the ideal structural setup. Each action requires a commit to be invoked from a different file, and as mutations are necessary for modifying the state, this can make the task more challenging for the developer.

Pinia is the solution to evading mutations, and it mandates that all stores be combined into a single file, greatly streamlining the development process. As a result, the team will have to reevaluate their store’s structure.

To underscore the significance of this, I’d like to share a personal anecdote. My team started developing an application without fully comprehending the amount of work that had already been completed. As a result, we were left with a single, complicated store of data. However, with the assistance of my colleagues, we were able to divide this store into smaller, more manageable parts, allowing us to identify the origin of each data component.

By avoiding the use of mutations, the potential sources of errors are limited to just two possibilities: either in a getter or an action, which results in more efficient debugging. Furthermore, as getters are voluntary, it’s probable that the problem is related to the invoked method.

TypeScript Administration

Undoubtedly, this is a significant advancement. It’s not only an alternative approach for your code structure, but it’s also a distinct way of thinking about JavaScript.

The inability to adapt to the provided parameters may cause JavaScript to be inefficient. For instance, if a string is provided instead of a number, the program will still execute, but the desired output may not be achieved. If the program is running as expected, this problem can be resolved at a later time.

That’s the dual nature of JavaScript, as demonstrated in my example.

When first learning about TypeScript, one may question its need. The additional coding for IntelliSense can be tedious, especially when dealing with seemingly illogical errors. However, after becoming accustomed to JavaScript’s forgiving nature when executing code, it makes sense to be more cautious if variables are undefined or if a data retrieval endpoint is inoperative.

I have decided to adopt TypeScript as a tool. Incorporating types in your code enhances its reliability, resulting in fewer unforeseen issues. Ultimately, this will result in a higher quality product and a more pleasant experience for customers.

Is Vue 3 a Worthy Investment?

Like everything else, this is a subject of debate.

As a developer, you can reap numerous benefits from the user-friendly development experience provided by the Composition API. Since a significant percentage of front-end developers are skilled in React, Vue 3 is a safer option than other alternatives.

TypeScript’s capacity to define object structures within code is exceedingly beneficial. Props are often used when creating components. To utilize a prop with TypeScript, one must first establish a type that reflects the prop’s object structure. This type might provide insights into the prop’s requirements if there isn’t enough time to construct complete documentation for the component. Vue 3 elevates the already impressive Vue experience. We urge you to try it and observe how it makes you feel.

Join the Top 1% of Remote Developers and Designers

Works connects the top 1% of remote developers and designers with the leading brands and startups around the world. We focus on sophisticated, challenging tier-one projects which require highly skilled talent and problem solvers.
seasoned project manager reviewing remote software engineer's progress on software development project, hired from Works blog.join_marketplace.your_wayexperienced remote UI / UX designer working remotely at home while working on UI / UX & product design projects on Works blog.join_marketplace.freelance_jobs