VuReact is a compiler toolchain for migrating from Vue to React — and for writing React with Vue 3 syntax. In this article, we dive straight into the core: what does Vue's defineAsyncComponent() for async components look like after being compiled by VuReact?
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 usage and core behavior of Vue 3's
defineAsyncComponent.
Compilation Mapping
Vue defineAsyncComponent() → React defineAsyncComponent()
defineAsyncComponent is Vue 3's API for defining async components. It allows you to load components on demand, optimizing application performance. VuReact compiles it into an identically named defineAsyncComponent, bringing the same async component capabilities to React.
- Vue
<script setup>
import { defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent(() =>
import('./components/AsyncComponent.vue')
);
</script>
<template>
<AsyncComponent />
</template>
- Compiled React
import { defineAsyncComponent } from '@vureact/runtime-core';
const AsyncComponent = defineAsyncComponent(() =>
import('./components/AsyncComponent')
);
function MyComponent() {
return <AsyncComponent />;
}
VuReact's defineAsyncComponent is the adapter API for Vue's defineAsyncComponent — think of it as "Vue's defineAsyncComponent for React". It fully simulates Vue's defineAsyncComponent async loading behavior — supporting lazy loading, loading state handling, error handling, and more.
Vue defineAsyncComponent advanced usage → React defineAsyncComponent advanced usage
defineAsyncComponent in Vue 3 supports various configuration options, such as loading state components, error handling components, timeout settings, and more. VuReact compiles these into the corresponding React configuration, maintaining functional consistency.
- Vue
<script setup>
import { defineAsyncComponent } from 'vue';
const AsyncComponent = defineAsyncComponent({
loader: () => import('./components/HeavyComponent.vue'),
loadingComponent: LoadingSpinner,
errorComponent: ErrorDisplay,
delay: 200,
timeout: 3000,
suspensible: true,
});
</script>
- Compiled React
import { defineAsyncComponent } from '@vureact/runtime-core';
import LoadingSpinner from './components/LoadingSpinner';
import ErrorDisplay from './components/ErrorDisplay';
const AsyncComponent = defineAsyncComponent({
loader: () => import('./components/HeavyComponent'),
loadingComponent: LoadingSpinner,
errorComponent: ErrorDisplay,
delay: 200,
timeout: 3000,
suspensible: true,
});
VuReact's defineAsyncComponent supports all configuration options from Vue's defineAsyncComponent, including loader, loadingComponent, errorComponent, delay, timeout, suspensible, and more. It fully simulates the advanced features of Vue's defineAsyncComponent — delivering a consistent async component experience in React that mirrors Vue.
