How to change the font size depending to the sreen size Vue js 3/ Quasar2?

Question

I'm expecting to change font classes when changing the screen width with vue js3/quasar2. But it fails, I seem to do everything correct. I do it with options API.

// quasar.config.js 
framework: {
  config: {
    screen: {
      bodyClasses: true
    }
  },
}

// component
<template>
  <p :class="fontSize">text content</p>
</template>

<script>
  export default {
    data() {
      return {
        $q: useQuasar()
      }
    },
    computed: {
      fontSize() {
        if(this.$q.screen.lt.sm) {
          return 'text-body1'
        } else {
          return 'text-body2'              // I always get this line class while resizing the screen
        }
      },
    }
  }
</script>

Answer 1

It looks like there's maybe some confusion over the difference between Vue's Options API and Composition API, because your code is a mix of both, when you should always stick with one. Your code is mainly using Options API but then the line $q: useQuasar() is attempting to use a composable which is specific to the Composition API.

When using "the $q object", the Quasar documentation has clear examples on how to use it with every API style and use case. With the Options API, there's nothing you need to do other than use this.$q wherever needed. It is automatically provided for you by Quasar as a global object. Your attempt to define $q yourself within data() is what broke it for you.

This is all your component's script needs to be:

<script>
  export default {
    computed: {
      fontSize() {
        if(this.$q.screen.lt.sm) {
          return 'text-body1'
        } else {
          return 'text-body2'
        }
      },
    }
  }
</script>