Question: purpose of clientWidth and/or clientHeight ?

[sk8killer]

What is the purpose of clientWidth and/or clientHeight in the vuetityOptions/ssr option ?

Thank you userquin for this nice module.

[userquin]

@sk8killer (ssr option must be also enabled in nuxt config, by default it is enabled)

When you run the dev server or the server build preview or production server with ssr enabled, the app is rendered in the server: each time you refresh the page in the browser the server will create the app , render it in memory and then send back the data (seo). Similar behaviour when navigating (hybrid mode, ssr + client spa + hydration, check nuxt docs)

In the server, you dont have user agent's (browser) preferences: viewport size (vuetify ssr options), prefers reduce motion, prefers colors scheme...

If your app is using some preference to compose the html page at runtime, the app Will be rendered without the required info.

For example, if you have a nav drawer in your layout, it will be shown only when the viewport has a min width, otherwise it will be hidden.
If the server doesnt have that info, the server will render all pages without the drawer.
When the browser loads the html page, there will be a hydration missmatch error unless you handle the hydration on the client properly (the same app Will run on the client and will display the page with the nav drawer if using browser in desktop, but the server sending the same page without the drawer).

By default, vuetify will use 0 (0px) in both ssr entries, you can change them, but the problem still present, you dont have the exact value, and the missmatch error will be there.

Another example is when you have dark and light themes, the server will not have the preference sending the response with the default theme.

You can handle client hydration properly to avoid client hydration warnings/errors, but that is not optimal, the client and the server app should render the same html output.

The http client hints allows us fix this problem, this module will keep in sync the state vuetify needs to render the app properly in server and client.

[userquin]

Vuetify ssr entries are used by vuetify in useDisplay composable, some components use that composable to render its content (nav drawer for example via useBreakpoints or breakpoint internal logic IIRC)

[userquin]

About http client hints, this module will use a cookie only for color scheme for browsers not supporting the client hints.

I have sent a PR to nuxt to add support for http client hints. I Will try to add cookie support in that PR and then update the logic here to add proper support.