Vuetify 3 styles missing in the production build

[pferreirafabricio]

Hi!
I was having some trouble using this plugin along with Vuetify. For some reason, when I ran npm run build most of the CSS of the components that I was using on my page was not loaded.
After some hours I decided to generate a build without the nuxt-purgecss inside the modules array, and then the styles of the components are showing correctly.

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
import vuetify from "vite-plugin-vuetify";

export default defineNuxtConfig({
  devtools: { enabled: true },
  build: {
    transpile: ["vue-toastification", "vuetify"],
  },
  modules: [
    "@nuxt/image",
    "@pinia/nuxt",
    "@pinia-plugin-persistedstate/nuxt",
    "@nuxtjs/robots",
    "nuxt-icon",
    // eslint-disable-next-line require-await
    async (_options, nuxt) => {
      nuxt.hooks.hook("vite:extendConfig", (config) =>
        // @ts-ignore
        config.plugins.push(vuetify()),
      );
    },
  ],
  vite: {
    ssr: {
      noExternal: ["vuetify"],
    },
  },
  typescript: {
    shim: false,
  },
  css: [
    "vuetify/lib/styles/main.sass",
    "@mdi/font/css/materialdesignicons.min.css",
  ],
  experimental: {
    inlineSSRStyles: false,
  },
});

package.json:

"devDependencies": {
  "@nuxt/devtools": "latest",
  "@types/node": "^18.16.19",
  "nuxt": "^3.6.2",
  "nuxt-purgecss": "^2.0.0",
  "vite-plugin-vuetify": "^1.0.2",
  "sass": "^1.64.2"
},
"dependencies": {
  "vuetify": "^3.3.11",
  "@mdi/font": "^7.2.96"
}

In dev:

In production build:

[pferreirafabricio]

One solution that I've found is putting the reference to Vuetify CSS directly inside the head tag (in the nuxt.config.ts), something like this:

app: {
    head: {
      link: [
        {
          rel: "stylesheet",
          href: "https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css",
        },
      ],
    },
  },

But certainly not optimal.

Reference: nuxt/nuxt#5966 (comment)

[pferreirafabricio]

I've made a repository to exemplify this bug with the minimal configurations: https://github.com/pferreirafabricio/issue-nuxt-vuetify-purgecss
Also, it can be accessed in CodeSandbox: https://codesandbox.io/p/github/pferreirafabricio/issue-nuxt-vuetify-purgecss/main

I hope it helps!

[Buczek05]

I have the same problem

[ae-daenchrisarmada]

In my case, I just removed/commented the nuxt-purgecss under the buildModules then everything worked like a charm.

[pferreirafabricio]

In my case, I just removed/commented the nuxt-purgecss under the buildModules then everything worked like a charm.

Yeah, that was my solution, but remember that now you have unpurged CSS.

[ae-daenchrisarmada]

Hello @pferreirafabricio

It is a lot better than "not working at all"