This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Understand the Flash of Unstyled Content in Nuxt

    John LindquistJohn Lindquist

    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.

    vueVue.js
    nuxtNuxt.js
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss