Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Purgecss breaks with nuxt and vuetify

See original GitHub issue

I followed the instructions on setting up purgecss with nuxt and added it to simple vuetify nuxt project.

https://github.com/husayt/nuxt-vuetify-purgecss

As you can see with npm run build and npm run start layout just breaks apart.

Vuetify is the most popular material ui framework for vue and it would be great to get purgecss working with it

Issue Analytics

State:
Created 6 years ago
Comments:38 (5 by maintainers)

Top GitHub Comments

15reactions

IsraelOrtunocommented, Apr 26, 2020

I managed to remove a lot of unused CSS in my Nuxt + Vuetify + Tailwind app. It took me a while to figure out but I ended adding these options to my purgeCSS configuration which matched my requirements pretty nicely.

    whitelist: ['v-application', 'v-application--wrap'],
    whitelistPatterns: [/^v-((?!application).)*$/, /^theme--*/, /.*-transition/],
    whitelistPatternsChildren: [/^v-((?!application).)*$/, /^theme--*/],

I basically wanted to get rid of all v-application--is-rtl classes plus all vuetify utility classes and use tailwinds. My CSS is now ~83kb rather than ~245kb. You could also whitelist just theme--light if you would like to remove the dark theme styles.

I did also disable $color-pack. https://vuetifyjs.com/en/styles/colors/#sass-color-pack

$color-pack: false;

12reactions

andrejsharapovcommented, Feb 26, 2021

@patrickxchong Thx! I ended up with the same result as in my example. So it works 😆

I will leave this for posterity.

My App:

Without all the nuxt-purgecss = parsed All (890.96 KB), gzipped All (208.99 KB)

2. Only buildModules: nuxt-purgecss (without extractCSS and @fullhuman/postcss-purgecss)

  buildModules: [
    [
      'nuxt-purgecss',
      {
        paths: [
          'node_modules/@nuxtjs/vuetify/**/*.ts',
          'node_modules/@nuxt/vue-app/template/**/*.html',
          'node_modules/@nuxt/vue-app/template/**/*.vue',
        ],
        whitelist: ['v-application', 'v-application--wrap'],
        whitelistPatterns: () => [
          /^v-((?!application).)*$/,
          /^\.theme--light*/,
          /.*-transition/,
        ],
        whitelistPatternsChildren: [/^v-((?!application).)*$/, /^theme--*/],
      },
    ],

parsed All (551.17 KB), gzipped All (167.62 KB)

3. buildModules + extractCSS (without @fullhuman/postcss-purgecss)

  buildModules: [
    [
      'nuxt-purgecss',
      {
        paths: [
          'node_modules/@nuxtjs/vuetify/**/*.ts',
          'node_modules/@nuxt/vue-app/template/**/*.html',
          'node_modules/@nuxt/vue-app/template/**/*.vue',
        ],
        whitelist: ['v-application', 'v-application--wrap'],
        whitelistPatterns: () => [
          /^v-((?!application).)*$/,
          /^\.theme--light*/,
          /.*-transition/,
        ],
        whitelistPatternsChildren: [/^v-((?!application).)*$/, /^theme--*/],
      },
    ],
  ],
  build: {
    analyze: true,
    extractCSS: true,

parsed All (532.1 KB), gzipped All (162.71 KB)

4. buildModules + extractCSS + @fullhuman/postcss-purgecss

  buildModules: [
    [
      'nuxt-purgecss',
      {
        paths: [
          'node_modules/@nuxtjs/vuetify/**/*.ts',
          'node_modules/@nuxt/vue-app/template/**/*.html',
          'node_modules/@nuxt/vue-app/template/**/*.vue',
        ],
        whitelist: ['v-application', 'v-application--wrap'],
        whitelistPatterns: () => [
          /^v-((?!application).)*$/,
          /^\.theme--light*/,
          /.*-transition/,
        ],
        whitelistPatternsChildren: [/^v-((?!application).)*$/, /^theme--*/],
      },
    ],
  ],
  build: {
    analyze: true,
    extractCSS: true,
    postcss: {
      plugins: {
        '@fullhuman/postcss-purgecss': {
          content: [
            'components/**/*.vue',
            'layouts/**/*.vue',
            'pages/**/*.vue',
            'plugins/**/*.js',
            'node_modules/vuetify/src/**/*.ts',
          ],
          styleExtensions: ['.css'],
          safelist: {
            standard: ['body', 'html', 'nuxt-progress'],
            deep: [
              /page-enter/,
              /page-leave/,
              /dialog-transition/,
              /tab-transition/,
              /tab-reversetransition/,
            ],
          },
        },
        'css-byebye': {
          rulesToRemove: [/.*\.v-application--is-rtl.*/, /.*\.theme--dark.*/],
        },
      },
    },
  },

parsed All (532.1 KB), gzipped All (162.71 KB)

Top Results From Across the Web

vue.js - Nuxtjs + Vuetify + Purgecss - Stack Overflow

I can't seem to get purgecss to remove the icons though (which is the most important to me). I installed "@nuxtjs/vuetify": "^1.11.3", I ......

[Solved]-How to enable PurgeCSS for 3rd-part CSS-Vue.js

I fixed it by using nuxt-purgecss. nuxt.config.js module.exports = { buildModules: [ 'nuxt-purgecss' ] }. DengSihan 1244. Source: stackoverflow.com ...

Vue and Nuxt Performance Optimization Checklist

Read the comprehensive and in-depth technical article summarizing how to improve the site performance with efficient use of Vue.js and Nuxt.

Optimizing CSS with PurgeCSS | Warren Lee

I think one thing you can try is to reduce the amount of unused CSS when you're using a type of Vue/CSS framework...

CSS Reset — Vuetify

Vuetify is a Material Design component framework for Vue.js. It aims to provide all the tools necessary to create beautiful content rich ...