Vue v-if to React: How does VuReact handle 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-if/v-else/v-else-if 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 conditional directive usage.

Compilation Mapping

Basic v-if conditional rendering

The simplest v-if directive, used to show or hide an element based on a condition.

<div v-if="cond">Content</div>

Compiled React

{
  cond ? <div>Content</div> : null;
}

As the example shows, Vue's v-if directive is compiled into a React ternary expression. VuReact adopts a conditional expression compilation strategy, converting template directives into JSX inline expressions. This fully preserves Vue's conditional rendering semantics — when cond is truthy, <div> is rendered; when falsy, null is rendered (React does not render null to the DOM).

v-if with v-else

v-if combined with v-else implements a two-way conditional rendering.

<div v-if="cond">Content</div>
<div v-else>Other content</div>

Compiled React

{
  cond ? <div>Content</div> : <div>Other content</div>;
}

VuReact compiles the v-if/v-else combination into a complete ternary expression, fully simulating Vue's conditional branch semantics — both branches are mutually exclusive, ensuring only one element is rendered at a time. This compilation approach keeps the code concise and readable while perfectly aligning with React's expression-based rendering pattern.

Multi-condition v-else-if chains

Complex multi-condition judgment chains using v-if, v-else-if, and v-else.

<div v-if="type === 'A'">Content A</div>
<div v-else-if="type === 'B'">Content B</div>
<div v-else>Other content</div>

Compiled React

{
  type === 'A' ? <div>Content A</div> : type === 'B' ? <div>Content B</div> : <div>Other content</div>;
}

For multi-condition chains, VuReact adopts a nested ternary expression compilation strategy, converting Vue's v-else-if chain into nested conditional expressions. This compilation approach fully preserves Vue's conditional chain semantics — conditions are checked in order, the first matching branch is rendered, and subsequent branches are skipped. While nested ternaries can affect readability in complex scenarios, VuReact handles complex nesting intelligently, splitting into separate variables or functions when necessary.

Complex business scenario conditional rendering

Real-world complex conditional rendering involving nested conditions, event bindings, interpolation expressions, and more.

<div v-if="user.role === 'admin' && (user.permissions.includes('write') || isSuperAdmin)">
  <h1>Admin Dashboard</h1>
  <button @click="deleteAll">Delete All Data</button>
</div>
<div v-else-if="user.role === 'editor' && articles.length > 0 && !isSuspended">
  <h2>Edit Articles ({{ articles.length }} total)</h2>
  <ul>
    <li v-for="article in articles" :key="article.id">{{ article.title }}</li>
  </ul>
</div>
<div v-else-if="user.role === 'viewer' && hasSubscription">
  <h3>Subscriber View</h3>
  <p>Your subscription expires on {{ subscriptionEndDate }}</p>
</div>
<div v-else-if="user.role === 'guest' && showTrial">
  <div class="trial-banner">
    <p>Trial user, {{ trialDays }} days remaining</p>
    <button @click="upgrade">Upgrade Account</button>
  </div>
</div>
<div v-else>
  <div class="error-state">
    <p v-if="isLoading">Loading...</p>
    <p v-else-if="errorMessage">{{ errorMessage }}</p>
    <p v-else>No access or irregular account status</p>
    <button @click="retry">Retry ({{ retryCount }}/3)</button>
  </div>
</div>

Compiled React

{
  user.role === 'admin' && (user.permissions.includes('write') || isSuperAdmin) ? (
    <div>
      <h1>Admin Dashboard</h1>
      <button onClick={deleteAll}>Delete All Data</button>
    </div>
  ) : user.role === 'editor' && articles.length > 0 && !isSuspended ? (
    <div>
      <h2>Edit Articles ({articles.length} total)</h2>
      <ul>
        {articles.map((article) => (
          <li key={article.id}>{article.title}</li>
        ))}
      </ul>
    </div>
  ) : user.role === 'viewer' && hasSubscription ? (
    <div>
      <h3>Subscriber View</h3>
      <p>Your subscription expires on {subscriptionEndDate}</p>
    </div>
  ) : user.role === 'guest' && showTrial ? (
    <div>
      <div className="trial-banner">
        <p>Trial user, {trialDays} days remaining</p>
        <button onClick={upgrade}>Upgrade Account</button>
      </div>
    </div>
  ) : (
    <div>
      <div className="error-state">
        {isLoading ? (
          <p>Loading...</p>
        ) : errorMessage ? (
          <p>{errorMessage}</p>
        ) : (
          <p>No access or irregular account status</p>
        )}
        <button onClick={retry}>Retry ({retryCount}/3)</button>
      </div>
    </div>
  );
}

For complex business scenarios, VuReact demonstrates its full conditional compilation capability:

Complex conditional expressions: Converts Vue's complex condition logic (&&, ||, function calls, etc.) into JSX expressions as-is
Event binding conversion: @click is converted to onClick, preserving event semantics
Interpolation expressions: {{ }} is converted to { }, preserving data binding
Style class name conversion: class is converted to className, following React conventions

VuReact's compilation strategy fully preserves Vue's conditional rendering semantics while generating code that follows React best practices for improved maintainability.