Oh, that's brilliant! I was about to say that it's not possible to know the size of the client on the server side, but yeah, this feature at least provides a solution to that!

I was about to say that it's not possible to know the size of the client on the server side, but yeah, this feature at least provides a solution to that!

There is a way using HTTP Client Hints via Critical Client Hints, but only on chromium based browsers:

• https://github.com/userquin/http-client-hints
• https://github.com/userquin/nuxt-http-client-hints (feat: use http-client-hints userquin/nuxt-http-client-hints#10)

@userquin Yep, though it's a bit of an unreliable API in that it will only apply to future requests (unless using Critical-CH which will reload the first request), and browser support is only chromium (https://caniuse.com/mdn-http_headers_accept-ch_dpr), and also the client headers are somehow marked deprecated https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Width (seems it's in the process of being replaced with sec-ch-viewport-width) but you should be able to set the header on the nuxt server for all request and retrieve the client width using useRequestHeaders through useState and use it in the ssrWidth option

The headers from this HTTP API can be seen on https://browserleaks.com/client-hints

Maybe we should provide a small composable for the nuxt package only where we use useRequestHeaders and useState and provide it by default to all composables that need a SSR width. The core would just need a setup method to share this value everywhere, this would avoid some Content Layout Shift on the page
@antfu What do you think about adding this feature to the nuxt package?

I didn't test this yet, but it would look something like this edbad77

Yeah, Critical Client Hints would be an interesting approach for this, but I agree it's more on the framework integration scope. I think we could have this feature first and discuss if we could provide better integration for Nuxt later.

I'm working on getting a minimal repro example (my setup is fairly complex so trying to carve it out) but just for the time being - I upgraded to 12.1.0 and getting node_modules/@vueuse/core/index.mjs?v=d9158410' does not provide an export named 'useSSRWidth' error. This is a NuxtJS project with ssr set to false.

Spent too much time trying to repro but what problem hasn't been solved by just deleting node_modules? 😅 No longer an issue

Any hints on how to properly use this new feature?

I tried to use it like this:

const breakpoints = useBreakpoints(breakpointsTailwind, { ssrWidth: 768 })

But the problem is that as soon as I set ssrWidth the client width is not taken into account anymore. So, if I set { ssrWidth: 768 }, then even on a large screen the result (on the client, after hydration) is { "sm": true, "md": true, "lg": false, "xl": false, "2xl": false }. If I remove { ssrWidth: 768 } parameter, then all works fine ({ "sm": true, "md": true, "lg": true, "xl": false, "2xl": false }), but obviously Hydration mistmatch problem appears.

I use @vueuse/core@npm:12.5.0, @vueuse/nuxt@npm:12.5.0.

Is it supposed to work this way? I'm just trying to understand what exactly does this feature do. The docs are scarce about this.

What exactly should happen when ssrWidth is set? I understand that it uses this width on the server rendering, but what should happen next? Should the values be "corrected" after hydration to values based on the real screen size (with jumpy layout effect)? Or ssrWidth will override the client's values even after hydration, like it does in my case?

A reproduce: https://stackblitz.com/edit/nuxt-starter-bt55593r?file=app.vue

Should the values be "corrected" after hydration to values based on the real screen size (with jumpy layout effect)?

Yes on mounted the values are corrected and yes if the values don't match you get a jump

This seems to be a reactivity issue with the object props as other methods like current() (which uses the shortcut object keys under the hood) don't have this issue

Yes this issue appears because the properties are behind a getter and reevaluated on each pass, but it uses a composable under the hood, and the composable is not meant to be called/initialized all of the time, it should only happen within the component setup, but right now it's being called every time vue rerenders, if you keep a reference to the shortcut, this does not happen

https://stackblitz.com/edit/nuxt-starter-cnydzchs?file=app.vue