[Feature Request] Vuetify renderes in mobile display mode in SSR causing major layout shifts during hydration

[ttonyh]

Problem to solve

Allow a default value to be set on-render so that one can fake a window width during SSR rendering, to reduce the UI from shifting on hydration.

During SSR, the server is able to get a general idea if the client is a mobile device or not by parsing the User Agent string. Although not always accurate, it's can generally be good enough for most cases.

I would like to be able to, based on mobile or desktop device, use a default value for, what Vuetify gets as the window.innerWidth. That way when the page loads and hydrates, it won't shift too dramatically as it expands or contracts, to meet the actual device width.

Proposed solution

This can easily be done with the "getClientWidth" method in display.ts:

vuetify/packages/vuetify/src/composables/display.ts

Line 100 in a7ec148

function getClientHeight (isHydrate?: boolean) {

Instead of always returning 0, a default value can be given on every request. Maybe this can be an exposed method that's part of the useDisplay composable. Being able to set the height would also be nice; and that would work the same way using the "getClientHeight" method, in the same file.