Top 7 tips/features in Vue 3
Best practices and tips for new tools that Vue offers, which can help you code better, faster and enjoy it even more
Vue is an easy-to-learn, robust, and powerful framework for front-end development created as a personal project by Evan Yu in 2014. It’s currently one of the most loved and used frameworks for web and desktop development, and it has grown so much that big companies around the world like Google, Amazon, and Apple are using it.
Vue 3 is the latest major version, which brings with it a new approach to reuse code through the Composition API and multiple built-in components to extend the developer's creativity.
I will share some tips that have helped me write better code, enjoy writing it, and also how to build faster websites with the new recommended tools/standards for Vue 3.
1. Setup script came to stay
In the past, Vue had only the Options API (in Vue 2), which is an organized way to structure your code and access the lifecycle of the components, the code would look like this:
With the release of Vue 3, the Composition API came to life, which changed the approach of reusable code completely through Composables (I will explain this further later in the article). This change made the code look like this instead:
As noted, it’s less structured, but it allows the developer to organize the code per concept and not by the lifecycle or data type (check this article to understand it further).
Throughout the ongoing development of Vue 3, the attribute “setup" in the script tag was added; it can only be used when using SFC (.vue files). This change makes the code look like this instead:
The improvements caused by using the setup attribute in the script tag and Composition API over Options API are:
- Readability
- Less boilerplate code
- Easier to maintain
- More flexibility (this could be something bad though)
- Better code hinting an auto-completion by IDE’s intellisense
- Faster to learn as it is JavaScript with superpowers
However, it’s important to note that the Options API is more suitable for small and medium projects as it allows a more structured code if there are multiple junior developers on the team, but for long-term and large projects, the Composition API is the recommended way to go.
2. Use the framework utilities whenever you can
Using a framework like Vue, Django, or React, brings superpowers to your code, but it also comes with new approaches to the way you organize and implement it. My advice here is to not attempt to invent the wheel or use the native tools of the programming language over the framework tools. That will allow you to write better code and also have more integration with the framework utilities.
Some things you should have in mind are:
- Avoid direct DOM manipulation, use refs instead
- Use the lifecycle hooks instead of hacking the solution with JavaScript or adding other frameworks like JQuery
- Implement watchers if you have to do something when a change in data happens instead of using events from the DOM directly
- Use modifiers when using v-model to change the variable received (e.g. v-model.number to convert the input from a string to a number)
3. Reactive CSS
Vue 3 came with a cool feature called v-bind, which is also known as reactive CSS, it allows us to modify styles dynamically using variables from the script part of Single Component Files (Vue files).
For example, changing a text color by clicking a button can be achieved with the following code:
And you can see it working here:
Reactive CSS has a lot of uses, like allowing your customer to customize its dashboard or simply creating animations in JavaScript and letting Vue handle the styles.
4. Reuse code using Composables
This is probably the best tip I can give you and the most loved feature that came with Vue 3; use Composables to reuse code.
The new approach of using composables is possible thanks to the Composition API, which moves the lifecycle from the component to functions that can be accessed from any JavaScript or Vue file. Composables are simply that, Vue logic that can be reused in different components with full control over its flow.
If you are familiar with Vue you could say that Mixins do the same, which is in principle valid, but Composables solve problems that Mixins have (check this article if you are curious).
My advice is to always try to Don’t Repeat Yourself (DRY) by moving common logic into composables. An example is when you want to use event listeners: you always have to take care of not letting multiple event listeners for the same event when changing between components, to avoid memory and CPU leakage. To do that, you would have to manually tell the code when to remove the event listener for every event you add. Wouldn’t it be better if you could reuse code to create the event listener and remove it when it’s not needed anymore? That’s what Composables are for! Check this code:
By using the composable useEventListener from the example, you can use any event when the component is mounted and it will be safely removed when is unmounted. All events will be treated separately and now you can use the new composable anywhere.
There is a famous library called VueUse, which is an amazing job by the community, which has a lot of useful composables and components that you can reuse in your code, and they are fully tree-shakeable.
5. Import components when you need them
Large applications require splitting the components into chunks and only loading them when you need them. To do this Vue 3 has a function called definedAsyncComponent, which can be used to import the components asynchronously when they are used the first time, like this:
At first, it will only load MainComponent.vue and the button, but once the button is clicked it will try to render it, but it will import it first. In case is unrendered and rendered again, it won’t reimport it but use the initial load. Moreover, it has some cool functionalities like showing a loading or error component depending on the rendering status of the component wanted. From the Vue documentation:
The functionalities can be applied at any time as they work seamlessly to replace the basic local import. My tip is to always use dynamic import when you don’t need the component(s) as long as the page loads, but further on the process or maybe when a condition is triggered.
However, don’t use this strategy always because it will make your page feel slower if all components are asynchronously imported. Try to use it only in the components that are needed later or that require getting data from an API to be created; that way you can take advantage of the error and loading components better.
6. Keep-Alive component
Most of the time you don’t want or need to hit some endpoints multiple times as the data they returned won’t change. Or maybe you have a reactive variable that you don’t want to restart. In those cases, you can use <KeepAlive>, which is a built-in component that caches the instance of a component when you dynamically change between multiple components.
For example, you can change dynamically between two components and keep the data cached for each one by doing the following:
It will keep your data across the changes with no further configuration, in case you want to learn more about dynamic components check this part of the Vue documentation.
7. Animate using Transition
Transition is a built-in component created to facilitate the creation of animations in Vue. It can easily be used for simple animations, but if you have a more complex use case in mind, please check this article that explains how to use classes or watchers.
Transition can only be used to animate one component inside of it. And it works by detecting the entering and leaving states from the inner component. A simple example looks like this:
And you can see it working here:
This simple trick when using conditional rendering can help you improve your designs with ease. You could even integrate a CSS library like animate.css to avoid reinventing the wheel by using already-built and production-ready animation patterns.
Stay tuned for more articles like this one. If you would like me to write about something, in particular, let me know in the comments.
I am a lover of learning, so I would love to read your opinions and any feedback to continue my learning path, please go and leave a comment!
Thanks for reading this article and let’s create a better world together! ❤
Follow for more and share it if you liked it 😊
