Vue Teleport component React: How does VuReact convert it?

VuReact is a compiler toolchain for migrating from Vue to React — and for writing React with Vue 3 syntax. In this article, we dive straight into the core: how Vue's built-in <Teleport> component is compiled into React code by VuReact.

Before We Start

To keep the examples easy to read, this article follows two simple conventions:

All Vue and React snippets focus on core logic only, with full component wrappers and unrelated configuration omitted.
The discussion assumes you are already familiar with Vue 3's <Teleport> component usage.

Compilation Mapping

Teleport: Portal component

<Teleport> is Vue's built-in component for rendering component content to other locations in the DOM tree. It is commonly used for modals, notifications, overlays, and other scenarios where content needs to be rendered outside the current component hierarchy.

Basic Teleport usage

<template>
  <Teleport to="body">
    <Modal />
  </Teleport>
</template>

Compiled React

import { Teleport } from '@vureact/runtime-core';

<Teleport to="body">
  <Modal />
</Teleport>

As the example shows, Vue's <Teleport> component is compiled into the Teleport adapter component provided by VuReact Runtime — think of it as "Vue's Teleport for React".

The key characteristics of this compilation approach are:

Semantic consistency: Fully simulates Vue <Teleport> behavior by implementing content teleportation
DOM manipulation: Renders child content to the specified DOM location
React integration: Implements teleportation within React's virtual DOM system
Performance optimization: Intelligently manages DOM node mounting and unmounting

Disabling teleportation

The disabled attribute can temporarily disable teleportation, causing the content to render in its original location.

<template>
  <Teleport to="body" :disabled="isMobile">
    <Notification />
  </Teleport>
</template>

Compiled React

<Teleport to="body" disabled={isMobile}>
  <Notification />
</Teleport>

Multiple Teleports to the same target

Multiple <Teleport> components can point to the same target container. Content is appended in render order.

<template>
  <Teleport to="#modal-container">
    <ModalA />
  </Teleport>

  <Teleport to="#modal-container">
    <ModalB />
  </Teleport>
</template>

Compiled React

<Teleport to="#modal-container">
  <ModalA />
</Teleport>

<Teleport to="#modal-container">
  <ModalB />
</Teleport>

Deferred teleportation

The defer attribute can delay teleportation until after the component is fully mounted.

<template>
  <Teleport to="#dynamic-container" :defer="true">
    <DynamicContent />
  </Teleport>
</template>

Compiled React

<Teleport to="#dynamic-container" defer>
  <DynamicContent />
</Teleport>

Compilation strategy summary

VuReact's Teleport compilation strategy demonstrates a complete portal conversion capability:

Direct component mapping: Maps Vue <Teleport> directly to VuReact's <Teleport>
Full attribute support: Supports all attributes including to, disabled, defer, etc.
DOM operation abstraction: Wraps React's Portal functionality to implement teleportation
Error handling: Handles edge cases such as the target container not existing

Core features:

Target specification: Specifies the teleport target via the to attribute (selector or DOM element)
Conditional teleportation: Controls whether teleportation is enabled via disabled
Deferred execution: Delays teleportation timing via defer
Multi-instance support: Supports multiple Teleports pointing to the same target

Important notes:

Target existence: The target container must exist, otherwise it falls back to rendering in place
Dynamic switching: Both disabled and to can be switched dynamically

VuReact's compilation strategy ensures a smooth migration from Vue to React. Developers do not need to manually implement portal logic. The compiled code preserves Vue's teleportation semantics and functionality while following React's component design patterns, keeping the migrated application fully capable of portal-based rendering.