A major release of Vue is coming in this year, and we can expect a faster, smaller, more maintainable, and easier-to-use version of Vue in the upcoming days. Although there’s no fixed date for Vue 3, the road map shows that release is planned for the second quarter of 2020, and the new version is in the beta stage. So let’s look at some of the features and changes in Vue 3.

---

Composition API

Previously, code organization in Vue was done using Options. Options is great, but it has compiler drawbacks when trying to match or access Vue logic. So with Vue 3, the Composition API will be introduced as a built-in feature, which is a much better solution to deal with code organization.

It also allows you to reuse pure JS functions in your Vue components with more freedom and flexibility, and it’ll result in fewer code lines as well.

With the Composition API, we can organize code by keeping the code of particular features together, which wasn’t possible in the Options API. Also, it makes sharing the code much easier. We can factor out the code for a particular feature and use it in multiple places. An example implementation of the Composition API is given below:

<script>
export default {
         setup() {
           return {
             getData(), 
             saveData(), 
             printData()
           }
         }
       } 
function getData() { } 
function saveData() { } 
function printData() { }
</script>

But if you think you don’t need the Composition API, Vue 3 will still support the Option API as well. But I think using both of these APIs sides by side will make your development life easier.

---

Teleport (Portals)

Photo by Ivan Aleksic on Unsplash

Teleport is a feature that allows you to render a part of the code that’s present in one component into a different component in a different DOM tree.

This feature was previously known as portals, and there’s a third-party library for that in Vue 2. With Vue 3, the portal feature is inbuilt and named Teleport. As the name implies Vue 3 contains a tag called <Teleport>, and any code snippet inside this tag will be ready to be teleported to somewhere.

---

Suspense

Suspense is a feature that renders a default component until the main component fetches the data. Suspense will be introduced to wait on nested async dependencies in a nested tree, and it’ll work well with async components.

<template>
  <Suspense>
    <template #default>
      <div v-for="student in studentList" :key="student.id">
        <article>
          <h2>{{ student.name}}</h2>
          <p>{{ student.address}}</p>
        </article>
      </div>
    </template>
    <template #fallback>
      Contacts loading...
    </template>
  </Suspense>
</template>
<script>
import axios from 'axios'
export default {
  async setup() {
    let studentList= await axios
      .get('<api call>')
      .then(response => {
        console.log(response)
        return response.data
      })
    return {
      studentList
    }
  }
}
</script>

---

Multiple Root Elements

Fragments will be introduced in Vue 3, and I think this is a much needed one because Vue templates can only have one tag. For example, the following code will give an error in Vue 2:

<template> 
 <div>Welcome to</div> 
 <div>Vue JS</div> 
</template>

But with the new release of Vue, the above restriction is lifted and the above code will compile successfully.

#javascript #programming #typescript #vue #vue-3