Skip to content

[Improvement] Async components and Vue Router (with PR) #1013

Closed
@TheDutchCoder

Description

@TheDutchCoder

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:

  1. Change the example from using NextPage.vue to something less related to routing (For example CartFlyout.vue or something similar)
  2. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions