SSR not working with mq-layout

[SnooHD]

Good day,
I'm using ssr for my project, and if im using
<mq-layout mq="mobile">
it renders <mq-layout> instead of a div and ignores the breakpoint.

When im using <div v-if="$mq === 'mobile'> it works as intented.
This only happens while using SSR.

[Bergrebell]

same here. also when using <div v-if="$mq === 'mobile'> i get an error saying that Property or method "$mq" is not defined on the instance but referenced during render.

[1shaked]

When I am using <div v-if="$mq === 'mobile'> I ma getting _vue.runtime.esm.js:619 [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render._
not sure what to do; I am using Nuxt version 2.2 and Vue-MQ version 1.0.1. Every time I am adding v-if for $mq, an error occurs.

[SnooHD]

@1shaked give it a go with https://github.com/vanhoofmaarten/nuxt-mq ;)

[1shaked]

I tried this library which causes the same issue; I tried moving away from it with vue-MQ

[acacha]

Responsive design and SSR is complex. Please read: https://nitayneeman.com/posts/combining-server-side-rendering-and-responsive-design-using-react/