{"slug": "how-does-vureact-compile-vue-3-s-defineexpose-to-react", "title": "How does VuReact compile Vue 3's defineExpose() to React?", "summary": "VuReact is a compiler toolchain that converts Vue 3 syntax into React code, specifically mapping Vue 3's `defineExpose()` macro to React's `forwardRef()` and `useImperativeHandle()` combination. When a parent component accesses exposed child values through a ref, VuReact translates Vue's `ref` and `expose` pattern into React's `useRef()` and `ref.current` syntax, preserving the structure and interaction model of the original Vue code.", "body_md": "[VuReact](https://github.com/vureact-js/core) is a compiler toolchain for migrating from Vue to React — and for writing React with Vue 3 syntax.\n\nIn this article, we will look at how Vue 3's `defineExpose()`\n\nmacro is mapped into React.\n\n## Before We Start\n\nTo keep the examples easy to read, this article follows two simple conventions:\n\n- All Vue and React snippets focus on core logic only, with full component wrappers and unrelated configuration omitted.\n- The discussion assumes you are already familiar with the API shape and core behavior of Vue 3\n`defineExpose()`\n\n.\n\n## Compilation Mapping\n\n### Vue `defineExpose()`\n\n-> React `forwardRef()`\n\n+ `useImperativeHandle()`\n\n`defineExpose()`\n\nis the macro used inside Vue 3 `<script setup>`\n\nto expose internal state or methods from a child component to its parent.\n\nVuReact compiles that pattern into React's `forwardRef()`\n\nplus `useImperativeHandle()`\n\n, allowing the parent component to access the exposed object through a ref.\n\n- Vue\n\n``` js\n<script setup lang=\"ts\">\nimport { ref, defineExpose } from 'vue';\n\ndefineProps<{ title: string }>();\n\nconst count = ref(0);\nconst increment = () => count.value++;\n\ndefineExpose({\n  count,\n  increment,\n});\n</script>\n```\n\n- Compiled React\n\n``` js\nimport { forwardRef, useCallback, useImperativeHandle, memo } from 'react';\nimport { useVRef } from '@vureact/runtime-core';\n\ntype IComponentProps = { title: string };\n\nconst Component = memo(\n  forwardRef<any, IComponentProps>((props, expose) => {\n    const count = useVRef(0);\n\n    const increment = useCallback(() => {\n      count.value++;\n    }, [count.value]);\n\n    useImperativeHandle(expose, () => ({\n      count,\n      increment,\n    }));\n\n    return <div>{count.value}</div>;\n  }),\n);\n\nexport default Component;\n```\n\nAs the example shows, Vue `defineExpose()`\n\nis compiled into React's `forwardRef()`\n\nand `useImperativeHandle()`\n\ncombination.\n\nVuReact preserves the structure of the exposed object, and exposed refs still use `.value`\n\n, which keeps the interaction model close to Vue.\n\n### Parent access: Vue `ref`\n\n+ expose -> React `ref.current`\n\nIn Vue, parent components access exposed child values through `ref`\n\nand `expose`\n\n. In React, VuReact maps that pattern to `useRef()`\n\nplus `ref.current`\n\n.\n\n- Vue parent\n\n```\n<template>\n  <Component ref=\"childRef\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { onMounted, ref } from 'vue';\n\nconst childRef = ref();\n\nonMounted(() => {\n  childRef.value?.count.value; // 0\n  childRef.value?.increment();\n  childRef.value?.count.value; // 1\n});\n</script>\n```\n\n- Compiled React parent\n\n``` js\nconst Parent = () => {\n  const childRef = useRef();\n\n  useMounted(() => {\n    childRef.current?.count.value; // 0\n    childRef.current?.increment();\n    childRef.current?.count.value; // 1\n  });\n\n  return <Component ref={childRef} />;\n};\n```\n\nVuReact keeps the parent access path aligned with the original Vue intent, so exposed child refs and methods remain straightforward to use.", "url": "https://wpnews.pro/news/how-does-vureact-compile-vue-3-s-defineexpose-to-react", "canonical_source": "https://dev.to/smirk9581/how-does-vureact-compile-vue-3s-defineexpose-to-react-1jhj", "published_at": "2026-05-23 02:25:00+00:00", "updated_at": "2026-05-23 03:05:22.505161+00:00", "lang": "en", "topics": ["developer-tools", "open-source"], "entities": ["VuReact", "Vue", "React"], "alternates": {"html": "https://wpnews.pro/news/how-does-vureact-compile-vue-3-s-defineexpose-to-react", "markdown": "https://wpnews.pro/news/how-does-vureact-compile-vue-3-s-defineexpose-to-react.md", "text": "https://wpnews.pro/news/how-does-vureact-compile-vue-3-s-defineexpose-to-react.txt", "jsonld": "https://wpnews.pro/news/how-does-vureact-compile-vue-3-s-defineexpose-to-react.jsonld"}}