[joppy]

I've not used Vue, but how does this solve the problem? In most of my own sites, whatever preprocessor (eg markdown -> html) I use is instructed to replace mathematics with something like <span class="math">z = \frac{x}{y}</span>, then after the page has loaded a small loop runs KaTeX on all eligible spans. This results in some small amount of jumping, but I've found anchors to still work quite well.

[BlackFly]

Vue is an SPA framework, so it solves the problem by "rendering all the html" as actual preprocessing and then serving it to the browser which visually renders it, as opposed to the usual document.onLoad() approach where the base page gets loaded and then the javascript actually postprocesses this iteratively updating the DOM which triggers re-rendering events. I am not savvy to the precise details of vue and browser lifecycle events, but I think effectively it builds a shadow DOM and then triggers a single rendering event to avoid the jumping around. But yeah, a single rendering vs multiple renderings.

Getting the client javascript to render the entire page has a variety of problems, hence my desire to server side render (during a build step) what is essentially static content. If the page size bloats up too much though I might need to reconsider the approach...

I guess web components (https://developer.mozilla.org/en-US/docs/Web/Web_Components) could allow me to combine these approaches. It is already quite close to the vue programming model.