FOUC in Production since Nuxt 3.10.0

[Dallas Hoffman]

Environment

• Operating System: Darwin
• Node Version: v20.10.0
• Nuxt Version: 3.11.2
• CLI Version: 3.11.1
• Nitro Version: 2.9.6
• Package Manager: npm@10.2.3
• Builder: -
• User Config: css
• Runtime Modules: -
• Build Modules: -

Reproduction

https://github.com/DallasHoff/nuxt-fouc-example

Describe the bug

Under certain conditions, I am seeing a flash of unstyled content in the production build of a site since Nuxt 3.10.0. In the provided reproduction, you can see this by building the site (npm run build) and then previewing it (npm run preview) and watching as the page loads. The links in the navbar will start out unstyled, in a vertical stack, and then switch to being styled in a row.

If you then downgrade the project to Nuxt 3.9.3 with no other changes, the FOUC will not happen. Checking the built HTML of the page, you can see that this version has the CSS of the navbar component inlined, where newer versions of Nuxt do not.

Strangely, the FOUC also only happens with certain configurations of the components. The FOUC does not happen if:

• The <style> tag in layouts/default.vue is empty.
• The <script> tag in components/app/navbar.vue does not have lang="ts"

#25806 is similar, but that was resolved as an issue with Vite while this issue happens in production and not development. The issue appears if either nuxt build or nuxt generate is used to build the site.

Additional context

No response

Logs

No response

[Dallas Hoffman]

Nuxt 3.12 fixed this.