search

vuetifyjs / nuxt-module

Zero-config Nuxt Module for Vuetify
https://nuxt.vuetifyjs.com/
MIT License
211 stars 21 forks source link

Question: How would I set `ssr.clientWidth` on each request with this module? #134

Closed ttonyh closed 11 months ago

ttonyh commented 11 months ago

How would I set ssr.clientWidth on each request with this module?

I'm currently doing it now (not currently using this module, but would like to start). This is so that I can detect if they are mobile or not via User-Agent to and set a width. I see you implemented SSR hints, which is great but only Chrome based browsers currently supports them.

userquin commented 11 months ago

You dont need to check user agent, just enable ssr in nuxt and enable http client hints, you can use vuetify composables to check the size (if it is sm, lg...), the module will configure vuetify options properly.

You can enable the cookie to support non chromium based browsers.

userquin commented 11 months ago

Upps, client viewport not yet included (only theme cookie support)... I'm working on a Nuxt PR.

ttonyh commented 11 months ago

That's fantastic! I'm curious, how does it know if it's mobile or not if the browser is not using Client Hints and you're not checking the User-Agent? By the way, I'm using the "useDisplay/mobile" prop in Vuetify to set some layout items. I assume this will work property with your module.

userquin commented 11 months ago

The server plugin will request http client hints if missing from client and enabled in the module configuration. Then the client will request the same page (chromium browser only) sending back the client hints. Then the serve plugin will configure vuetify ssr options before creating the plugin. Finally, when your app calls useDisplay in the server, vuetify will use ssr options. I have also this another package to check mobile using User Agent Client Hints in client and server: https://github.com/userquin/detect-browser-es (will be used also in my nuxt pr). I have no idea about vuetify logic to detect mobile, if it is based on client viewport I guess it is not a good one (I prefer narrow screen or xs or sm).

The server plugin can be found here https://github.com/userquin/vuetify-nuxt-module/blob/main/src/runtime/plugins/vuetify-client-hints.server.ts

ttonyh commented 11 months ago

Awesome, thank you. I'm going to migrate to this module soon, I hope!

Yea, I think Vuetify detects mobile by the viewport size.