DEV Community

Ryan John
Ryan John

Posted on • Originally published at vureact.top

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

#webdev #javascript #vue #react

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:

  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 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.

  • Vue 
<div v-html="htmlContent"></div>
Enter fullscreen mode Exit fullscreen mode
  • Compiled React 
<div dangerouslySetInnerHTML={{ __html: htmlContent }} />
Enter fullscreen mode Exit fullscreen mode

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:

  1. Semantic consistency: Fully simulates Vue v-html behavior by directly rendering HTML strings
  2. Security warning: React's dangerouslySetInnerHTML property name itself reminds developers of XSS attack risks
  3. 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.

  • Vue 
<p v-text="message"></p>
Enter fullscreen mode Exit fullscreen mode
  • Compiled React 
<p>{message}</p>
Enter fullscreen mode Exit fullscreen mode

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:

  1. Semantic consistency: Fully simulates Vue v-text behavior by rendering plain text content
  2. Automatic escaping: React's JSX interpolation automatically escapes HTML special characters, preventing XSS attacks
  3. 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.

Related Links

Top comments (0)