Vuetify 4 support with correct CSS layers

[Q16solver]

Hello,

I was trying to migrate to vuetify v4 according to the upgrade guide provided with claude, and most of the fixes were ok, they were either completely migrated over to new syntax or the legacy behaviour was kept as required. However, I found that the css layers applied by following the vuetify-nuxt-module docs is not in the correct order when we declare globals.scss and the components.scss. I'm currently using this workaround in the nuxt config to fix this, but perhaps this can be fixed natively in the tool?

app: {
  head: {
    // Vuetify v4 theme composable injects `@layer vuetify-utilities { ... }` as a dynamic
    // <style> tag at runtime (head.push, priority 100). Without this declaration, that style
    // Is the first CSS the browser sees, placing vuetify-utilities before vuetify-core in the
    // Cascade layer order — giving utilities lower priority than core (wrong).
    // By injecting the full layer ordering at critical priority (-2), we ensure the correct
    // Order: vuetify-core < vuetify-components < vuetify-overrides < vuetify-utilities < vuetify-final
    // See: vuetify/lib/composables/theme.js and vuetify/lib/styles/generic/_layers.scss
    style: [
      {
        id: "vuetify-layer-order",
        // Match exactly what _layers.scss declares so sub-layer order is also preserved
        innerHTML:
          "@layer vuetify-core { @layer reset, base; } @layer vuetify-components; @layer vuetify-overrides; @layer vuetify-utilities { @layer theme-base; @layer typography; @layer helpers; @layer theme-background; @layer theme-foreground; } @layer vuetify-final { @layer transitions, trumps; }",
        tagPriority: "critical",
      },
    ],
  }
}