Vue/3/Async Component Prop Renaming

Async Components Refactor

This refactor introduces changes to async components in Vue 3, replacing the old syntax with the new defineAsyncComponent helper. This update improves how async components are defined and managed, enhancing clarity and functionality.

• Define Async Components: Introduces the defineAsyncComponent helper to define async components explicitly.

• Update Syntax: Replaces the old component option with loader and changes the behavior of the loader function.

• Configuration Options: Adjusts options for error handling, loading components, delays, and timeouts.

Before

const asyncTable = {
  component: () => import("./Table.vue"),
  delay: 300,
  timeout: 7000,
  error: TableErrorComponent,
  loading: TableLoadingComponent,
};

After

import { defineAsyncComponent } from "vue";
import TableErrorComponent from "./components/TableErrorComponent.vue";
import TableLoadingComponent from "./components/TableLoadingComponent.vue";

const asyncTableWithOptions = defineAsyncComponent({
  loader: () => import("./Table.vue"),
  delay: 300,
  timeout: 7000,
  errorComponent: TableErrorComponent,
  loadingComponent: TableLoadingComponent,
});

Explanation

• New Syntax: Vue 3 uses the defineAsyncComponent helper to define async components, improving clarity and aligning with modern JavaScript practices
• Option Renaming: The component option is renamed to loader to reflect that it is responsible for loading the component asynchronously.
• Loader Function Changes: The loader function must return a Promise directly and no longer receives resolve and reject arguments.
• Global vs. Route Components: For route components, use Vue Router’s lazy loading feature instead of defineAsyncComponent.