SPA Loading Template inline external CSS

Hey

is there a way to include an external css file or a library like

animate.css

animate.css

with the

spa-loading-template.html

spa-loading-template.html

? I have tried adding it to the

app.vue

app.vue

and the

nuxt.config.ts

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

@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-kittens

GitHub

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: pnpm@9.15.2 Builder: - User Config: default Runtime Module...