Static GitHub Issues

[1684] Flash of Unstyled Content (FOUC) is an actual problem

prev: Access VUEX store inside of LAYOUT files
next: Nuxt v0.10.7 install KO

I notice that this issue was opened and then closed as expected: https://github.com/nuxt/nuxt.js/issues/292

However, I'd like to open an issue that this FOUC behavior be removed / mitigated in dev mode. Saying it won't happen in production isn't the issue. The issue is that it makes development difficult. I've encountered lots of problems developing with Nuxt due to third-party scripts measuring elements on the page when the document is loaded, since the styles are injected after that event. Many scripts rely on a "styles ready when document ready" behaviour, and Nuxt doesn't provide any lifecycle events (to my knowledge) that specifically address this.

Specifically, in Vue, there's a "mounted" lifecycle event where I would normally expect a rendered DOM (with styles) to be present. But in the case of Nuxt (unlike with using vue-builder, which doesn't have FOUC in dev mode), the mounted event can't be trusted. This is a problem.

Since it's technically feasible to push HTML to the page that has styles loaded (as Nuxt can pre-render components), FOUC doesn't need to happen. Or, at the least, can rendered styles be ready before the Vue.js mounted event is fired?

Can something be done about this?

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This feature request is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c1508">#c1508</a>)</em></sub></div>