How does VuReact implement Vue dynamic components in React?

VuReact is a compiler for migrating from Vue to React — and for writing React with Vue syntax. In this article, we dive straight into the core: how Vue's common is and :is attributes are 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 the usage and use cases of Vue 3's is attribute.

Compilation Mapping

Dynamic components: :is attribute

The :is attribute is used for dynamically rendering components. It allows you to decide which component to render based on data at runtime.

Basic dynamic components

• Vue

<component :is="currentComponent" />

• Compiled React

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

<Component is={currentComponent} />

As the example shows, Vue's :is attribute is compiled into the is prop of the Component adapter component — think of it as "Vue's dynamic component for React".

The key characteristics of this compilation approach are:

1. Semantic consistency: Fully simulates Vue's dynamic component behavior by implementing component switching
2. Component mapping: Converts Vue's <component> element into VuReact Runtime's <Component> component
3. Attribute passing: Preserves the dynamic binding capability of the is attribute

Dynamic components with props

Dynamic components often need props passed to them, and VuReact handles this correctly.

• Vue

<component 
  :is="currentView" 
  :title="pageTitle" 
  :data="pageData"
  @custom-event="handleCustom"
/>

• Compiled React

<Component 
  is={currentView}
  title={pageTitle}
  data={pageData}
  onCustomEvent={handleCustom}
/>

Props passing rules:

1. Attribute mapping: Converts Vue attributes to React props
2. Event conversion: Converts Vue events to React event props
3. Type preservation: Keeps the type definition integrity of props
4. Default value handling: Correctly handles component default props

Resolving DOM template limitations: is attribute

The is attribute is used to resolve in-DOM template parsing limitations, primarily for correctly rendering components inside elements like <table>, <ul>, <ol>, <select>, etc.

Using is in tables

• Vue

<table>
  <tr is="vue:user-row"></tr>
</table>

• Compiled React

<table>
  <UserRow />
</table>

Compilation strategy:

1. Component replacement: Replaces is="vue:user-row" with <UserRow />
2. Vue prefix handling: Automatically removes the vue: prefix
3. HTML structure preservation: Maintains correct HTML element nesting structure

Using is in lists

• Vue

<ul>
  <li is="vue:todo-item"></li>
</ul>

• Compiled React

<ul>
  <TodoItem />
</ul>

Dynamic components with v-bind

Dynamic components are often used together with v-bind for more flexible component configuration.

• Vue

<component 
  :is="componentType" 
  v-bind="componentProps"
/>

• Compiled React

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

<Component 
  is={componentType}
  {...dir.keyless(componentProps)}
/>

Object spread handling:

1. Attribute merging: Correctly handles merging of v-bind objects with explicit attributes
2. Conflict resolution: Handles attribute name conflicts
3. Special attribute conversion: Automatically converts special attributes like class, style, etc.

Compilation strategy summary

VuReact's is/:is compilation strategy demonstrates a complete dynamic component conversion capability:

1. Dynamic component rendering: Converts <component :is> to <Component is>
2. DOM limitation resolution: Directly replaces is="vue:component-name" with the component
3. Props passing: Correctly handles props passing for dynamic components
4. Component caching: Supports <KeepAlive> component caching
5. Animation support: Supports <Transition> component animations

Difference between is and :is:

VuReact's compilation strategy ensures a smooth migration from Vue to React. Developers do not need to manually rewrite dynamic component logic. The compiled code preserves Vue's semantics and flexibility while following React's component rendering patterns, keeping the migrated application fully capable of dynamic component switching.

Related Links

• Docs: https://vureact.top/en/guide/semantic-comparison/template/is.html
• GitHub: https://github.com/vureact-js/core