Preload components like in vue-router keep-alive

I like very much using transitions in vue-router, though sometimes they get lost when images/content take a while to load and appear after the route transition has completed.

I use in vue-router so once content has loaded the first time, it’s ready for subsequent navigations. Transitions are then nice and smooth because the content has already been loaded.

My Question is: Does anyone know how I can pre-load router components so on the first go-round they behave like ?

The site I’m working on is fairly small with a few components – so a loading screen would be ok when the components load.

Thanks in advance for any insights.

And… I’ve tried using the isLoaded: true/false technique to hide content until an ajax request completes, but this doesn’t help for fullscreen images that still need to load. I’m interested in a pre-loading solution.

I believe what you need to do is either implement the before or after navigation data fetching as outlined in the docs:

Ok, thank you @Teevio I will check that out

Ok that’s interesting but still its just fetching data. The images will still need to load and theres no way for me to tell vue-router to wait until they have loaded then display the route change? That is why pre-loading while components load like in keep-alive might be more effective?

Right, so you would want to create a simple Javascript image pre-load with the images that would trigger that loading is done once all the images have loaded. Here’s what an image pre-load would look like, although you’d need to come up with something that takes advantage of multiple images.

var img = new Image();
img.onload = function () {
   alert("image is loaded");
img.src = "img.jpg";

I’m also looking for what the initial request was for… preload a component, not just images.

When the keep-alive element wraps the router, previously rendered components are cached. If I start with component A, then switch to a new component (B) using the router, it may take a second for component B to be fully created in DOM. If I switch back to component A, then go back to B, it is all there instantly because it has been rendered before. This is great.

Is there a way to cause a component B to be pre-rendered, so that the first time it is displayed, it is there instantly?

A hacky way might be, for example, to use CSS to hide the router, switch to component B, then back again, and unhide the router. Then later, when the user switches to component B, it is already rendered. (Of course, hiding the router like this is not the answer.)

I would want control over when component B is rendered… say 1 second after component A has finished whatever it does and the user is busy reading component A. (For the 1% case where the user immediately goes to B, they would have to wait a second for it to finish rendering…)

1 Like

If you are using Vue Router you can set things up to load the next view’s component before the router transitions to it:

I don’t believe you can pre-render using just Vue Router. What I’ve been doing is using Vuex for the data store in conjunction with Vue Router. This lets me pre-load any data I want in the data store and then each view pulls from the data store without delay.

Thanks. I actually have all the data on hand already, so don’t need to pre-load the data.

That’s also exactly what I’m looking for! Did you find any solution?

Not yet. But it still would be good to have!

This would be really cool. Has there been any progress on it?

I preload all my data already, but it would be great if I could ‘preload’ all my routed components somehow.
It would have the same effect as wrapping my ‘router-view’ in ‘keep-alive’ and then clicking through all my router links does currently - making every route switch instant …

hello! is there a solution to this problem?

1 Like

I don’t think it will work if you just precache the components for keep-alive. They have to be mounted in the DOM to load images, etc… But it should be possible with a custom router-view that just hides the non-active routes with display: none.

It’s possible that not all browers preload images which are hidden. (