Vue 3 New Features: New APIs, Teleport, Suspense, and Beyond

Vue 3 represents a significant milestone in the evolution of the Vue.js framework. Built from the ground up with TypeScript, it introduces powerful new capabilities aimed at improving performance, maintainability, and developer productivity. Whether you’re working on small projects or large-scale applications, understanding Vue 3’s core improvements will help you build better software.

This article explores the most important features introduced in Vue 3, with real-world examples and practical use cases.

1. Composition API

The Composition API is one of the most impactful additions in Vue 3. It offers an alternative to the traditional Options API and is designed to promote better organization of logic, especially in complex components.

Example

vueCopyEdit<script setup>
import { ref, onMounted } from 'vue'

const count = ref(0)

onMounted(() => {
  console.log('Component mounted')
})
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

Benefits

Code is grouped by logical concern instead of component options
Encourages reuse through composables
Greatly improves TypeScript support
Leads to cleaner and more scalable components

2. `<script setup>` Syntax

Introduced in Vue 3.2, the <script setup> syntax is a compiler macro that simplifies component setup using the Composition API. It reduces boilerplate and enables more concise, readable code.

Key Features

No need to manually return data or functions from the setup() function
Props and emits are automatically inferred
Works seamlessly with TypeScript

vueCopyEdit<script setup>
const message = 'Hello from Vue 3'
</script>

<template>
  <p>{{ message }}</p>
</template>

3. Performance Improvements

Vue 3 delivers notable performance gains compared to Vue 2. Thanks to its new virtual DOM implementation and optimized dependency tracking, Vue 3 offers:

Faster rendering
Smaller bundle sizes through tree-shaking
Lower memory usage
Improved startup time

This makes Vue 3 highly suitable for performance-critical applications and mobile web interfaces.

4. Fragments (Multiple Root Elements)

Vue 2 required a single root element in every component, often resulting in unnecessary wrapper elements. Vue 3 eliminates this limitation, allowing components to return multiple root nodes directly.

Example

vueCopyEdit<template>
  <header>Header</header>
  <main>Main content</main>
  <footer>Footer</footer>
</template>

This leads to cleaner, more semantic HTML and avoids unnecessary DOM nesting.

5. Teleport

The Teleport feature allows developers to render a component’s content outside its parent DOM hierarchy. This is particularly useful for components like modals, tooltips, and dropdowns that need to exist at a different position in the DOM (typically near the <body>).

Example

vueCopyEdit<teleport to="body">
  <div class="modal">I’m rendered in the body element</div>
</teleport>

This feature eliminates the need for workarounds involving manual DOM manipulation or third-party portal libraries.

6. Suspense

The Suspense component allows developers to handle asynchronous dependencies in a component and provide fallback content while waiting for them to load.

Example

vueCopyEdit<Suspense>
  <template #default>
    <AsyncComponent />
  </template>
  <template #fallback>
    <LoadingIndicator />
  </template>
</Suspense>

Suspense helps manage loading states declaratively and keeps your component code focused and clean.

7. Proxy-Based Reactivity System

Vue 3 replaces the reactivity system used in Vue 2 (based on Object.defineProperty) with a new implementation built on ES6 Proxy. This change brings more powerful and flexible reactivity.

Advantages

No need to use Vue.set() or this.$set() for new properties
Full reactivity for nested properties and arrays
Improved performance and reactivity tracking accuracy

javascriptCopyEditimport { reactive } from 'vue'

const state = reactive({
  user: {
    name: 'John',
    age: 30
  }
})

8. Improved TypeScript Support

Vue 3 was written in TypeScript and provides full TypeScript support out of the box. This includes strong typing for props, emits, refs, and more. Combined with the Composition API and the <script setup> syntax, Vue 3 offers a much smoother developer experience when working with TypeScript.

Developers can now enjoy intelligent autocompletion, type checking, and editor integrations using tools like Volar in VS Code.

9. Multiple v-model Bindings

Vue 3 introduces support for multiple v-model bindings on the same component. This is particularly useful for form components that accept multiple values.

Example

vueCopyEdit<MyInput v-model:title="title" v-model:description="description" />

Inside the component, you would define the props and emit events accordingly:

javascriptCopyEditdefineProps(['title', 'description'])
defineEmits(['update:title', 'update:description'])

This allows for greater flexibility and cleaner two-way data binding.

10. Custom Renderer API — Bringing Vue Beyond the Browser

One of the most underappreciated yet powerful features introduced in Vue 3 is the Custom Renderer API. While Vue is traditionally associated with web-based user interfaces rendered in the DOM, this API empowers developers to extend Vue’s reactive component system to any environment, not just the browser.

Think beyond HTML and CSS — you can now use Vue to render:

Native mobile UIs
Canvas-based 2D/3D graphics
Terminal-based interfaces
WebGL visualizations
PDF layouts
Embedded systems

This is possible thanks to a low-level abstraction layer that separates Vue’s core reactivity and component logic from the platform-specific rendering logic.

Conclusion

Vue 3 is a powerful and modern framework that significantly improves on its predecessor. With features like the Composition API, improved performance, enhanced TypeScript support, and new built-in components like Suspense and Teleport, Vue 3 is well-equipped to handle the demands of modern frontend development.

If you’re starting a new project, Vue 3 is the clear choice. And if you’re still using Vue 2, it’s time to start planning your migration.

Further reading: