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

VuReact is a tool that compiles Vue 3 code into standard, maintainable React code. In this article, we will look at how Vue 3's defineProps() macro is mapped into React.

If you write defineProps() in Vue, what does VuReact generate on the React side?

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 defineProps().

Compilation Mapping

Vue defineProps<{ ... }>() -> React props type + props parameter

defineProps() is the macro used inside Vue 3 <script setup> to declare component props. It supports both type-based declarations and runtime declarations.

VuReact does not compile it into a runtime Hook. Instead, it converts the declaration into a standard React props type and a props parameter on the component.

• Vue

<script setup lang="ts">
const props = defineProps<{ id: string; enabled?: boolean }>();
</script>

• Compiled React

type ICompProps = {
  id: string;
  enabled?: boolean;
};

const Comp = (props: ICompProps) => {
  // ...
};

As the example shows, Vue defineProps() is transformed into normal React props typing rather than a runtime API.

VuReact extracts the type information from defineProps() and turns it into an explicit props type definition so that the output stays type-safe and aligns with normal React component conventions.

Vue defineProps(['foo', 'bar']) / defineProps({ ... }) -> React props inference

Besides the type-argument form, defineProps() also supports runtime declarations using arrays and objects. VuReact can infer props from those forms as well and map the result into React props when possible.

• Vue

<script setup>
const props = defineProps(['foo', 'bar']);
</script>

• Compiled React

type ICompProps = {
  foo?: any;
  bar?: any;
};

const Comp = (props: ICompProps) => {
  // ...
};

If you use the object form, the compiler also tries to preserve as much prop information as possible. That said, the type-argument form is still the recommended option because it produces clearer and more predictable typing on the React side.

Related Links

Repository: https://github.com/vureact-js/core

Docs: https://vureact.top/en/guide/semantic-comparison/script/define-props.html