Vue v-html and v-text to React: How does VuReact handle them?

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 common v-html/v-text directives are 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 v-html and v-text directive usage.

Compilation Mapping

v-html: Dynamic HTML content rendering

v-html is Vue's directive for dynamically rendering an HTML string as DOM elements. It replaces all content inside the element and parses HTML tags.

<div v-html="htmlContent"></div>

Compiled React

<div dangerouslySetInnerHTML={{ __html: htmlContent }} />

As the example shows, Vue's v-html directive is compiled into React's dangerouslySetInnerHTML property. VuReact adopts an HTML injection compilation strategy, converting the template directive into React's special property. This fully preserves Vue's HTML rendering semantics — parsing the htmlContent string as HTML and inserting it into the DOM.

The key characteristics of this compilation approach are:

Semantic consistency: Fully simulates Vue v-html behavior by directly rendering HTML strings
Security warning: React's dangerouslySetInnerHTML property name itself reminds developers of XSS attack risks
Content replacement: Just like Vue, it replaces all existing content inside the element

v-text: Plain text content rendering

v-text is Vue's directive for setting plain text content inside an element. It replaces all content inside the element but does not parse HTML tags.

<p v-text="message"></p>

Compiled React

<p>{message}</p>

As the example shows, Vue's v-text directive is compiled into a React JSX interpolation expression. VuReact adopts a text interpolation compilation strategy, converting the template directive into JSX's curly brace expression. This fully preserves Vue's text rendering semantics — inserting message as plain text content into the element.

The key characteristics of this compilation approach are:

Semantic consistency: Fully simulates Vue v-text behavior by rendering plain text content
Automatic escaping: React's JSX interpolation automatically escapes HTML special characters, preventing XSS attacks
Content replacement: Just like Vue, it replaces all existing content inside the element

VuReact's compilation strategy ensures a smooth migration from Vue to React. Developers do not need to manually rewrite content rendering logic — the compiled code preserves Vue's semantics while following React's security best practices.