implement and export defineAsyncComponent compatible version in 2.7.x

[renatodeleao]

What problem does this feature solve?

1. Allows to drop @vue/composition-api plugin after migrating from vue@^2.6.x into ^2.7.x.
2. It makes migration from 2.x to 3.x one step easier.

If you were previously using @vue/composition-api, update imports from it to vue instead. Note that some APIs exported by the plugin, e.g. createApp, are not ported in 2.7.
— https://blog.vuejs.org/posts/vue-2-7-naruto.html

The release notes do mention that some APIs are not ported to 2.7, that's why this is not a bug report because it might be intentional.

defineAsyncComponent looks like something that would be a nice addition to this final 2.x version, since async components already exist in vue2 land: the syntax just slightly changed (v2 vs v3).

Also @vue/composition-api version does it and it does not appear to use any vue3 internals, so it seems technically achievable.

What does the proposed API look like?

implement and export a defineAsyncComponent using prior art (@vue/composition-api plugin version as base).

- import { defineAsyncComponent } from '@vue/composition-api'
+ import { defineAsyncComponent } from 'vue'

[iceprosurface]

same issue ！

[yyx990803]

The reason it's not ported is because it's unnecessary in Vue 2... defineAsyncComponent exists in Vue 3 is because plain functions are treated as functional components in Vue 3. You don't need it in Vue 2.

You already have the equivalent of all the functionality: https://v2.vuejs.org/v2/guide/components-dynamic-async.html#Handling-Loading-State

[iceprosurface]

it's unnecessary for implement for defineAsyncComponent, but we need a shape for defineAsyncComponent(just like defineComponent):

function defineAsyncComponent(option: AsyncComponent): AsyncComponent;
export function defineAsyncComponent(option: any) {
  return option
}

[renatodeleao]

@yyx990803 i understand it's not necessary for vue2 to achieve the desired goal — as i've mentioned in the issue description and pointed to the same doc link as you did — but would make future migrations to v3 more convenient, because the syntax would be interoperable/cross compatible, meaning one less migration error to worry about.

https://v3-migration.vuejs.org/breaking-changes/async-components.html#async-components

// Vue2 vs Vue3
- const asyncModal = () => import('./Modal.vue')
+ const asyncModal = defineAsyncComponent(() => import('./Modal.vue'))

// Async component with options
- const asyncModal = {
+ const asyncModal = defineAsyncComponent({
-  component: () => import('./Modal.vue'),
+  loader: () => import('./Modal.vue'),
   delay: 200,
   timeout: 3000,
-  error: ErrorComponent,
+  errorComponent: ErrorComponent,
-  loading: LoadingComponent
+  loadingComponent: LoadingComponent
}

Anyways, thanks for taking the time to look at it!

[renatodeleao]

Thanks

[MatthewAry]

I'm happy to see movement on this but https://github.com/vuejs/vue/blob/main/types/index.d.ts#L45 seems to be preventing me from being able to use the method and type.

I would expect import { defineAsyncComponent } from 'vue' to work now but it's not. Am I missing something?

[achaphiv]

I'm guessing that

vue/types/index.d.ts

Line 45 in cdd2df6

// export { defineAsyncComponent } from './defineAsyncComponent'

is supposed to be:

-// export { defineAsyncComponent } from './defineAsyncComponent
+export { defineAsyncComponent } from './v3-define-async-component

[jacekkarczmarczyk]

I would expect import { defineAsyncComponent } from 'vue' to work now but it's not. Am I missing something?

For me it looks like the type is exported, autocompletion in IDE suggests this:

import type { defineAsyncComponent } from 'vue/types/v3-define-async-component';

That type leads to:

export function defineAsyncComponent(
  source: AsyncComponentLoader | AsyncComponentOptions
): AsyncComponent

My workaround is to create my own "loader"

export function defineAsyncComponent<T> (loader: T): T {
  return loader;
}

and import this one, later when it's fixed i'll just change the import to vue