What’s new in Vue 3?

2 min readMay 29, 2020

As some of you may know, Vue 3 is currently in Beta. It has some new promising features that I’m going to go over here. If you want to be ahead of the curve and try out Vue 3, check out this article from Gregg Pollack that gets you up and running.

Here’s what’s new in Vue 3

A new way to create & mount your apps

Vue 3 is changing the way Global APIs work. This means that global APIs that affect Vue’s behavior, are now being moved up to app instances using the new createApp() method. Global APIs that do not affect Vue are called exports.

// ====== BEFORE ======
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = falseVue.use(/*...*/)

new Vue({
    render: h => h(App),
}).$mount('#app')// ====== AFTER ======
import { createApp } from 'vue' 
import App from './App.vue'const app = createApp()app.use(/*...*/)app.mount('#app')

Composition API

The Composition API is a new feature that is going to completely take over Vue 2 components. It’s a way to more effectively write and understand components.

The goal here is to make reusable components more readable and maintainable by organizing the code into groups, instead of having it separated.

So, as you can see, the composition API makes things a lot cleaner and readable that before. For a more detailed explanation, have a look at the full post here.

Suspense

Suspense allows you to set a default and fallback template.

<template>
  <div>
    <Suspense>
      <template #default>
        // Code goes here
        <Articles />
      </template>
      <template #fallback>
        // This executes if #default doesn't load
        <Loading />
      </template>
    </Suspense>
  </div> 
</template>

So instead of using v-if to know whether data has loaded or not, Suspense does that all for you.

Portals

In Vue 3, portals will allow you to target render whole DOM trees. This is done with <Portal />.

<Portal target="#target-location">
  <p>Hello</p>
</Portal>// Gets rendered in<div id="target-location"></div>

These portals will make things much easier when working in a big component tree.

Thanks for reading
Stay safe
Herbie