Vuetify components loading in mobile view first then after few seconds in desktop view in Nuxt 3

I have a project a in Nuxt and I have used vuetify 2 components so at first when the page loads it displays the mobile view meaning how the page would look if someone would view it from mobile.

After few seconds it rectifies that it is desktop so it displays the in desktop view .Can someone tell me why is this happening?Is it vuetify components problem?

This is a general problem because hydration takes a little time to happen. There are multiple fixes to this.

1- In the latest versions of nuxt, you can define a template to be rendered until hydration is finished so this wouldn't happen.

https://nuxt.com/blog/v3-6#spa-loading-indicator

2- You can define the starting screen width for the vuetify so it would know how to correctly render before hydration. This would require you to know (guess) the screen width before javascript runs, usually by inspecting the user agent.

This is an example code i use in Nuxt 3.

import { createVuetify } from 'vuetify';


export default defineNuxtPlugin(nuxtApp => {

  let ssr = true;

  if (!nuxtApp.ssrContext?.event?.node?.req?.headers?.['user-agent']?.toLowerCase().includes('mobi')) {
    ssr = {
      clientWidth: 1281, // the desired width for initial render. This is a 'lg' breakpoint width
    };
  }

  const vuetify = createVuetify({
    ssr,
  });

  nuxtApp.vueApp.use(vuetify);

});