Vue is a web application interface framework that may be used to build the "view" of a program. It may be utilized with monolithic frameworks like React and Angular to provide the user interface while those other two take care of the heavy lifting.
Let's take a look at when Vue 3 was released. According to the usual update, in 18th September 2020, Vue.js released its highly anticipated third version, which introduced a range of improvements. By February 2022, Vue 3 had become the iew default version, celebrated for its smaller size, easier maintainability, and a host of convenient features that make building modern web applications even more efficient and enjoyable. Now, we will explore the new Vue here.
What’s New in Vue 3?: Let’s Understand the New Components, Features, and Changes!
The Composition API
As an alternative to the standard Vue Options API, Composition was developed. It was created using Typescript's compatibility, as well as other design goals including reusability, low maintenance, and the grouping of features by logical concern.
If you're familiar with the Options API, how does this feature stack up? When implementing the Options API in a relatively straightforward component, things may rapidly become unwieldy due to the presence of several moving parts, including data, methods, props, components, calculated values, and more. Some of your functionality may have been broken up over many separate parts of your code.
How would something manifest itself in a grid-based representation? This sample just demonstrates the possibilities and a list of what may be included in each subheading. This would be a big bit of code if you were to develop it from scratch.
<script>
export default {
data () {
return {
//Properties for data
//Properties for filtering
//Properties for sorting
//Properties for paging
}
},
methods: {
//Methods for data
//Methods for filtering
//Methods for sorting
//Methods for paging
},
computed: {
//Values for data
//Values for filtering
//Values for sorting
//Values for paging
}
}
</script>
You can see how the many choices of the Options API cover the varying needs of each logical section.
By using the Composition API, we can make this more readable and easy to update. In an example script where an integer is being multiplied by two, the setup technique is introduced and explained as follows.
<script>
import { ref } from "@vue/composition-api"
export default {
setup () {
const theNumber = ref(1)
function doubleTheNumber () {
theNumber.value = parseInt(theNumber.value) * 2
}
return {
theNumber,
doubleTheNumber
}
}
}
</script>
Does this imply you'll be forced to use a single, cumbersome procedure to configure all of your parts? Absolutely not. Composition functions may be used elsewhere (in other files) to keep your installation procedure from becoming too large. The benefits of programming modularity and reusability are greatly enhanced in this scenario. Any number of parts may make use of the composition function.
Full TypeScript Support
Version 3 of Vue has complete TypeScript compatibility. TypeScript was flexible enough to be crammed into a Vue 2 app. The setup wasn't ideal and often seemed slapped together. TypeScript is used for the development of Vue 3, which has auto-generated type definitions and a compatible API in both TypeScript and JavaScript.
Portals
The idea of a portal is unique to the React framework. Simply said, a Portal's job is to make something appear somewhere other than where it was stated. When working with Vue 3, a Portal may be used to render a component, or a portion of a component, somewhere in the DOM tree.
Modals, alerts, pop-ups, and so on may all benefit from the use of portals. You want certain components to stand out from the rest of the page and be shown at the top. You can avoid illogical z-indexing, unexpected placement of components, and other CSS messes using Portals.
You will need an Id-containing tag in order to include a Portal into your application. Put the modal's of-containing div> just before the end of your HTML body.
The code reads as follows:
Unfortunately, this app requires JavaScript in order to function. If possible, let it keep going.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<noscript>
<strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<div id="modal"></div>
<!-- built files will be auto injected -->
</body>
</html>
Fragments
The idea of Fragments, also known as "Multiple Root Nodes," is another contribution by React. One root element per component is the limit in Vue 2. Fragments solve this problem by letting you utilize many root nodes inside a single component.
Having many root nodes is as easy as it sounds. One caveat, however, is that if you wish to utilize attribute inheritance, you'll need to designate which of the root components should take on the attributes of the parent component.
The structure of this document looks like this:
<template>
<ComponentOne />
<ComponentTwo v-bind="$attrs"/>
<ComponentThree />
</template>
Multiple root nodes are supported out of the box with Vue 3, so there's no learning curve to worry about.
Suspense
When a condition is not satisfied, the suspense component will display a fallback instead of your component.
As a developer, you may recall the many times you've created components using v-if="!isLoading" on the root element and v-else on the second element to render while content loads, such as from an API or other asynchronous request.
The genre of Suspense was created specifically for this purpose. A much more elegant syntax is shown in the following sample template than in the v-if variant.
<Suspense>
<template #default>
<MyData />
</template>
<template #fallback>
<div>Loading...</div>
</template>
</Suspense>
When your component has to be loaded (as opposed to when it already was), how does it know this? The aforementioned setup procedure and the Composition API both have this functionality. Setting up an async setup method triggers Suspense, which displays the fallback once the initialization phase completes.
The following code sample illustrates how the fallback would work until the getMyData request is finished.
export default {
async setup () {
const data = await getMyData()
return { data }
}
}
Because of this function, the amount of repetitive code needed to make calls to the outside world is much reduced, and in a very beautiful way.
Global Mounting and Configuration
The process of declaring and mounting an instance of your Vue application has changed significantly from using a single global instance to doing so in many places.
In Vue 3, the configuration API has been updated to enhance the flexibility of what can be achieved with a single global instance.
The current RFC introduces new syntax that simplifies and expands the possibilities for developers.
You can find these updated syntax snippets in the VueJS repository, which provides a clearer and more efficient way to work with the configuration API.
And here's what it looks like:
Current Vue
Here are several syntax examples, both old and new, that can be found in the RFC repository of vuejs.
import Vue from 'vue'
import App from './App.vue'
Vue.config.ignoredElements = [/^app-/]
Vue.use(/* ... */)
Vue.mixin(/* ... */)
Vue.component(/* ... */)
Vue.directive(/* ... */)
new Vue({
render: h => h(App)
}).$mount('#app')
New vue
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.config.ignoredElements = [/^app-/]
app.use(/* ... */)
app.mixin(/* ... */)
app.component(/* ... */)
app.directive(/* ... */)
app.mount('#app')
Is the creation of new applications now feasible? Maybe. However, it is evident that there is not a single case, and that much more may be accomplished using the new method.
Multiple v-Models
The term "v-model" will be instantly recognizable to anybody who has used Vue. It's an instruction for making a component capable of bidirectional binding. To edit a reactive property from inside, you may use this. However, sending in value and listening for the input event are both possible without using the v-model.
So, what exactly does it mean to have "many v-models"? There may have been times when you needed to bind and listen to more than one property in a component. The Name component, for instance, may include the options "Forename" and "Surname" as its values. Multiple v-models come into play when you need a v-model for each of those values.
<NameComponent
v-model:fornames="forname"
v-model:surname="surname"
/>
Do you find this new syntax to be simple? It is, and from this point forward you may give your v-models proper titles.
Custom Directive API
You should already be familiar with the concept of a directive from your time spent using Vue. In discussing the v-model, we have shown one of the most important of the predefined directives. V-show is only one example; there are many more.
Vue 2 allows you to create your own directives. In Vue 3, however, there will be alterations. The mystery is in the why. As it is, the Directive API does not conform to the standard Vue lifecycle since it has its own set of lifecycle methods. Unbind, Insert, Update, and the ComponentUpdated all fall under the "bind" category.
Vue 3 aligns these methods with the typical Vue lifecycle, so you now have access to beforeMount, mounted, beforeUpdate, updated, beforeUnmount, and unmounted. This will make developing your app much simpler to remember. You won't have to waste time guessing which technique you need or attempting to keep track of two distinct lifetimes.
Why Vue.js Development with Vue 3 Signals a Bright Future
With Vue 3’s new capabilities, there’s no better time to leverage its potential. At Trreta, our expertise in Vue.js development allows us to build faster, more efficient applications that adapt seamlessly to the latest advancements. Vue 3 is compatible with earlier versions (with only minor code tweaks), enhancing rather than replacing current development practices. This flexibility, combined with Vue 3’s performance boost, enables us to deliver robust solutions, driving success for our clients and setting new standards in application quality and speed.
FAQs
1. What's new in Vue.js 3?
Vue 3 has officially been released with full TypeScript support, bringing a host of exciting new features that can enhance your existing Vue applications. Key updates include the Composition API, improved V-model, Portals, support for multiple root elements, Suspense, and much more. Now is the perfect time to explore and implement these features to take your Vue projects to the next level.
2. Is Vue 3 different from Vue 2?
Vue 3 is the latest major version of the framework, introducing new features like Teleport, Suspense, and support for multiple root elements per template, which are not available in Vue 2. However, these enhancements come with breaking changes that make Vue 3 incompatible with its predecessor, Vue 2.
3. Does Vue 3 work faster than React?
Vue.js is often praised for its higher performance speed, with many programmers finding it faster and easier to use than React.js. This ease of use is one of the key reasons why developers prefer Vue over React, as it simplifies the development process and streamlines workflow.
4. Does Vue 3 have stability?
Yes, Vue 3 is stable and fully suitable for production. We also have ongoing projects using Vue 2, and while it's become a large project, upgrading might be challenging at this point. However, it’s still working fine, so there's no immediate need to upgrade.
5. Why you need to upgrade to Vue 3?
Upgrading to Vue.js 3 brings a host of benefits that significantly enhance the performance, efficiency, and maintainability of your web application. With its improved performance, the introduction of the Composition API, better TypeScript support, an optimized reactivity system, and a smaller bundle size, Vue.js 3 is a powerful tool for building faster, more scalable applications.
