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?

[shivamp-argus]

Any updates on this?
I have my nuxt.config.js file like this and when building it, the styles related to vuetify are loaded after the components are loaded. Though I can see the styles files being loaded in network tab, but still I can see flashing for 2 3 seconds.

export default defineNuxtConfig({
  devtools: { enabled: true },

  alias: {
    '@test': resolve(__dirname, 'unitTestUtils'),
    '/src': resolve(__dirname, 'src'),
    '/components': resolve(__dirname, 'src/common/components'),
    '/assets': resolve(__dirname, 'assets'),
    '/plugins': resolve(__dirname, 'plugins')
  },

  rootDir: join(process.cwd(), rootDirFrontend),
  mode: 'spa',

  server: {
    host: '0.0.0.0'
  },

  app: {
    head: {
      titleTemplate: '%s',
      meta: [
        {
          name: 'viewport',
          content: 'width=device-width, initial-scale=1'
        }
      ],
      style: [
        {
          cssText: '#nuxt-loading { display: none !important; }',
          type: 'text/css'
        }
      ],
      // Material Symbols (Icons).
      link: [
        {
          rel: 'stylesheet',
          href: 'https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400,0..1,0'
        }
      ]
    }
  },

  vite: {
    plugins: [
      ViteYaml(),
      vuetify({
        autoImport: true,
        styles: {
          configFile: 'src/styles/settings.scss'
        }
      })
    ],
    vue: {
      template: {
        transformAssetUrls
      }
    }
  },

  vue: {
    runtimeCompiler: true
  },

  loading: {
    color: '#68BFEC',
    failedColor: '#d84b37',
    height: '5px'
  },

  spaLoadingTemplate: join(process.cwd(), './page-loader.tpl.html'),

  router: {
    scrollBehavior: function () {
      return { x: 0, y: 0 };
    }
  },

  ssr: false,

  build: {
    transpile: ['vuetify']
  },

  pages: true,
  compatibilityDate: '2025-06-12'
});

[AndreyYolkin]

Since this was filed, the styling pipeline has been completely rewritten onto @vuetify/unplugin-styles and several FOUC/SSR-styles issues have been fixed (e.g. #291, #74, #322). Could you retry on the latest 1.0.0-beta? If the FOUC persists, please share a minimal reproduction — note that FOUC can also come from CSS ordering between Tailwind and Vuetify rather than the module itself.

[AndreyYolkin]

Closing as stale. If this still reproduces on the latest version, feel free to reopen — ideally with an updated minimal reproduction. 🙏