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
- Vue
<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.
- Vue
<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.
- Vue
<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.
- Vue
<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
toattribute (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
disabledandtocan 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.