I have a simple ponent script written in Options Api:

<script>
export default {
  data() {
    return {
      model: null,
    };
  },
  puted: {
    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 { puted, defineComponent, ref, ComputedRef } from 'vue';

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

I have a simple ponent script written in Options Api:

<script>
export default {
  data() {
    return {
      model: null,
    };
  },
  puted: {
    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 { puted, defineComponent, ref, ComputedRef } from 'vue';

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

• javascript
• typescript
• vue.js
• quasar-framework
• vue-position-api

Share Follow asked Apr 17, 2021 at 13:07 RobertRobert 15111 silver badge66 bronze badges 1

• If you know this.$q exists, try using this[“$q”] – Luke Weaver Commented Apr 17, 2021 at 13:33

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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

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.