SSR async components $q.screen reactivity

Describe the bug When using SSR and some conditional class based on $q.screen.something in an async component this conditional class is not updated.

Example component:

<template>
        <q-input outlined bg-color="red" label="test" :class="$q.screen.gt.xs ? '' : 'fit'"/>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  created() {
    console.log(this.$q.screen.gt.xs);
  },
  mounted() {
    console.log(this.$q.screen.gt.xs);
  },
})
</script>

Upon initial load this input field will still have the fit class applied to it until you interact with the input.

Codepen/jsFiddle/Codesandbox (required) There is no Codesandbox available yet for SSR in Quasar v2.

To Reproduce Steps to reproduce the behavior:

1. Create new quasarv2 project
2. Add the a component AsyncComp.vue to the components file with the content above.
3. Add AsyncComp: defineAsyncComponent(() => import('src/components/AsyncComp.vue')) to Index.vue’s components declaration. Also add import {defineAsyncComponent} from 'vue' to this file.
4. Add the <async-comp/> somewhere in the html.
5. Run with SSR mode quasar dev -m ssr
6. F5 on the index page and see.

Expected behavior Upon hydration the $q.screen.something should be reactive and the conditional class updated. At the mounted() hook this property already has the correct value, I don’t know why it won’t update.

Screenshots If applicable, add screenshots to help explain your problem.

Platform (please complete the following information): Quasar Version: v2.0.0-rc.3 @quasar/app Version: v3.0.0-rc.3 Quasar mode:

• SPA
• SSR
• PWA
• Electron
• Cordova
• Capacitor
• BEX

Tested on:

• SPA
• SSR
• PWA
• Electron
• Cordova
• Capacitor
• BEX

OS: Node: NPM: Yarn: Browsers: iOS: Android: Electron:

Additional context Add any other context about the problem here.

[pdanpdan]

Never on first request/response cycle When all the planets align, something might work:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Viewport-Width https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Width https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept-CH

So as a short answer: no

[JeRabix]

Never on first request/response cycle When all the planets align, something might work:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Viewport-Width https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Width https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Accept-CH

So as a short answer: no

Thanks!