DEV Community

Ryan John
Ryan John

Posted on • Originally published at vureact.top

Vue Teleport component React: How does VuReact convert it?

#webdev #javascript #react #vue

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:

  1. All Vue and React snippets focus on core logic only, with full component wrappers and unrelated configuration omitted.
  2. 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>
Enter fullscreen mode Exit fullscreen mode
  • Compiled React 
import { Teleport } from '@vureact/runtime-core';

<Teleport to="body">
  <Modal />
</Teleport>
Enter fullscreen mode Exit fullscreen mode

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:

  1. Semantic consistency: Fully simulates Vue <Teleport> behavior by implementing content teleportation
  2. DOM manipulation: Renders child content to the specified DOM location
  3. React integration: Implements teleportation within React's virtual DOM system
  4. 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>
Enter fullscreen mode Exit fullscreen mode
  • Compiled React 
<Teleport to="body" disabled={isMobile}>
  <Notification />
</Teleport>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
  • Compiled React 
<Teleport to="#modal-container">
  <ModalA />
</Teleport>

<Teleport to="#modal-container">
  <ModalB />
</Teleport>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
  • Compiled React 
<Teleport to="#dynamic-container" defer>
  <DynamicContent />
</Teleport>
Enter fullscreen mode Exit fullscreen mode

Compilation strategy summary

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

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

Core features:

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

Important notes:

  1. Target existence: The target container must exist, otherwise it falls back to rendering in place
  2. 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.

Related Links

Top comments (0)