SPA Loading Template inline external CSS
Hey 👋
is there a way to include an external css file or a library like
animate.css with the spa-loading-template.html? I have tried adding it to the app.vue and the nuxt.config.ts in which it worked, but only after the page loaded the styles, which results in a layout shift and/or it doesn't play the desired animation.
Which is to be expected, because SSR is turned off and the styles are not inlined. Is there an already established solution to inline it? I have tried using @nuxtjs/critters, which only works in the production build and duplicates the css.
I also encountered another issue, that the template itself won't be minified, where as everything else was, but this isn't as big of a deal.
I have tried searching for a solution the past couple of days, like using another framework the generate the desired file, but I couldn't find a "perfect" solution.
Related GitHub issue: https://github.com/nuxt/nuxt/issues/30450
StackBlitz: https://stackblitz.com/github/sotasan/descriptive-kittensGitHub
SPA loading template layout shift and external css · Issue #30450 ·...
Environment Operating System: Darwin Node Version: v23.5.0 Nuxt Version: 3.15.0 CLI Version: 3.17.2 Nitro Version: 2.10.4 Package Manager: [email protected] Builder: - User Config: default Runtime Module...
StackBlitz
Sotasan - Descriptive Kittens - StackBlitz
Run Descriptive Kittens created by Sotasan on StackBlitz
3 Replies
Hi @Sōta. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Based on the knowledge sources provided, I can offer some insights into your question about including external CSS with the SPA loading template in Nuxt. However, there isn't a perfect solution directly addressed in the given information.
1. SPA Loading Template:
Nuxt allows you to create a custom SPA loading template by creating an
app/spa-loading-template.html file. This template is used when rendering client-only pages (with ssr: false) Docs > Api > Nuxt Configuration > spaLoadingTemplate.
2. Inline Styles:
By default, Nuxt now only inlines styles for Vue components, not global CSS. This change was introduced to balance reducing separate network requests while allowing caching of global CSS files Docs > Getting-started > Upgrade Guide > Migrating to Nuxt 4 > More Granular Inline Styles.
3. External Stylesheets:
You can include external stylesheets in your Nuxt application by adding a link element in the head section of your nuxt.config.ts file Docs > Getting-started > Styling > External Stylesheets.
However, the knowledge sources don't provide a direct solution for inlining external CSS specifically for the SPA loading template. The closest approach mentioned is using the css property in the Nuxt configuration to include global CSS, but this doesn't guarantee that the styles will be available immediately for the SPA loading template.
Regarding your specific issues:
1. Layout shift and animation not playing: This is likely due to the CSS not being available when the SPA loading template is rendered.
2. Minification of the template: The knowledge sources don't address this issue directly.
3. Using @nuxtjs/critters: While this module can help with inlining critical CSS, the duplication issue you're experiencing isn't addressed in the provided information.
Given the limitations of the current information, you might want to consider:
1. Inline critical styles directly in the spa-loading-template.html file.
2. Explore server-side plugins or hooks that could potentially inject the required styles into the initial HTML response.
However, these are speculative solutions and not directly supported by the provided knowledge sources. For a definitive solution, you may need to consult the latest Nuxt documentation or seek advice from the Nuxt community forums.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@285107519553273856> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
but how would you use a third party library?
for example
animate.css you would normally import it directly as a css file, in which case it only gets loaded after the hydration is completed.