[Vuejs]-How to change the font size depending to the sreen size Vue js 3/ Quasar2?

by

0👍

✅

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>

Leave a comment