userquin
flash of unstyled content when using vuetify in my nuxt3 app
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;
});
},
},
});
+1 Same. No issue when running nuxt, but the flashes happen if I generate a static version of the site with npm run generate
+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.
This issue may be related to mine: https://github.com/vuetifyjs/nuxt-module/issues/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?
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,[email protected],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'
});
