FOUC How to remove "Flash Of Unstyled Content" in Nuxt

Question

As I was testing my Nuxt application, I purposely entered page URLs that I know didn't exist to test my 404 page; I then saw a flash of a completely white screen before the page navigated to my 404 page.

How do you get rid of it?

score 0 · Accepted Answer · edited Dec 15 '22 at 16:24

0

For those who are looking for the answer, here's a solution:

In your nuxt.config.js file, add this:

css: ['@/assets/whatever_you_want_to_name_this_file.css'],

Then create the whatever_you_want_to_name_this_file.css in your assets folder.

Next add the following code to the whatever_you_want_to_name_this_file.css:

#__nuxt,
body,
html {
    background: rgb(0, 0, 0);
}

I was using a dark theme using Vuetify; so I set the background color to black but you could set it to whatever you want.

edited Dec 15 '22 at 16:24

kissu

40,416
14
65
133

answered Dec 15 '22 at 07:02

sandalwoodsh

129
1
11

So this will make the background black and not fix the flash.. – pwavg Jul 26 '23 at 07:51
So add an opacity of 0 then and set it back to 1 once you have everything loaded: #__nuxt, body, html { background: rgb(0, 0, 0); opacity: 0; } – sandalwoodsh Jul 26 '23 at 15:03
You're basically just performing some perceptual trickery. – sandalwoodsh Jul 26 '23 at 15:05
BTW a lot of people use the GSAP library to slowly fade up the background stuff so that it smoothly transitions in.https://greensock.com/fouc/ – sandalwoodsh Jul 26 '23 at 15:08

FOUC How to remove "Flash Of Unstyled Content" in Nuxt

1 Answers1