Vuetify-module: How to preload vuetify theme

[jackie-park]

Is your feature request related to a problem? Please describe.
I don't know how to preload vuetify theme css.
I tried shouldPreload method but it doesn't seems working

// nuxt.config.ts
render: {
    bundleRenderer: {
      shouldPreload: (file, type) => {
        return ['script', 'style', 'font'].includes(type)
      },
    },
  },
// vuetify option
theme: {
    options: {
      customProperties: true,
      minifyTheme: (css) => {
        return css.replace(/[\r\n|\r|\n]/g, '')
      },
    },
    dark: true,
    themes: {
      light: {
        primary: colors.grey.darken4,
        secondary: colors.amber.darken3,
        accent: colors.lightBlue.darken1,
        info: colors.blue.darken4,
        warning: colors.orange.darken4,
        error: colors.red.darken4,
        success: colors.green.darken3,
      },
      dark: {
        primary: colors.blue.darken2,
        secondary: colors.amber.darken3,
        accent: colors.grey.darken3,
        info: colors.teal.lighten1,
        warning: colors.amber.base,
        error: colors.deepOrange.accent4,
        success: colors.green.accent3,
      },
    },
  },

<link href="/_nuxt/28525bf520ad9181cd06.css" rel="stylesheet">



md5-c69158f21c59bcec99824be885a12bd5



<link rel="preload" href="/_nuxt/28525bf520ad9181cd06.css" as="style">

[kevinmarrec]

@jackie-park Not sure what you're going to achieve, I think you shouldn't have to preload it, it seems to be related to https://github.com/nuxt-community/vuetify-module/issues/143, components in Nuxt pages aren't preloaded with SSR but should be, if i'm right.

[kevinmarrec]

Any news @jackie-park ?

[kevinmarrec]

@jackie-park Vuetify theme css seems to be already preloaded when using SSR

[jackie-park]

[jackie-park]

I don't know how to preload this. Thanks.

[kevinmarrec]

Are you using SSR/SPA ? Static generation ?

[jackie-park]

I am using SPA.

[kevinmarrec]

I just think this file can't be preloaded, it is added at runtime by Nuxt when loading the page components.

[filipwronski]

I have the same issue.

[kevinmarrec]

I think it's cause vuetify-loader doesn't lazy load components.
WIth #154 manual mode, people will be able to manually import Vuetify components everywhere and lazy load them. Which means that if there's still issue about preload, it's a Nuxt issue and not Vuetify module one.

I'm closing it in favor of #154 on which I'm working on right now

[mseele]

@jackie-park did you find any solution for this? i'm using nuxt generate and run into the same problem.

[FandangoInPetto]

Same issue for me, this greatly impacts things like PageSpeed scores.

[bengineer19]

@kevinmarrec Did you come across a solution?
This is really impacting lighthouse audits

[bengineer19]

Additionally in the request chaining section as well

[jackie-park]

No solutions for this but I did some work for performance.
MinifyTheme, Preconnect, Flattening static folders, webfontloader, display swap for text, display block for icon and so on

[tincho425]

Same problem here, LightHouse tells there're 7.34s estimated savings 😲 All .css vuetify files.

[dymoo]

Me too. This is seriously hurting my LightHouse score.

[HoangKimDuc]

+1

[giancarllorojas]

I'm experiencing the same issue, anyone got a workaround?

[ujjwalagrawal17]

Facing same issue. Looking for a solution for this.