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:
- 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 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>
- Compiled React
const MyComponent = () => {
return <></>;
};
export default MyComponent;
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>
- Compiled React
const MyComponent = () => {
return <></>;
};
export default MyComponent;
// inheritAttrs has no direct React equivalent and is ignored
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>
This gives the compiler a clearer naming signal even when defineOptions({ name }) is omitted or ignored.
