⚠️ This lesson is retired and might contain outdated information.

Understand the Flash of Unstyled Content in Nuxt

John Lindquist
InstructorJohn Lindquist
Share this video with your friends

Social Share Links

Send Tweet
Published 7 years ago
Updated 4 months ago

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.

[00:00] 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.

[00:21] 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.

[00:35] 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.

egghead
egghead
~ 10 seconds ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today