SSR how to set defaultBreakpoint value according to serverMiddleware function?

[Manieck]

Hi All

I can't find a solution for this for a long time.

I have serverMiddleware function:

device-detect.js

import parser from 'ua-parser-js';

export default (req, res, next) => {
  const ua = parser(req.headers['user-agent']);
  console.log(ua.device.type);  // returns: console, mobile, tablet, smarttv, wearable, embedded
  req.device = ua.device.type;  // I tried by req
  next();
}

nuxt.config.js

serverMiddleware: [
    '~/server_middlewares/device-detect.js'
  ]

And now I would like to set the defaultBreakpoint value in accordance with what this function decodes in plugin media-query.js

import Vue from 'vue';
import VueMq from 'vue-mq';

Vue.use(VueMq, {
  breakpoints: { // default breakpoints - customize this
    phone: 500,
    tablet: 700,
    desktop: Infinity
  },
  defaultBreakpoint:  // < How to set it according to the function device-detect.js  
})

Thanks to this, we will avoid generating SSR incompatible with the device.

Do you have any ideas how to do it?

Thx

[JoeDaku]

I would also love for this to be configureable and not static. Perhaps it could support a function? I'm also using Nuxt. Maybe the wrapping Nuxt module could then pass the context to that function.