Global defaults for defineAsyncComponent

[brendomaciel]

What problem does this feature solve?

In medium/large applications, where we can have lots of routes (therefore lots of async page components), we have to define the options of defineAsyncComponent for every of these components.

Let's say we need to define a different default delay or generic loadingComponent/errorComponent. We need to create an object, import it and merge it. Something like that:

// routes.js
export default [
  // ...
  {
    path: '...',
    component: defineAsyncComponent({
      ...defaultAsyncComponentOptions,
      loader: () => import('...'),
    }),
  },
  // ...
];

When doing that for a bunch of routes the file ends up having a lot of repetition, which is not the ideal.

What does the proposed API look like?

Since Vue offers an API for global app configuration, it would be much more convenient to define default options for defineAsyncComponent using it, this way we can keep using the function's simpler syntax for those components that doesn't need to override the app defaults.

// app.js
app.config.asyncComponent.delay = 500;

// routes.js
export default [
  // ...
  {
    path: '...',
    component: defineAsyncComponent(() => import('...')),
  },
  // ...
];

[posva]

the proposed solution doesn’t seem to bring much. Note you could also create your own defineAsyncComponent that adds the defaults. In other words: this could be 100% userland

[brendomaciel]

I agree it can be done in userland (I even provided an example too), but I think the is point is: it would be a DevX improvement.

Besides, syntax sugar is all over the place in Vue, take as example the directives, SFC, functions like unref() and so on.