{"slug": "how-does-vureact-compile-vue-3-s-defineslots-to-react", "title": "How does VuReact compile Vue 3's defineSlots() to React?", "summary": "VuReact is a compiler toolchain that facilitates migration from Vue to React by allowing developers to use Vue 3 syntax. The article explains that VuReact compiles Vue 3's `defineSlots()` macro into React prop types rather than a runtime Hook, mapping default slots to `children` and named slots to function-style props. This transformation preserves the natural relationship between Vue slots and React composition patterns.", "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 `defineSlots()`\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`defineSlots()`\n\n.\n\n## Compilation Mapping\n\n### Vue `defineSlots()`\n\n-> React slot prop types\n\n`defineSlots()`\n\nis the macro used inside Vue 3 `<script setup>`\n\nto declare component slot types.\n\nVuReact does not compile it into a runtime Hook. Instead, it maps slot declarations into the corresponding React `props`\n\ntypes, where slots become `children`\n\nor function-style props depending on the slot shape.\n\n- Vue\n\n``` js\n<script setup lang=\"ts\">\nconst slots = defineSlots<{\n  default?(): any;\n  footer(props: { count: number }): any;\n}>();\n</script>\n```\n\n- Compiled React\n\n```\ntype ICompProps = {\n  children?: React.ReactNode;\n  footer?: (props: { count: number }) => React.ReactNode;\n};\n```\n\nAs the example shows, Vue `defineSlots()`\n\nis transformed into React prop typing rather than a runtime API.\n\nVuReact maps the default slot to `children`\n\n, and named slots to the corresponding function-style props, preserving the natural relationship between Vue slots and React composition patterns.", "url": "https://wpnews.pro/news/how-does-vureact-compile-vue-3-s-defineslots-to-react", "canonical_source": "https://dev.to/smirk9581/how-does-vureact-compile-vue-3s-defineslots-to-react-3jad", "published_at": "2026-05-23 01:25:00+00:00", "updated_at": "2026-05-23 02:01:28.424462+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-defineslots-to-react", "markdown": "https://wpnews.pro/news/how-does-vureact-compile-vue-3-s-defineslots-to-react.md", "text": "https://wpnews.pro/news/how-does-vureact-compile-vue-3-s-defineslots-to-react.txt", "jsonld": "https://wpnews.pro/news/how-does-vureact-compile-vue-3-s-defineslots-to-react.jsonld"}}