Vue 3: the best bits

Here are my favorite new features of Vue 3.

# Multiple root elements 🥕🥕🥕

There is no need for wrapper elements in your component template. This makes me happy 😄

<template>
  <header>Lots</header>
  <aside>of</aside>
  <main>root</main>
  <footer>elements!</footer>
</template>

# Teleporting elements 🌀

Vue 3 lets you move elements to different places in the DOM.

First decide on a target you would like your elements to teleport into:

<header id="page-header"></header>

Then use the build-in 'Teleport' component and tell it where to teleport to:

<Teleport to="#page-header">
  <button>The button magically appears in the target div!</button>
  <p>So will this paragraph!</p>
<Teleport>

The teleported elements are still part of the component and respond and render according to the functionality of the component, but they are appended inside the target element in the DOM. This is great for UI features like popups or sidebars that display separately from the component that controls them.

# Suspense fallbacks ⌛️

Suspense is used to render fallback content while the default is unavailble, for example:

<Suspense>
  <template #default>
    <p>Your order number is {{ ordernum }}</p>
  </template>

  <template #fallback>
    <p>Loading order...</p>
  </template>
</Suspense>

# The emits option 🎉

Used to define the events that a component is capable of emitting:

export default {
  props: ['acceptText'],
  emits: ['accepted']
}

You still emit events in the same way:

<button @click="$emit('accepted')">{{ acceptText }}</button>

The benefits are all in the dev experience, with better IDE support and more readable code.

# Multiple v-models 📋

You now write v-model like this:

<input v-model:name="username" />

This means you can add multiple v-models to a component:

<ContactForm
  v-model:name="username"
  v-model:email="useremail"
/>

# Deeper reactivity ⚡️

Vue 3 reacts to changes to items within arrays and properties inside objects. It just works! You can do:

this.vegetables[0] = "Artichoke"
this.user.name = "Pete"

Vue 3 will react to these changes automatically!

# The Composition API 🏗

Last, but definitely not least, this is the most talked-about feature of Vue 3.

The composition API is an alternative to the Options API, but they can be used together. It can be used for splitting and sharing functionality between components and it also works great with TypeScript. It can also be used to roll your own state management if you don't want to use Vuex

If you're using the composition API, it's keeping an eye on the RFC for the experimental <script setup> syntax.

I'll be looking at Vue 3 and TypeScript in my next post.