Skip to content

Critical CSS and theme CSS not included in the SSR response; instead applied at runtime which causes a FOUC #232

Open

Description

Module version

"dependencies": {
    "@nuxtjs/vuetify": "^1.9.1",
    "nuxt": "^2.11.0"
}

Describe the bug
Vuetify critical CSS and theme CSS are not included in the SSR response. Instead they are applied at run time which causes a flash of unstyled content (FOUC).
Vuetify explicitly states that the theme CSS should be included in the SSR response:

Vuetify generates theme styles at run-time for SPA's and server side for SSR applications. The
generated styles will be placed in a <style> tag with the id of vuetify-theme-stylesheet.

https://next.vuetifyjs.com/en/customization/theme#options

To Reproduce
Clone https://github.com/Janne252/issue-nuxt-vuetify-theme-missing-in-ssr-response and follow instructions on the readme.md.

Steps to reproduce the behavior:
See readme.md on the reproduction repository.

Expected behavior
Critical Vuetify CSS and theme CSS should be included in the SSR response. Instead they are applied at runtime, which causes a FOUC.

Screenshots
Result:

Expected:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions