DEV Community

Ryan John
Ryan John

Posted on • Originally published at vureact.top

How does VuReact compile Vue 3's defineOptions() to React?

#webdev #productivity #react #vue

VuReact is a compiler toolchain for migrating from Vue to React — and for writing React with Vue 3 syntax.

In this article, we will look at how Vue 3's defineOptions() macro is mapped into React.

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 API shape and core behavior of Vue 3 defineOptions().

Compilation Mapping

Vue defineOptions({ name }) -> React component naming

defineOptions() is Vue 3's macro for declaring extra component options, such as the component name or option-level behavior.

VuReact does not compile defineOptions() into a runtime API. Instead, the name field is treated as compile-time information and can influence how the generated React component is named.

  • Vue 
<script setup lang="ts">
defineOptions({
  name: 'MyComponent',
});
</script>
Enter fullscreen mode Exit fullscreen mode
  • Compiled React 
const MyComponent = () => {
  return <></>;
};

export default MyComponent;
Enter fullscreen mode Exit fullscreen mode

As the example shows, defineOptions({ name }) is not translated into a Hook. It is used as component-definition metadata so the generated React output stays aligned with the original naming intent.

Other defineOptions() fields -> ignored or warned at compile time

defineOptions() may also include fields such as inheritAttrs or custom option values.

Because Vue and React do not share the same option system, VuReact handles those fields conservatively:

  • inheritAttrs: usually ignored, because there is no direct React equivalent
  • custom options: ignored or surfaced as compile-time hints

  • other non-runtime options: ignored when they do not have a meaningful React mapping

  • Vue

<script setup lang="ts">
defineOptions({
  name: 'MyComponent',
  inheritAttrs: false,
});
</script>
Enter fullscreen mode Exit fullscreen mode
  • Compiled React 
const MyComponent = () => {
  return <></>;
};

export default MyComponent;
// inheritAttrs has no direct React equivalent and is ignored
Enter fullscreen mode Exit fullscreen mode

VuReact statically analyzes non-runtime options and keeps compatibility where possible, while avoiding unnecessary runtime overhead in the generated React code.

A practical naming recommendation

In React, component names are usually determined by the variable name or export name. If you want the generated output to preserve a specific Vue component naming intent more explicitly, VuReact also supports naming through special comments:

<script setup lang="ts">
// @vr-name: MyComponent
</script>
Enter fullscreen mode Exit fullscreen mode

This gives the compiler a clearer naming signal even when defineOptions({ name }) is omitted or ignored.

Related Links

Top comments (0)