This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Understand the Flash of Unstyled Content in Nuxt

0:52 Vue.js lesson by

You'll notice soon after working with Nuxt that you'll begin to see your styles flash in during each page load. This is due to the development mode of Nuxt where it injects the styles into the page after the initial page render. You can rest assured that when you use nuxt build, your styles will render before the page loads.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

You'll notice soon after working with Nuxt that you'll begin to see your styles flash in during each page load. This is due to the development mode of Nuxt where it injects the styles into the page after the initial page render. You can rest assured that when you use nuxt build, your styles will render before the page loads.

Now, one thing that may be concerning you right now is if when you refresh, you'll see what's called a flash of unstyled content where it goes from the unstyled font to the styled font and the unstyled list to the styled list. I just want to reassure you that this only happens in dev mode, where the server is injecting the styles after the page loads.

To prove that, I can deploy this site now using now, and the URL for that deployment is automatically added to the clipboard. I can just paste it in here, and you can see when I refresh here that the styles never change.

We get the styles immediately on page load or before the page loads, whereas on my dev server, if I start that up again, you'll see this little bit of unstyled content flashing, which is fine, because this is dev mode. Then, this is production mode, and you never see those styles flash.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?