Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Enable component async loading

See original GitHub issue

What problem does this feature solve?

For now there is no full support for vue async components described here:

https://vuejs.org/v2/guide/components-dynamic-async.html#Handling-Loading-State

Solution presented in: https://github.com/vuejs/vue-router/pull/2140 https://github.com/chrisvfritz/vue-enterprise-boilerplate/blob/master/src/router/routes.js is solving problem only partially because of such construction beforeRouteEnter etc guards are not launched due to fact that component is resolved inside another component after route update

This problem is also mentioned here: https://forum.vuejs.org/t/vue-router-async-component-loading-error-components-never-shown/40618/2

What does the proposed API look like?

Update doc with information that this syntax is not working with vue-router.

Issue Analytics

State:
Created 4 years ago
Comments:11 (11 by maintainers)

Top GitHub Comments

2reactions

posvacommented, Jun 28, 2019

Yeah, that’s because in the root Vue, you are displaying the router-view component. Instead of having the loading logic inside of your view component Root.vue, it should be at the root component. Like the example in the cli or in docs where we mount an App.vue component. That component is always displayed so you can display the logic there

1reaction

Mighty683commented, Jun 27, 2019

Thank you. Good to hear that this will be improved in next version 😃

Top Results From Across the Web

How To Handle Async Data Loading, Lazy Loading, and Code ...

Step 1 — Loading Asynchronous Data with useEffect · Step 2 — Preventing Errors on Unmounted Components · Step 3 — Lazy Loading...

Loading components asynchronously in React app with an HOC

The Async Component HOC ... Let's create a file that will contain our HOC. We'll call it asyncComponent.js. I like to have a...

Async components

The most common use case for React Async is data fetching. In single-page applications it's very common to dynamically load some data from...

Async Components - Vue.js

As you can see, defineAsyncComponent accepts a loader function that returns a Promise. The Promise's resolve callback should be called when you have...

Use Asynchronous Loading - Documentation - Demo Kit

Add the bootstrapping tag data-sap-ui-async="true" to your index.html file. It enables the runtime to load all the modules and preload files for declared ......