RefreshOnResize

[elzodxon]

I am using Nuxt device with Nuxt 3. But, refreshOnResize is not working properly. I mean, If I resize window, it is not reloading.

[mosasebdani]

Same issue here

[fskarmeta]

same :D

[SamiLejeune]

same

[vasilistotskas]

same

[YannFFT]

Same here

[serhii-chernenko]

same

[vasilistotskas]

Any updates on this ? refreshOnResize is not working properly when set to true.

[barayuda]

I think this PR https://github.com/nuxt-modules/device/pull/174 should be merged and this issue will be fixed. since we can't use refreshOnResize with nuxt@^3.9.0

[DamianGlowala]

Could anyone briefly explain their expectations from using this option, please? What are you trying to achieve? I am considering deprecating it for the Nuxt 3 version of the module, hence want to find out more about its purpose first. This was initially added to 2.x to workaround an issue where values of $device stayed unchaged after a page refresh even though user agent in the browser devtools was modified. Checked this locally and I haven't been able to replicate this behavior so far.

cc @barayuda

[barayuda]

Hi @DamianGlowala , I expect when I resize the window in Responsive mode (device toggle emulation) on browser console window, the value of isMobile even isTablet can be triggered. Why? because I need to know what going with the design looks like when it rendered on multiple screen device. So, the refreshOnResize could be help to debugging this purpose.

Might be any chance to revive this refreshOnResize again in future? thanks in advance

[DamianGlowala]

@barayuda Thank you for explaining your use case. However, are you aware e.g. isMobile and isTablet flags that you mentioned above do not change when the window size changes? I believe users are misunderstaing the original purpose of refreshOnResize option and expect it to change flags based on the breakpoints, which is not the case. This module detects types of devices purely on the information contained within user-agent header. If user-agent header indicates on e.g. a mobile device, no matter how narrow or wide the screen width is, the flags remain the same.

To everyone involved in this thread: please let me know if you agree on the above, or whether I am missing an important point. I'll make sure we reach the right conclusion before any future release is made.

[serhii-chernenko]

@DamianGlowala from your point of view everything is clear and right. but I and, I guess, a lot of people who installed this module expects breakpoints behavior as well because of refreshOnResize option. in this case, during the development process, we struggle a case when in devtools in responsive mode we want to see different HTML layout structure on window resize but it doesn't happen because the user agent is still the same. not sure if it'll be a good idea, but probably it'd be better to create "breakpointMode" instead of user agent or combine them to have changes just on resize, at least in the development mode

[DamianGlowala]

@serhii-chernenko

I and, I guess, a lot of people who installed this module expects breakpoints behavior as well because of refreshOnResize option

refreshOnResize was originally created to allow for updating flags when user-agent header gets changed in DevTools and viewport gets resized (no breakpoints involved at all, they never were). We might make this fact clearer in the README to lower the risk of users having these expectations.

in this case, during the development process, we struggle a case when in devtools in responsive mode we want to see different HTML layout structure on window resize but it doesn't happen because the user agent is still the same.

Resizing window has no impact on the user-agent header. These are two entirely different aspects. However, if you set a different user-agent header in the DevTools and refresh the page, you will see the expected results as flags will change accordingly.

not sure if it'll be a good idea, but probably it'd be better to create "breakpointMode" instead of user agent or combine them to have changes just on resize, at least in the development mode

If you are looking into having breakpoint-based 'flags', I recommend checking the useBreakpoints util from VueUse. Nuxt Device module detects the type of device, not how wide a screen is.

[serhii-chernenko]

@DamianGlowala yeah, it makes sense! thanks for the sharing and explanation. have a nice one!

[barayuda]

@serhii-chernenko

I and, I guess, a lot of people who installed this module expects breakpoints behavior as well because of refreshOnResize option

refreshOnResize was originally created to allow for updating flags when user-agent header gets changed in DevTools and viewport gets resized (no breakpoints involved at all, they never were). We might make this fact clearer in the README to lower the risk of users having these expectations.

in this case, during the development process, we struggle a case when in devtools in responsive mode we want to see different HTML layout structure on window resize but it doesn't happen because the user agent is still the same.

Resizing window has no impact on the user-agent header. These are two entirely different aspects. However, if you set a different user-agent header in the DevTools and refresh the page, you will see the expected results as flags will change accordingly.

not sure if it'll be a good idea, but probably it'd be better to create "breakpointMode" instead of user agent or combine them to have changes just on resize, at least in the development mode

If you are looking into having breakpoint-based 'flags', I recommend checking the useBreakpoints util from VueUse. Nuxt Device module detects the type of device, not how wide a screen is.

Thanks a lot for share this though @DamianGlowala , clear enough for me, glad that you explain the purpose