All styles from layouts and pages being loaded in dev mode – Nuxt 3

Versions

• nuxt: [e-mail]2f
• node: 14.17.0

Reproduction

In short, the issue is that CSS from different pages & layouts is included on all pages, resulting in pages being styled incorrectly. This only happens in dev mode in Nuxt 3 – when building for prod, the CSS is included as expected.

I’ve set up a repo that shows the issue (and goes through the expected and actual behaviour).

A similar issue was reported for Nuxt 2, where one of the team said that the issue would be looked at for Nuxt 3 – which is why I set up this test repo, as we’re seeing this issue on our project.

Steps to reproduce

• Check out this repo
• Go to the nuxt3-app folder in command line, install dependencies (yarn) and run yarn dev to reproduce the issue.
• The test site has 4 pages – /, /search, /menu and /checkout – and the expected/actual results are documented in the README of the repo.

What is Expected?

When rendering a page, styles from irrelevant layouts and other pages do not also load on the page.

What is actually happening?

Currently, in dev mode, it looks like all styles from all layouts and pages are included in the head of each page, resulting in issues with the page displaying styles that aren’t intended for the current page.

[manniL]

@danielroe Should we transfer this issue to the https://github.com/nuxt/framework repo?

[kosmeln]

We stumbled upon the very same issue. It really looks like a blocker for development team. Can anybody provide an actual status update on this? Or a temp workaround till the fix is in place? Thank you!