Description
The current documentation on async components is good, but lead to some confusion when I was referencing it in combination with Vue Router.
const asyncPage = () => import('./NextPage.vue')
is one of the examples of an async component, which makes sense, but is probably a bit confusing as a lot of people will be using the concept of "pages" in combination with Vue Router.
Vue Router will actually warn you about defineAsyncComponent
and tells you to not use it.
This warning is clear, but a bit confusing if you come from the Vue documentation.
There's a note block in the Router docs that also wanrs you about this: https://next.router.vuejs.org/guide/advanced/lazy-loading.html#lazy-loading-routes
I think the Vue docs could benefit from two things:
- Change the example from using
NextPage.vue
to something less related to routing (For exampleCartFlyout.vue
or something similar) - Add a note block with a similar warning as in the Vue Router docs, something like "When using Vue Router, don't use async components in the router. You can read more about lazy loading routes in the Vue Router documentation". (with a link to https://next.router.vuejs.org/guide/advanced/lazy-loading.html#lazy-loading-routes)
I can prepare a PR if that's welcomed.