2

I use nuxt.js with vuetify. the website works great and already in production. but when i look at view source, i see lots of garbage, that i would prefer to avoid, mainly for performance reasons. the culprit is vuetify, that spits what looks like all available colors, whether i use them or not. here is a very small portion of this:

.v-application .primary {
  background-color: #1976d2 !important;
  border-color: #1976d2 !important;
}
.v-application .primary--text {
  color: #1976d2 !important;
  caret-color: #1976d2 !important;
}
.v-application .primary.lighten-5 {
  background-color: #c7fdff !important;
  border-color: #c7fdff !important;
}
.v-application .primary--text.text--lighten-5 {
  color: #c7fdff !important;
  caret-color: #c7fdff !important;
}
.v-application .primary.lighten-4 {
  background-color: #a8e0ff !important;
  border-color: #a8e0ff !important;
}
.v-application .primary--text.text--lighten-4 {
  color: #a8e0ff !important;
  caret-color: #a8e0ff !important;
}

it goes on and on like this. and this is after production build. Any idea how to remove this?

Ron Al
  • 397
  • 1
  • 6
  • 19

2 Answers2

2

@Ron Al you can add this as your default purge-css config for nuxt. So, in your nuxt.config.js add

purgeCSS: {
    enabled: true,
    paths: [
      'components/**/*.vue',
      'layouts/**/*.vue',
      'pages/**/*.vue',
      'plugins/**/*.js',
      './node_modules/vuetify/dist/vuetify.js'
    ],
    styleExtensions: ['.css'],
    // whitelist: ['body', 'html', 'nuxt-progress', ''],

    whitelist: ['v-application', 'v-application--wrap','layout','row','col'],
    whitelistPatterns: [
      /^v-((?!application).)*$/,
      /^theme--*/,
      /.*-transition/,
      /^justify-*/,
      /^p*-[0-9]/,
      /^m*-[0-9]/,
      /^text--*/,
      /--text$/,
      /^row-*/,
      /^col-*/
    ],
    whitelistPatternsChildren: [/^v-((?!application).)*$/, /^theme--*/],

    extractors: [
      {
        extractor: content => content.match(/[A-z0-9-:\\/]+/g) || [],
        extensions: ['html', 'vue', 'js']
      }
    ]
  }

Got it from this website: https://qiita.com/nogutk/items/58370cd8a713111be9bc

Furthermore, you can whitelist any css that you don't want to be purged by surrounding it in special css comments /* purgecss start ignore */ and /* purgecss end ignore */ as shown below

<style>
/* purgecss start ignore */

some_class {
  text-transform: none !important;
}

/* purgecss end ignore */
</style>
Muluken Getachew
  • 858
  • 6
  • 8
  • Using this and icons: 'mdi' still doesn't purge the size of the 300kb icons, any idea why? @Ambassel – Thorvald Jun 01 '21 at 22:41
  • I didn't use purgecss for that, I simply selected mdi icons manually... added only 30 mdi icons with {icons: mdi, values: someObject}... and used them as $vuetify.icons.mdiPhone – Muluken Getachew Jun 02 '21 at 08:03
  • Didn't that create massive problems for you when every single component which needs icons, e.g combobox, v-select etc. doesn't have their icons & you have to find ways to add them manually? Any chance you can link a codepen example? – Thorvald Jun 02 '21 at 09:02
0

you can use nuxt-purgecss to remove all unused css.

you can simply add it in the buildModules section of your nuxt.config.js as shown below.

nuxt-purgecss

Muluken Getachew
  • 858
  • 6
  • 8
  • 1
    thanks. that thing destroyed my website, so i had to remove it. looking for more options. I wonder what's the built in, the 'by-the-book' solution for deploying a nuxt+vuetify solution. – Ron Al Jan 06 '21 at 15:51