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 useAttrs() API 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
useAttrs().
Compilation Mapping
Vue useAttrs() -> React props reference
useAttrs() is Vue 3's API for accessing fallthrough attributes that were not declared in defineProps().
In React, all incoming attributes already flow through props, so VuReact compiles useAttrs() into a reference to props.
Tip: if the component does not already declare props, VuReact can add a suitable props parameter automatically, such as props or props: Record<string, unknown>.
- Vue
<script setup lang="ts">
const attrs = useAttrs();
</script>
- Compiled React
const attrs = props as Record<string, unknown>;
As the example shows, Vue useAttrs() becomes a direct reference to React props.
VuReact preserves the runtime meaning of useAttrs() while aligning it with React's native props model.
TypeScript handling for useAttrs()
VuReact also preserves or supplements type information where possible, so attrs access remains type-safe on the React side.
- Vue
<script setup lang="ts">
interface Attrs {
class?: string;
style?: string;
[key: string]: unknown;
}
const attrs = useAttrs();
const { style, class: cls } = useAttrs() as Attrs;
const typeAnnotation: Attrs = useAttrs();
</script>
- Compiled React
interface Attrs {
class?: string;
style?: string;
[key: string]: unknown;
}
const attrs = props as Record<string, unknown>;
const { style, class: cls } = props as Attrs;
const typeAnnotation = props as Attrs;
VuReact adds assertions or preserves explicit annotations when needed so that the generated React code keeps useful type information.
useAttrs() in plain JavaScript
In plain JavaScript files, VuReact can replace useAttrs() with a direct reference to props without extra typing.
- Vue
<script setup>
const attrs = useAttrs();
</script>
- Compiled React
const attrs = props;
That keeps the behavior simple: in JavaScript scenarios, attrs is still the object that carries incoming component attributes, just through React's props mechanism.
Top comments (0)