Search code examples
nuxt.jsfouc

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

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?

Solution

  • 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.