Vue 3, Vuetify 3 and Vite 5: Vuetify components have broken styles after deployment

Question

I'm migrating from vue 2 to vue 3. After the deployment, i'm seeing broken styles

Here is my vuetify.js file

import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
import { fa } from "vuetify/iconsets/fa";
import * as labsComponents from "vuetify/labs/components";
import { aliases, mdi } from "vuetify/lib/iconsets/mdi";
import "vuetify/styles";
import "@fortawesome/fontawesome-free/css/all.css";
import "@mdi/font/css/materialdesignicons.css";
import { LANGUAGE } from "@/constants/locale";

export default (primaryColor, currentLanguage) => {
  return createVuetify({
    locale: {
      locale: currentLanguage,
      ...(currentLanguage === LANGUAGE.ARABIC && {
        rtl: {
          [LANGUAGE.ARABIC]: true,
        },
      }),
    },
    theme: {
      defaultTheme: "light",
      themes: {
        light: {
          accent: primaryColor,
          primary: primaryColor,
        },
      },
    },
    icons: {
      defaultSet: "mdi",
      aliases,
      sets: {
        fa,
        mdi,
      },
    },
    components: {
      ...components,
      ...labsComponents,
    },
    directives,
    legacy: false,
  });
};

and my vite.config.js file

import dns from "node:dns";
import path from "node:path";
import vue from "@vitejs/plugin-vue";
import vuetify, { transformAssetUrls } from "vite-plugin-vuetify";
import { defineConfig } from "vite";
import { fileURLToPath } from "url";
import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";
import inlinePng from "./plugins/vite-plugin-inline-png.mjs";

const config = {
  define: {
    "process.env": {},
  },
  plugins: [
    vue({
      template: { transformAssetUrls },
    }),
    vuetify({ autoImport: true }),
    inlinePng(),
    VueI18nPlugin({
      include: path.resolve(
        path.dirname(fileURLToPath(import.meta.url)),
        "./path/to/src/locales/**"
      ),
    }),
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
  envDir: "env",
  build: {
    outDir: "dist",
    assetsDir: process.env.BUILD_NUMBER ? process.env.BUILD_NUMBER : ".",
    sourcemap: false,
    minify: true,
  },
  css: {
    preprocessorOptions: {
      scss: { additionalData: `@import "@/styles/variables.scss";` },
    },
  },
  server: {
    // Enable debug mode
    debug: true,
  },
  optimizeDeps: {
    exclude: ["vue-router"],
  },
};

export default defineConfig(config);

Difference between local and production

Also noticed that :root variables for styles are not being set when deployed (comparing local with production)

I have followed the vue and vuetify migration guides and I believe I have done what was required, but i'm still getting it right.

I've spent 3 days searching for solutions but could not find anything useful. What am I doing what? I would appreciate your help, thanks.

Answer 1

This has been solved. The issue was the csp block on vuetify styles. I was supposed to disable it as per the docs: https://vuetifyjs.com/en/features/theme/#csp-nonce

Already had this, inside vuetify.js

const cspNonceElm = document.head.querySelector('meta[name="csp-nonce"]');

cspNone property should go directly under theme, but i was setting it on the options level.

Answer 2

fontawesome and materialdesignicons css imports need to be first, followed by vuetify/styles and then everything else.

You also don't need the vuetify/components and vuetify/directives imports when you're using vite-plugin-vuetify.