DEV Community

Cover image for How does VuReact implement Vue dynamic components in React?
Ryan John
Ryan John

Posted on • Originally published at vureact.top

How does VuReact implement Vue dynamic components in React?

#webdev #javascript #vue #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" />
Enter fullscreen mode Exit fullscreen mode
  • Compiled React 
import { Component } from '@vureact/runtime-core';

<Component is={currentComponent} />
Enter fullscreen mode Exit fullscreen mode

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"
/>
Enter fullscreen mode Exit fullscreen mode
  • Compiled React 
<Component 
  is={currentView}
  title={pageTitle}
  data={pageData}
  onCustomEvent={handleCustom}
/>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
  • Compiled React 
<table>
  <UserRow />
</table>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
  • Compiled React 
<ul>
  <TodoItem />
</ul>
Enter fullscreen mode Exit fullscreen mode

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"
/>
Enter fullscreen mode Exit fullscreen mode
  • Compiled React 
import { dir } from '@vureact/runtime-core';

<Component 
  is={componentType}
  {...dir.keyless(componentProps)}
/>
Enter fullscreen mode Exit fullscreen mode

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:

Feature is attribute :is attribute
Purpose Resolves in-DOM template limitations Dynamically switches components
Syntax is="vue:component-name" :is="componentName"
Element Used inside specific HTML elements Used with <component> element
Compilation result Directly replaced with component Uses <Component 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

Top comments (0)