flash of unstyled content when using vuetify in my nuxt3 app

[DevBasem]

the styles of vuetify takes time to get applied when reviewing my website in production i don't know what is causing this or is it fixable i'm using tailwind and i happens on first visit to the website or when refreshing

here is my nuxt config :

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: "2024-04-03",
  devtools: { enabled: true },
  // Main CSS File
  css: ["@/assets/css/globals.scss", "~/assets/css/main.css"],
  // Nuxt.js Modules
  modules: [
    "vuetify-nuxt-module",
    "@nuxtjs/google-fonts",
    "@nuxt/image",
    "nuxt-swiper",
    "@vueuse/nuxt",
    "@nuxtjs/i18n",
    "@pinia/nuxt",
    "pinia-plugin-persistedstate/nuxt",
    "nuxt-delay-hydration",
    "@nuxt/eslint",
    "nuxt-keen-slider",
    "@hebilicious/vue-query-nuxt",
  ],
  // Public Runtime Configuration
  runtimeConfig: {
    public: {
      apiBaseUrl: "https://admin.almutairi.webstdy.com/api",
    },
  },

  app: {
    head: {
      meta: [
        { charset: "utf-8" },
        { name: "viewport", content: "width=device-width, initial-scale=1" },
      ],
    },
    // pageTransition: { name: "page", mode: "out-in" },
  },

  routeRules: {
    "/": { static: true }, // adjust the path as needed
  },

  // Typescript Configuration
  typescript: {
    // typeCheck: true,
  },

  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },

  // TailwindCSS Configuration
  // tailwindcss: {
  //   cssPath: ["~/assets/css/tailwind.css", { injectPosition: "first" }],
  //   editorSupport: true,
  //   configPath: "tailwind.config",
  //   exposeConfig: {
  //     level: 2,
  //   },
  //   config: {},
  //   viewer: true,
  // },
  // Vuetify Configuration
  vuetify: {
    moduleOptions: {
      /* module specific options */
    },
    vuetifyOptions: "./vuetify.config.ts",
  },
  // Google Fonts Configuration
  googleFonts: {
    families: {
      Zain: {
        wght: [200, 300, 400, 700, 800, 900],
      },
    },
    prefetch: true,
    preconnect: true,
    preload: true,
    download: true,
    base64: true,
    inject: true,
    overwriting: true,
    outputDir: "assets/fonts",
    fontsDir: "assets/fonts",
    fontsPath: "fonts",
    stylePath: "css/google-fonts.css",
  },
  // Translation Configuration
  i18n: {
    baseUrl: "https://almutairi.webstdy.com/",
    locales: [
      {
        code: "en",
        language: "en",
        name: "EN",
        dir: "ltr",
        file: "en.json",
      },
      {
        code: "ar",
        language: "ar",
        name: "AR",
        dir: "rtl",
        file: "ar.json",
        isCatchallLocale: true,
      },
    ],
    defaultLocale: "ar",
    lazy: false,
    langDir: "lang",
    strategy: "prefix_and_default",
    detectBrowserLanguage: {
      useCookie: true, // Enable cookie usage
      cookieKey: "i18n_redirected", // Name of the cookie
      redirectOn: "root", // Redirect only on the root path
      alwaysRedirect: false, // Disable to avoid redirecting every visit
      fallbackLocale: "ar", // Fallback locale
    },
    vueI18n: "./i18n.config.ts",
  },
  // Nuxt Image Configuration
  image: {
    provider: "none",
    // Automatic format selection (e.g., WebP or AVIF)
    // format: ["webp", "avif"],
    // Resize images to these widths
    // sizes: [320, 640, 768, 1024, 1280, 1536],
    // Enable automatic image quality optimization
    // quality: 80,
    // screens: {
    //   xs: 320,
    //   sm: 640,
    //   md: 768,
    //   lg: 1024,
    //   xl: 1280,
    //   "2xl": 1536,
    // },
  },
  delayHydration: {
    // enables nuxt-delay-hydration in dev mode for testing
    // NOTE: you should disable this once you've finished testing, it will break HMR
    debug: process.env.NODE_ENV === "development",
    mode: "mount",
  },
  vite: {
    css: {
      preprocessorOptions: {
        sass: {
          api: "modern-compiler", // Set the API to modern
        },
        scss: {
          api: "modern-compiler",
        },
      },
    },
    build: {
      sourcemap: false,
      minify: "terser",
    },
  },
  hooks: {
    "build:manifest": (manifest) => {
      Object.values(manifest).forEach((item) => {
        item.css = [];
        // Experimental: Disable prefetching and preloading
        item.prefetch = false;
        item.preload = false;
      });
    },
  },
});

[acoomans]

+1 Same. No issue when running nuxt, but the flashes happen if I generate a static version of the site with npm run generate

[acoomans]

+1 Same. No issue when running nuxt, but the flashes happen if I generate a static version of the site with npm run generate

I figured my issue: Vuetify generates a css called default. My "default" layout had a scoped style defined in its vue. Somehow they don't play well together. Moving the style out of the layout into a css in assets fixed all flashing.

[Kapcash]

This issue may be related to mine: #291

Could you share a reproduction so it's easier to understand the actual problem? Is it the Vuetify component's style that is missing, or your app components ones?