Conflicting details on async components with vue router #1869
Conversation
The vue docs appear to conflict with vue router's advice on using async components for routes. "Do not use Async components for routes. Async components can still be used inside route components but route component themselves are just dynamic imports."
✅ Deploy Preview for vuejs ready!
To edit notification comments on pull requests, go to your Netlify site settings. |
sanscheese
changed the title
There was a problem hiding this comment.
Thanks for the PR!
This section of the docs dates back to the Vue 2 docs. In Vue 2, async components were used for lazily loaded routes, they were effectively the same feature. In Vue 3 there is a separation between the two.
I agree that this paragraph needs updating, but I think we should aim to retain the original meaning. The point of that paragraph is to encourage the use of asynchronous loading with route components, which remains the recommendation. The wording just needs to be tweaked to avoid suggesting that this can be achieved using the 'async components' feature provided by defineAsyncComponent.
|
@skirtles-code agree would be better to guide best practice here. In Vue 2 I used to follow Chris fritz' approach: But I'm not sure what is the best minimal example to suggest or reference for asynchronous loading routes in Vue 3 with Vite. |
| @@ -82,7 +82,7 @@ import { defineAsyncComponent } from 'vue' | |||
| const Foo = defineAsyncComponent(() => import('./Foo.vue')) | |||
| ``` | |||
|
|
|||
| If using client-side routing via Vue Router, it is strongly recommended to use async components as route components. See [Lazy Loading Routes](https://router.vuejs.org/guide/advanced/lazy-loading.html) for more details. | |||
| If using client-side routing via Vue Router, it is strongly recommended to **not** use async components as route components. Async components can still be used inside route components but route component themselves are just dynamic imports. See [Lazy Loading Routes](https://router.vuejs.org/guide/advanced/lazy-loading.html) for more details. | |||
There was a problem hiding this comment.
I agree with @skirtles-code. Let's not point to the boilerplate repo approach. Instead encourage using lazy loading by using dynamic imports and then remind the readers that this is slightly different from async components while pointing them to the router docs.
There was a problem hiding this comment.
Dynamic imports to handle code splitting and lazy loading, out of the box, makes sense.
The guidance to "encourage the use of asynchronous loading with route components" still seems to unclear on how devs should best achieve this. Are left wondering, "is it possible to asynchronously load a router component or is it just the sub-components?"
Perhaps this section of the docs could do with separate headings for Code Splitting & Lazy Loading and Loading components asynchronously. To highlight the separation of the two and how to approach them (for components via defineAsyncComponent vs router components).
Rather than linking to any external code, was hoping for any short snippet(s) to include as simple examples, or just bullet points of suggested options (Suspense - experimental, limit async to sub-components, any custom loading approach?). To help highlight Async loading is still good but defineAsyncComponent should not be used for routes components.
Alternatively, could look at vue router's docs having a section on Async loading with routes if it requires more detail, which this page could then link to.
There was a problem hiding this comment.
hmm, I believe this small paragraph is more of a side note because people might connect dots with the router so it should be as short as it is and link to external documentation for more details in case the reader feels concerned about it and wants to read more. If not, they can just skip it.
The sentence can be structured in many ways but we should really keep the original meaning and importance within the section.
There was a problem hiding this comment.
| If using client-side routing via Vue Router, it is strongly recommended to **not** use async components as route components. Async components can still be used inside route components but route component themselves are just dynamic imports. See [Lazy Loading Routes](https://router.vuejs.org/guide/advanced/lazy-loading.html) for more details. | |
| :::tip | |
| If using client-side routing via [Vue Router](https://router.vuejs.org/), asynchronous loading with route components is strongly recommended, but not via `defineAsyncComponent`. See [Lazy Loading Routes](https://router.vuejs.org/guide/advanced/lazy-loading.html) for more details. | |
| ::: |
Would this be more correct? Then as a separate task can look to add docs in vue router on the options for asynchronous loading with router components.
leave as a tip, and vue router should give more information on this.
|
I've made a change to the wording in #1896, now merged. I think that addresses the concerns raised here while keeping as close to the original meaning as possible. Thanks again! |
The vue docs appear to conflict with vue router's advice on using async components for routes.
"Do not use Async components for routes. Async components can still be used inside route components but route component themselves are just dynamic imports." from Vue Router Docs