Ability to set `defaultBreakpoint` dynamically in nuxt module

[cainaf]

Feature Suggestion
Add the possibility to set the defaultBreakpoint dynamically when using nuxt module.

Why?
To prevent misbehavior of components when reloading a page in a screen size that is not the default. Components that depends on $mq are wrongly shown or hidden while vue-mq is not fully loaded in the frontend application, causing a blink of very misplaced ui components for a few seconds.

Suggested solution
With SSR it's possible to have a header telling the screen size of origin request. We could have something like:

/**
* nuxt-mq
*/
mq: {
  defaultBreakpoint: (req) => {
    if (req.headers['CloudFront-Is-Mobile-Viewer']) {
      return 'modernPhone';
    }
    if (req.headers['CloudFront-Is-Tablet-Viewer']) {
      return 'tablet';
    }
    return 'desktop';
  },
  breakpoints: {
    oldPhone: 375, // 0 ~ 374
    modernPhone: 800, // 375 ~ 799
    tablet: 1000, // 800 ~ 999
    notebook: 1200, // 1100 ~ 1199
    desktop: Infinity, // 1300+
  },
},

[mrtnvh]

Hi @cainaf!

I'm Maarten, the maintainer of nuxt-mq. I should note that @AlexandreBonaventure and I aren't affiliated.

Thank you for your request.

I've been thinking about this feature for a while myself, but I could come up with any valid use-cases to implement it. The main question that keeps blocking me is: When do you have the ability to add this specific information the client-side request?

Do you have any specific use-cases where this feature would benefit you? I'd love to explore this topic more.

PS.
I believe that a user-unobtrusive implementation of Client Hints could be the solution to this problem. With this, we could set the server-side breakpoint according to the Viewport-Width Client Hint.

[cainaf]

Hello @vanhoofmaarten!

Hope you're doing fine, thanks for your response!

When do you have the ability to add this specific information the client-side request?

I don't have full knowledge to confirm the best way, but I would guess this information can be inferred directly from user-agent header. It's possible to extract from it which os and browser user is using, and thus if it's a mobile device or not.

Libs like express-useragent implements that parsing logic.

Furthermore, some CDN providers will parse that information before forwarding request to origin. AWS cloudfront let you forward following headers to identify it's device type:

• CloudFront-Is-Desktop-Viewer
• CloudFront-Is-Mobile-Viewer
• CloudFront-Is-Tablet-Viewer

But again, I guess they just extract that information from user-agent header. So answering the question, I think there is no need to specify anything in the client-side request. As this header is always present, only parsing it would be needed.

Do you have any specific use-cases where this feature would benefit you? I'd love to explore this topic more.

I have a nuxt application that relies on nuxt-mq for many of it's components. I guess there is no use-case that would be really specific, just the fact that once you decide to use $mq in your SSR application, it means that these UI misbehaviors with misplaced components would always happen. And for a production application it looks a bit unprofessional.

I've been using a double of $mq and media-queries to ensure these blinks would not occur. But it's kind of a double coding, when you're already removing from the DOM an html tag that should not be present in mobile layouts and also have to specify a media-query just for the 2 seconds it will be rendered while vue-mq is not fully loaded.

[magbeans]

Hello
Is that issue solved?
Actually that is need to prevent FOUC issue on SSR website.
Hope that will be fixed as quickly as possible.

[mrtnvh]

Hi,

I haven't come around to implementing this feature (yet). I'm happy to accept Pull Requests.