DEV Community

Ryan John
Ryan John

Posted on • Originally published at vureact.top

Vue v-show React: How does VuReact convert it?

#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-show directive 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 v-show directive usage.

Compilation Mapping

v-show conditional display

v-show is Vue's directive for conditionally showing or hiding an element. Unlike v-if, v-show does not remove the DOM element — it controls visibility through the CSS display property.

  • Vue 
<div v-show="active">Content</div>
Enter fullscreen mode Exit fullscreen mode
  • Compiled React 
<div style={{ display: active ? '' : 'none' }}>Content</div>
Enter fullscreen mode Exit fullscreen mode

As the example shows, Vue's v-show directive is compiled into a React inline style object. VuReact adopts a style conditional compilation strategy, converting template directives into JSX's style property. This fully preserves Vue's show/hide semantics — when active is truthy, the element displays normally (display: '' uses the default value); when active is falsy, the element is hidden (display: 'none').

The key advantages of this compilation approach are:

  1. Semantic consistency: Fully simulates Vue v-show behavior by controlling visibility through CSS rather than removing the DOM
  2. Performance optimization: Avoids frequent DOM creation/destruction, ideal for scenarios with frequent visibility toggling
  3. CSS inheritance preserved: Uses display: 'none' instead of visibility: 'hidden', ensuring the element is completely removed from the document flow
  4. State preservation: Element states (such as form input values, scroll positions, etc.) are retained when hidden

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

Related Links

Top comments (0)