Vuetify with tree shake enabled in SSR doesn't render property #208

vishr · 2019-10-30T19:50:23Z

Module version
1.9.0

Describe the bug
If I enable treeShake the page rendered via SSR isn't display properly.

To Reproduce
I have attached a sample project.
nuxtjs-vuetify.zip

Steps to reproduce the behavior:

yarn && yarn build && yarn start
From the browser you will see a flicker before it renders properly
You can also do curl http://localhost:3000 > /tmp/out.htm and open to see the file

Expected behavior
The SSR version should be same as client

Screenshots

The text was updated successfully, but these errors were encountered:

enddevNZ · 2019-11-01T00:02:14Z

TreeShake worked when i enabled it on your example project.

However, try add extractCSS to the build property. With not extracting, all of the CSS gets
injected into the head on every load from the vendor.js which is why that flickering will be prominent.

MuhaddiMu · 2019-11-03T10:01:57Z

Any idea why tree shake takes alot of time at initial rendering as compared to when tree shake is disabled?

kevinmarrec · 2019-11-04T01:07:11Z

@vishr Is it fixed with extractCSS ? If no when I'm not sure how to help, it would be more likely Nuxt issue and not specific to this module.

kevinmarrec · 2019-11-04T01:09:26Z

@MuhaddiMu Not sure what you are talking about, with https://github.com/nuxt-community/vuetify-module/releases/tag/v2.0.0-alpha.0 , there is no way to not use treeShaking. Vuetify is treeshakable by default and you shouldn't use dist/vuetify.js + dist/vuetify.css which was possible with treeShake: false before.

slipros · 2019-11-04T01:48:30Z

@vishr check that - #210 (comment)

adrienbaron · 2019-11-04T20:51:11Z

I'm currently investigating the same issue. From what I gathered so far when using treeShake generated style blocks don't get integrated in the SSR result.
Using treeShake: false will integrate all Vuetify CSS in the page as a style tag (which we definitely don't want!).
Finally the solution pointed out by @slipros (using extractCSS) seems to add all the CSS from Vuetify in an external CSS file and load that. We get styles with no JS enabled (Yay!) but we still ship way too much CSS :(.
According to Vue Style Loader doc there should be a way to make it inject those style during SSR (which would be best of both world, minimal amount of CSS shipped + instant style without having to wait for JS to kick in).
Not sure yet which project this change will impact though, so I'll keep investigating 🔎 !
If I figure out a solution I'll try to open a PR in the relevant project 👍

enddevNZ · 2019-11-04T21:24:14Z

Finally the solution pointed out by @slipros (using extractCSS) seems to add all the CSS from Vuetify in an external CSS file and load that.

From my understanding if your treeShake is enabled and working correctly, extractCSS will only pull out the css from the vendor.js that your treeShake has gathered. I have a project and it is working like this for me.

We get styles with no JS enabled (Yay!) but we still ship way too much CSS

I'd suggest doing a npm run build -- -a to check that the vuetify bundle is showing in your vendor.js.

adrienbaron · 2019-11-04T22:02:31Z

@enddevNZ Indeed, my bad, it does seem to only include the CSS for what's being used in the app, which is much better that what I first thought!
However it only include styles for components that end up in the bundle, so components that are used only on a page for example, and would only be in this page bundle will still not have style on SSR (and get it when the bundle for that page loads).
Moreover you still might have to load a bit more CSS than necessary (some components might make it to the bundle, but not be used on the actual page you are on, albeit that's probably an edge case :)).
The manualInject option from vue-style-loader looks promising though, as it seems to state explicitly that style from non .vue files (which is the case for Vuetify components) would only get bundled in JS and not added to SSR unless you use that option and wire things up. So maybe there is something there 👍

adrienbaron · 2019-11-05T00:35:36Z

Ok, I found a way to make it work 👍. Sadly it would require quite a few changes in Vuetify :(.

Basically we first would need to change Vuetify components like so:

// Name the styles import
import styles from './VCard.sass'

/* @vue/component */
export default mixins(
  Loadable,
  Routable,
  VSheet
).extend({
  // Add a beforeCreate hook that inject the styles if presents
  beforeCreate() {
    if(styles.__inject__) {
      styles.__inject__(this.$ssrContext)
    }
  },
  // ...
})

Then in Nuxt config you ask the vueStyle loader to use manualInject:

  /*
   ** Build configuration
   */
  build: {
    loaders: {
      vueStyle: { manualInject: true }
    }
  }

When doing so, the style get's injected in the SSR context correctly 👍. This behaviour from vue-style-loader only applies for SSR mode, the client still behaves the same (see here for client and here for server)

If manualInject is not set to true, then the current behaviour applies and styles.__inject__ is undefined so the beforeCreate hooks doesn't do anything.

This change would add that hook to every component though so it's still has a bit of a performance hit (even though it's just calling a function that immediately returns). Maybe we could find a way for that hook to be defined when running on the server?
Also there is the matter of functional components that cannot have lifecycle hooks, not sure what we could do for those :(.

Anyway that should probably move the the Vuetify repository if we want to take this further 👍

freddy38510 · 2019-11-05T15:09:55Z

@adrienbaron Well spotted !
How could we add this hook to the framework of vuetify which import the main style ?

adrienbaron · 2019-11-05T18:27:32Z

@freddy38510 thanks! I think the only way for this to work is to add this hook to every Vuetify components with a PR there. I’ve asked for opinions on their discord, waiting for feedback before proceeding with doing the PR if everything looks OK for them

freddy38510 · 2019-11-05T19:48:51Z

@adrienbaron i talked about the style "main.sass" imported from this file. As soon as "manualInject" is enabled, all styles imported from vuetify need to be injected manually. Not only those from components.

We could also use the module nuxt-purgecss to improve performance.
These options seems to work fine:

purgeCSS: {
  mode: 'postcss',
  paths: [
    'node_modules/vuetify/src/**/*.ts'
  ],
}

Of course, some selectors should be whitelisted.

adrienbaron · 2019-11-05T23:15:12Z

@freddy38510 good shout! Yes we would need to figure something out for the main style, I didn’t see it :)!
For nuxt purge css you mean to drop unused CSS from the style that are injected in the SSR page?

freddy38510 · 2019-11-05T23:55:02Z

@adrienbaron Yeah that's right! The unused CSS is also dropped from js files.

I just did a comparison with and without purged CSS on a basic template of Vuetify with a Card component in content.

Without purged CSS:

With purged CSS:

vishr · 2019-11-07T05:43:56Z

@vishr Is it fixed with extractCSS ? If no when I'm not sure how to help, it would be more likely Nuxt issue and not specific to this module.

Not really. The issue still exists.

kevinmarrec · 2019-12-06T18:14:57Z

@adrienbaron Thank for your time investigating, so from your POV it seems that it's overall Vuetify components that would have a SSR issue ?

EDIT : Succeeded to reproduce it without Vuetify, but it's related of how Vuetify components are handling css (importing the css in js) : https://github.com/kevinmarrec/nuxt-css-issue

DispatchCommit · 2019-12-11T11:41:08Z

Super lazy workaround, add to nuxt.config

css: [
    'vuetify/dist/vuetify.css',
],

It's a heavy-handed overkill workaround, but it prevent some massive page reflowing I was having on load, so it's a trade off of a fast load time that feels sluggish, and broken, and a slower load time that looks snappier. Combining this with @nuxtjs/device to target mobile / desktop separately for a best SSR 'look' is worth the increase to me.

kevinmarrec · 2019-12-11T11:51:36Z

@DispatchCommit You don't have double css ?

DispatchCommit · 2019-12-14T06:56:48Z

@kevinmarrec No I do get duplicated CSS for some styles, so it's not ideal, but it's functional for now until we get a better a better solution for the bug you've pointed out above.

GarciaTandela · 2020-05-17T15:45:47Z

I guys, i'm having the same problem with my web app. When i run in development the page runs well and don't take long for css styles been applied. But when when it goes to production this is what happens, the styles takes time for come then it loads well. Can anyone tell me why is having this behavior ?

GarciaTandela · 2020-05-17T15:46:56Z

First i though it was a problem with vuetify version i tried to update it, but it didn't solve anything. I'm really needing for a solution

adrienbaron · 2020-05-17T15:58:07Z

@YannickSilva It's possible you have the same problem, meaning SSR doesn't include styles.

I see 2 choices for now:

Disable SSR on Nuxt, this is not great and depending on your use case not necessarily what you want, but that would eliminate the state where the style is not there (and replace it with a loading page).
Try to use my version of Vuetify loader: feat: add support for SSR style injection vuetifyjs/vuetify-loader#126 (comment).
I do use it in production, but it's not been widely tested so use at your own risk.

First you need to update your package.json to use the version of vuetify-loader that include my patch:

"vuetify-loader": "git+https://github.com/adrienbaron/vuetify-loader.git"

Then it requires to change a bit of configuration depending on the version of Vuetify Nuxt module you are using.

Here is an example nuxt.config.js with @nuxtjs/vuetify v1.x:

export default {
  // ...
  build: {
    loaders: {
      vueStyle: { manualInject: true }
    }
  },
  vuetify: {
    treeShake: {
      loaderOptions: { registerStylesSSR: true }
    }
  }
}

For @nuxtjs/vuetify v2.x the way you pass options to vuetify-loader has changed:

// nuxt.config.js
export default {
  // ...
  build: {
    loaders: {
      vueStyle: { manualInject: true }
    }
  },
  vuetify: {
    loader: {
      registerStylesSSR: true
    }
  }
}

Finally, when using manualInject in Nuxt.js, the css block from nuxt.config.js will not work.
Instead, you will need import your own stylesheets in thestyle block of your default template for it to be picked up by vue-style-loader.

For example like so:

<!-- default.vue -->
<style lang="stylus">
@import "../assets/style/app.styl"
</style>

GarciaTandela · 2020-05-17T16:27:21Z

@adrienbaron the problem is that i really need the SSR working because of SEO, and for the second option if isn't well tested i would go for it, so i can not have problem in the future. But i have another question if i use the Tag would it affect my page SEO ?

adrienbaron · 2020-05-17T16:38:38Z

@YannickSilva if you use the second option it shouldn't affect SEO :). I use it on: https://www.clashofstats.com/ if you want to checkout how it behaves

GarciaTandela · 2020-05-17T16:50:47Z

@adrienbaron thanks, i will give it a try. Them i will tell you something, thanks for the help

GarciaTandela · 2020-05-17T17:02:35Z

@adrienbaron i don't understand how i will install your npm package, should i copy paste your package.json or something ? There no command for installing it

adrienbaron · 2020-05-17T17:26:07Z

@YannickSilva basically the PR is currently open, when it's merged and a new version of vuetify-loader is released it will just require updating to it (probably it will be done inside the dependencies of vuetify-module).
In the meantime, NPM has a feature where you can use a git branch as a dependency. So what you can do is in your package.json devDependencies add:

"vuetify-loader": "git+https://github.com/adrienbaron/vuetify-loader.git"

The update your dependencies. Your project should then use the version of vuetify-loader with my changes 👍 .

GarciaTandela · 2020-05-17T17:41:00Z

Thanks @adrienbaron

JosephSaw · 2020-06-24T01:56:33Z

Ok, I found a way to make it work 👍. Sadly it would require quite a few changes in Vuetify :(.

Basically we first would need to change Vuetify components like so:
// Name the styles import
import styles from './VCard.sass'

/* @vue/component */
export default mixins(
  Loadable,
  Routable,
  VSheet
).extend({
  // Add a beforeCreate hook that inject the styles if presents
  beforeCreate() {
    if(styles.__inject__) {
      styles.__inject__(this.$ssrContext)
    }
  },
  // ...
})
Then in Nuxt config you ask the vueStyle loader to use manualInject:
  /*
   ** Build configuration
   */
  build: {
    loaders: {
      vueStyle: { manualInject: true }
    }
  }
When doing so, the style get's injected in the SSR context correctly 👍. This behaviour from vue-style-loader only applies for SSR mode, the client still behaves the same (see here for client and here for server)

If manualInject is not set to true, then the current behaviour applies and styles.__inject__ is undefined so the beforeCreate hooks doesn't do anything.

This change would add that hook to every component though so it's still has a bit of a performance hit (even though it's just calling a function that immediately returns). Maybe we could find a way for that hook to be defined when running on the server?
Also there is the matter of functional components that cannot have lifecycle hooks, not sure what we could do for those :(.

Anyway that should probably move the the Vuetify repository if we want to take this further 👍

@adrienbaron thanks for your time in coming up with a workaround!

I am trying to follow your process and make the changes in @/vue/component but it seems that such a file doesn't exist for me, I have tried looking through "component-compiler-utils" but I am not sure if that is the one...

adrienbaron · 2020-06-24T07:50:11Z

@JosephSaw I actually came up with another fix for this, it takes the form of an MR on Vuetify Loader, it sadly hasn’t been merged yet, but you can try to use my version if you want to: vuetifyjs/vuetify-loader#126

asennoussi · 2020-07-06T06:33:10Z

What @adrienbaron said, or you guys can include that CSS in layouts/default.vue. It always loads the CSS SSR

dor272 · 2020-08-25T06:58:51Z

@adrienbaron
Hi,
I'm trying to use your vuetify-loader fix.
I added "vuetify-loader": "git+https://github.com/adrienbaron/vuetify-loader.git"
to the package.json file that at the root of the project.
added to nuxt config:

  build: {
    loaders: {
      vueStyle: { manualInject: true }
    }
  }
``
and

vuetify: {
treeShake: {
loaderOptions: { registerStylesSSR: true }
},
}
``

but when I try to build I get errors:

ERROR in ./layouts/default.vue
Module not found: Error: Can't resolve 'vuetify/srccomponentsVAppBarVAppBar.sass' in 'C:\Projects\proj\layouts'
@ ./layouts/default.vue 55:4-58
@ ./.nuxt/App.js
@ ./.nuxt/index.js
@ ./.nuxt/server.js
@ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/server.js

ERROR in ./layouts/default.vue
Module not found: Error: Can't resolve 'vuetify/srccomponentsVAppVApp.sass' in 'C:\Projects\prices-front\layouts'
@ ./layouts/default.vue 53:4-52
@ ./.nuxt/App.js
@ ./.nuxt/index.js
@ ./.nuxt/server.js
@ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/server.js

ERROR in ./layouts/default.vue
Module not found: Error: Can't resolve 'vuetify/srccomponentsVAvatarVAvatar.sass' in 'C:\Projects\prices-front\layouts'
@ ./layouts/default.vue 72:4-58
@ ./.nuxt/App.js
@ ./.nuxt/index.js
@ ./.nuxt/server.js
@ multi ./node_modules/@nuxt/components/lib/installComponents.js ./.nuxt/server.js

I'm building on Windows, and it seems like it is not building the path to the sass files of vuetify's components.

adrienbaron · 2020-08-25T07:50:29Z

@dor272 hi! I didn’t test on Windows so it is possible 😔, the PR has been merged in the main repo but not released yet, feel free to try and fix it and open a PR for that 👍

dor272 · 2020-08-25T19:05:21Z

@adrienbaron
I'm trying to fix it. got passed the paths names, I convert them to posix, since in node require works in posix at windows as well.
I can build the project, but generate doesn't work.

After some digging the generate returns error for unix systems as well.
I was able to deploy but the logs show errors:
TypeError: __webpack_require__(...).__inject__ is not a function
From what I could see it loads styles require('vuetify/${style}') what we get is something like require('vuetify/src/components/VGrid/VGrid.sass')
and there is no function in a styles file...

so far I was not able to fix it.

adrienbaron · 2020-08-25T19:10:54Z

@adrienbaron
I'm trying to fix it. got passed the paths names, I convert them to posix, since in node require works in posix at windows as well.
I can build the project, but generate doesn't work.

After some digging the generate returns error for unix systems as well.
I was able to deploy but the logs show errors:
TypeError: __webpack_require__(...).__inject__ is not a function
From what I could see it loads styles require('vuetify/${style}') what we get is something like require('vuetify/src/components/VGrid/VGrid.sass')
and there is no function in a styles file...

so far I was not able to fix it.

Hum, are you sure you followed all the instructions (the manualInject bit)? This __inject__ function is provided by I think Vue loader but you need to pass the right option to it for it to have this behaviour

dor272 · 2020-08-26T07:13:49Z

@adrienbaron pretty sure, thats my exact config:

  build: {
    extractCSS: true,
    loaders: {
      vueStyle: { manualInject: true }
    }
  }

  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    treeShake: {
      loaderOptions: { registerStylesSSR: true }
    },
    defaultAssets: false,
    theme: {
      dark: false,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    },
    icon: {
      iconfont: "mdiSvg",
    },
  }

adrienbaron · 2020-08-26T09:37:59Z

@adrienbaron pretty sure, thats my exact config:

  build: {
    extractCSS: true,
    loaders: {
      vueStyle: { manualInject: true }
    }
  }

  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    treeShake: {
      loaderOptions: { registerStylesSSR: true }
    },
    defaultAssets: false,
    theme: {
      dark: false,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    },
    icon: {
      iconfont: "mdiSvg",
    },
  }

@dor272
Sorry if this is the case, just to make sure I'll put all my config:

I'm depending on @nuxtjs/vuetify version ^2.0.0-beta.2 and vuetify ^2.3.8.

Then in Nuxt config:

{
  // ...
  buildModules: ["@nuxtjs/vuetify"],
  vuetify: {
    frameworkOptions: {
      theme: {
        disable: true,
        dark: true,
      },
      icons: { iconfont: "mdiSvg" },
    },
    loader: {
      registerStylesSSR: true,
    },
    defaultAssets: false,
    customVariables: ["~/assets/style/vuetify-custom.scss"],
  },
  build: {
    loaders: {
      vueStyle: { manualInject: true },
    },
  }
}

Here is vuetify-custom.scss (shouldn't impact things, just in case you are curious):

// If you need to extend Vuetify SASS lists
@import "~vuetify/src/styles/styles.sass";
$color-pack: false;
$material-dark: map-merge(
  $material-dark,
  (
    cards: #222222, // Grey 2
    bg-color: #101010  // Grey 0
  )
);

// Tabs
$tab-font-size: 0.75rem;
$tabs-item-padding: 0 8px;
$slide-group-prev-basis: 36px;

// Container
$grid-gutter: $spacer * 4;
$container-padding-x: $grid-gutter / 2;

$grid-gutters: map-deep-merge(
  (
    "xs": $grid-gutter / 12,
    "sm": $grid-gutter / 6,
    "md": $grid-gutter / 3,
    "lg": $grid-gutter * 2/3,
    "xl": $grid-gutter
  ),
  $grid-gutters
);

$alert-padding: $spacer * 2;
$alert-margin: $spacer * 2;

$dialog-margin: 8px;

I don't have the extractCSS option set, maybe that's what's breaking things for you?

dor272 · 2020-08-26T17:05:15Z

@adrienbaron pretty sure, thats my exact config:

  build: {
    extractCSS: true,
    loaders: {
      vueStyle: { manualInject: true }
    }
  }

  vuetify: {
    customVariables: ['~/assets/variables.scss'],
    treeShake: {
      loaderOptions: { registerStylesSSR: true }
    },
    defaultAssets: false,
    theme: {
      dark: false,
      themes: {
        dark: {
          primary: colors.blue.darken2,
          accent: colors.grey.darken3,
          secondary: colors.amber.darken3,
          info: colors.teal.lighten1,
          warning: colors.amber.base,
          error: colors.deepOrange.accent4,
          success: colors.green.accent3
        }
      }
    },
    icon: {
      iconfont: "mdiSvg",
    },
  }

@dor272
Sorry if this is the case, just to make sure I'll put all my config:

I'm depending on @nuxtjs/vuetify version ^2.0.0-beta.2 and vuetify ^2.3.8.

Then in Nuxt config:

{
  // ...
  buildModules: ["@nuxtjs/vuetify"],
  vuetify: {
    frameworkOptions: {
      theme: {
        disable: true,
        dark: true,
      },
      icons: { iconfont: "mdiSvg" },
    },
    loader: {
      registerStylesSSR: true,
    },
    defaultAssets: false,
    customVariables: ["~/assets/style/vuetify-custom.scss"],
  },
  build: {
    loaders: {
      vueStyle: { manualInject: true },
    },
  }
}

Here is vuetify-custom.scss (shouldn't impact things, just in case you are curious):

// If you need to extend Vuetify SASS lists
@import "~vuetify/src/styles/styles.sass";
$color-pack: false;
$material-dark: map-merge(
  $material-dark,
  (
    cards: #222222, // Grey 2
    bg-color: #101010  // Grey 0
  )
);

// Tabs
$tab-font-size: 0.75rem;
$tabs-item-padding: 0 8px;
$slide-group-prev-basis: 36px;

// Container
$grid-gutter: $spacer * 4;
$container-padding-x: $grid-gutter / 2;

$grid-gutters: map-deep-merge(
  (
    "xs": $grid-gutter / 12,
    "sm": $grid-gutter / 6,
    "md": $grid-gutter / 3,
    "lg": $grid-gutter * 2/3,
    "xl": $grid-gutter
  ),
  $grid-gutters
);

$alert-padding: $spacer * 2;
$alert-margin: $spacer * 2;

$dialog-margin: 8px;

I don't have the extractCSS option set, maybe that's what's breaking things for you?

@adrienbaron
I upgraded @nuxtjs/vuetify to 2.0.0-beta.2. now nuxt generate doesn't return any error both with extractCSS or without,
but I'm still having issues.
I checked the /dist folder and it seems most html has the injected style, but I couldn't see it inside index.html.
and the content still flashes (at the index or any other route).

I tried to create a new project. fresh install of nuxt and vuetify, upgraded @nuxt/vuetify to the version above and changed it to use vuetify-loader from your repo.
when I build it without extractCSS my app.js is 528KB (all of vuetify css).
when I build it with extractCSS then around 340KB shifted from app.js to app.css but it still all loaded.
I can't understand what am I doing wrong but I can't get rid of all the excessive CSS.
That's effecting loading times and performance.
I'm sharing here the basic nuxt-vuetify test I did today.

without extractCSS:
files: https://github.com/dor272/nuxt-vuetify
deployment: https://nuxt-vuetify.vercel.app/
with extractCSS:
files: https://github.com/dor272/nuxt-vuetify/tree/extractCSS
deployment: https://nuxt-vuetify-dltafcz5v.vercel.app/

you can run lighthouse on both and see performance is pretty poor in mobile and both loading all vuetify css (either from css file or js)

dor272 · 2020-08-27T18:12:58Z

@adrienbaron
so I had a mistake, I didn't see that I need to change vuetify settings when using @nuxtjs/vuetify beta. I changed it but it behaves the same as above.
with extractCSS the build return errors, but the generated files look ok.
without extractCSS build goes smooth but the content of the site flashes (css is not loaded)

any ideas?

cprcrack · 2021-03-24T14:54:16Z

@adrienbaron could you clarify what is the best way of making use of your fix currently?

I'm using @nuxtjs/vuetify v1.11.3 which is the latest stable release, and still suffering this issue. I understand that your PR is already merged and released in vuetify-loader v1.7.0 right?

Looking at my node_modules/vuetify-loader/package.json, I'm using v1.7.2 which should thus include your PR, is there any other configuration that needs to be done for SSR to work properly?

Update: I think I needed to do this manual setup:

// nuxt.config.js
export default {
  // ...
  build: {
    loaders: {
      vueStyle: { manualInject: true }
    }
  },
  vuetify: {
    loader: {
      registerStylesSSR: true
    }
  },
  css: [
    // Don't use this, it won't work if manualInject is true
  ],
}

After doing that, there is a noticeable change on the styles rendered server-side, but they are still not right and cause a flash of wrongly styled content before the client is hydrated. Is there anything else I should try?

adrienbaron · 2021-03-24T18:54:36Z

@cprcrack Your config looks on the right track 👍 ! I haven't updated my loader yet still using my fork but it should work ^^".

One thing to be aware is that if you had files in the css field you need to import them in your default.vue layout, for example:

<style lang="stylus">
@import "../assets/style/app.styl"
</style>

Other than that your config looks OK, I also disabled theme, I don't remember if that had an impact on SSR though (sorry it has been a while):

  vuetify: {
    frameworkOptions: {
      theme: {
        disable: true,
        dark: true,
      },
      icons: { iconfont: "mdiSvg" },
    },
    loader: {
      registerStylesSSR: true,
    },
    defaultAssets: false,
    customVariables: ["~/assets/style/vuetify-custom.scss"],
  },
  build: {
    loaders: {
      vueStyle: { manualInject: true },
    },
  }

cprcrack · 2021-03-26T19:22:45Z

I finally was able to fix the issue just by enabling the extractCSS option:

// nuxt.config.js
build: {
  extractCSS: true
}

Moreover by enabling extractCSS the total size of the /.nuxt/dist/client/ folder actually decreased from around 820 KB to around 800 KB, so I'm not sure if the whole Vuetify CSS is being included, but if it was, it was being included already before enabling extractCSS.

Regarding why it fixed it, maybe it had something to do with unscoped styles that I was using in my .vue files. Update: not really, doesn't seem to make a difference.

larzon83 · 2021-03-26T21:37:47Z

I toyed around with this and to get it working with current nuxt/vuetify-module v1.11.3 to config should be like this:

// nuxt.config.js
export default {
  // ...
  build: {
    loaders: {
      vueStyle: { manualInject: true }
    }
  },
  vuetify: {
    treeShake: {
      loaderOptions: {
        registerStylesSSR: true
      }
    }
  },
  css: [
    // Don't use this, it won't work if manualInject is true
  ],
}

I feel that Lighthouse scores are slightly better with this instead

build: {
  extractCSS: true
}

You get some small penalties for "remove unused css", but overall score is still better.

thnee · 2021-05-24T14:07:27Z

This really needs a proper fix. When using the regular v-bottom-navigation component with v-btn with treeShake: true in Nuxt SSR mode, it breaks. The margins are all wrong and the buttons look broken. Disabling treeShake makes everything look fine.

I have tried all various combinations of settings in this issue and nothing solves the issue.
When using the following config:

  build: {
    extractCSS: true,
    loaders: {
      vueStyle: {
        manualInject: true,
      },
    },
  },

  vuetify: {
    customVariables: ["~/assets/styles/variables.scss"],
    optionsPath: "./vuetify.options.js",

    treeShake: {
      loaderOptions: {
        registerStylesSSR: true,
      },
    },
  },

It produces error:

ERROR  [Vue warn]: Error in beforeCreate hook: "TypeError: __webpack_require__(...).__inject__ is not a function"

found in

---> <Layouts/default.vue> at layouts/default.vue
       <Root>

RobbieTheWagner · 2021-07-13T13:15:51Z

I'm seeing the same webpack error.

vishr changed the title ~~Vuetify with tree shake in SSR doesn't render property~~ Vuetify with tree shake enabled in SSR doesn't render property Oct 30, 2019

kevinmarrec mentioned this issue Nov 4, 2019

Is there any way to fix css loading after page load when i use generate mode? #210

Closed

kevinmarrec mentioned this issue Dec 7, 2019

Layouts not working properly on static generator #201

Open

This was referenced Jan 10, 2020

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

Open

Vuetify animations are not rendered in production mode #233

Open

kevinmarrec added the css bug label Jan 15, 2020

kevinmarrec mentioned this issue Feb 12, 2020

Using extractCSS causes css links to not be preloaded #278

Closed

shgtkshruch mentioned this issue Apr 20, 2020

Production で JavaScript 無効化時にテーブルのレイアウトが崩れる Tokyo-Metro-Gov/covid19#3321

Open

adrienbaron mentioned this issue Apr 27, 2020

feat: add support for SSR style injection vuetifyjs/vuetify-loader#126

Merged

FelixRe0 mentioned this issue Oct 9, 2020

[Bug Report] VExpansionPanel not rendering properly in nuxt generate (spa+universal) vuetifyjs/vuetify#11386

Closed

seongpil0948 mentioned this issue Feb 13, 2021

ssr 에서 vuetify 자동 tree shaking 되는 현상.. 해결 pseudolab/PseudoFront#9

Merged

Vuetify with tree shake enabled in SSR doesn't render property #208

Vuetify with tree shake enabled in SSR doesn't render property #208

Comments

vishr commented Oct 30, 2019 • edited Loading

enddevNZ commented Nov 1, 2019

MuhaddiMu commented Nov 3, 2019

kevinmarrec commented Nov 4, 2019

kevinmarrec commented Nov 4, 2019

slipros commented Nov 4, 2019

adrienbaron commented Nov 4, 2019 • edited Loading

enddevNZ commented Nov 4, 2019

adrienbaron commented Nov 4, 2019 • edited Loading

adrienbaron commented Nov 5, 2019 • edited Loading

freddy38510 commented Nov 5, 2019

adrienbaron commented Nov 5, 2019 • edited Loading

freddy38510 commented Nov 5, 2019

adrienbaron commented Nov 5, 2019

freddy38510 commented Nov 5, 2019 • edited Loading

vishr commented Nov 7, 2019

kevinmarrec commented Dec 6, 2019 • edited Loading

DispatchCommit commented Dec 11, 2019

kevinmarrec commented Dec 11, 2019

DispatchCommit commented Dec 14, 2019

GarciaTandela commented May 17, 2020

GarciaTandela commented May 17, 2020

adrienbaron commented May 17, 2020

GarciaTandela commented May 17, 2020

adrienbaron commented May 17, 2020

GarciaTandela commented May 17, 2020

GarciaTandela commented May 17, 2020

adrienbaron commented May 17, 2020

GarciaTandela commented May 17, 2020

JosephSaw commented Jun 24, 2020

adrienbaron commented Jun 24, 2020

asennoussi commented Jul 6, 2020

dor272 commented Aug 25, 2020

adrienbaron commented Aug 25, 2020

dor272 commented Aug 25, 2020 • edited Loading

adrienbaron commented Aug 25, 2020

dor272 commented Aug 26, 2020

adrienbaron commented Aug 26, 2020 • edited Loading

dor272 commented Aug 26, 2020 • edited Loading

dor272 commented Aug 27, 2020

cprcrack commented Mar 24, 2021 • edited Loading

adrienbaron commented Mar 24, 2021 • edited Loading

cprcrack commented Mar 26, 2021 • edited Loading

larzon83 commented Mar 26, 2021

thnee commented May 24, 2021

RobbieTheWagner commented Jul 13, 2021

vishr commented Oct 30, 2019 •

edited

Loading

adrienbaron commented Nov 4, 2019 •

edited

Loading

adrienbaron commented Nov 4, 2019 •

edited

Loading

adrienbaron commented Nov 5, 2019 •

edited

Loading

adrienbaron commented Nov 5, 2019 •

edited

Loading

freddy38510 commented Nov 5, 2019 •

edited

Loading

kevinmarrec commented Dec 6, 2019 •

edited

Loading

dor272 commented Aug 25, 2020 •

edited

Loading

adrienbaron commented Aug 26, 2020 •

edited

Loading

dor272 commented Aug 26, 2020 •

edited

Loading

cprcrack commented Mar 24, 2021 •

edited

Loading

adrienbaron commented Mar 24, 2021 •

edited

Loading

cprcrack commented Mar 26, 2021 •

edited

Loading