Let's say i have markup to be rendered only for desktop via v-if.

If it's mobile it should render something v-else.

I am using the package vue-mq which allows for setting a default breakpoint which should be used for server side rendering.

When i put 'sm' in there and load the page from a desktop the browser obviously first receives the 'sm' version of the site which might differ from the 'lg' version.

Therefore a mismatch is caused showing up in the console.

What's the right way of conditionally rendering html content for ssr in nuxt/vuejs?

Any ideas on how to properly solve this without having the user load both versions of markup (like when using v-show instead of v-if which solves the mismatch but does add to the bandwidth usage)?

Any help is very much appreciated.

Thanks!