CODEWITHSUNDEEP
javascripttypescriptvue.jsquasar-frameworkvue-composition-api
Robert
Robert

Reputation: 141

How to access this.$q quasar object in setup? - Vue 3 Composition API

I have a simple component script written in Options Api:

<script>
export default {
  data() {
    return {
      model: null,
    };
  },
  computed: {
    isMobile() {
      return this.$q.screen.xs || this.$q.screen.sm;
    }
  }
};
</script>

How do I rewrite it to Composition Api in Typescript? I managed to achieve something like this, but I do not know, how to access this.$q variable.

<script lang="ts">
import { computed, defineComponent, ref, ComputedRef } from 'vue';

export default defineComponent({
  name: 'QuasarTest',
  setup() {
    const isMobile: ComputedRef<boolean> = computed((): boolean => {
      return this.$q.screen.xs || this.$q.screen.sm;;
    });
    return {
      isMobile,
      model: ref(null),
    };
  }
});
</script>

Upvotes: 4

Views: 2389

Answers (2)

Jacques Ramsden
Jacques Ramsden

Reputation: 871

I know this question is old, but I see it doesn't have an accepted answer yet so let's see if we can help someone.

In the new syntax you could also just do this.

import { Platform } from 'quasar';

console.log(Platform.is.desktop);

If you are looking for the screen related sizes then you will need to ensure you have the screen plugin installed in your quasar.config.

Then you can do something similar again.

import { Screen } from 'quasar';

console.log(Screen.xs);

Hope this helps someone.

Upvotes: 0

Robert
Robert

Reputation: 141

If someone needed it in the future. The correct answer is to use composable: useQuasar as written in documentation

Upvotes: 7

Related Questions