How does vue take over a prerendered page?

Question

I'm using the prerender-spa-plugin, and it works great! I'm curious on how vue manages to detect the prerendering. Why doesn't it try to render its components as usual?

I've tried searching for answers but no one is discussing how vue accomplishes this.

Answer 1

As far as I know, Javascript kicks in as usual and renders the components. But, the page includes the rendered output before already. So it's basically the default HTML if the user has no JS enabled. After JS parses, the DOM (or the applications root div) is emptied and the apps components are rendered as usual.

The prefilled output (HTML) is without CSS and images, but as those chunks are loaded on your page as well (hopefully fast and successful), everything is styled and beautiful, ready to be looked at.