DEV Community

Ryan John
Ryan John

Posted on • Originally published at vureact.top

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

#react #vue #webdev #javascript

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:

  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 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>
Enter fullscreen mode Exit fullscreen mode
  • Compiled React 
import { defineAsyncComponent } from '@vureact/runtime-core';

const AsyncComponent = defineAsyncComponent(() =>
  import('./components/AsyncComponent')
);

function MyComponent() {
  return <AsyncComponent />;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
  • 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,
});
Enter fullscreen mode Exit fullscreen mode

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.

Related Links

Top comments (0)