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?

Answer 1

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.