useQuasar() returns undefined in pinia store file - VueJS

Question

In my VueJS + Quasar project, I am trying to use useQuasar() in my store gallery.js file. But it returns undefined.

I had the same problem when accessing useRouter(), but then I found a solution. We have a router export in node_modules/quasar/wrappers/index file, so I used that to pass in my stores from main store index.js file:

import { route, store } from 'quasar/wrappers';
import { createPinia } from 'pinia';
import { markRaw } from 'vue';

export default store((/* { ssrContext } */) => {
  const pinia = createPinia();

  pinia.use(({ store }) => {
    store.router = markRaw(route);
  });

  return pinia;
})

My sample store file:

import { defineStore } from 'pinia';
import { useQuasar } from "quasar";
export const useGalleryStore = defineStore('gallery', {
    actions: {
        test_function() {
            const $q = useQuasar();
            console.log($q); // undefined
        }
    }
})

I tried to find quasar export also in node_modules/quasar/wrappers/index file but there is no quasar export in that file, so I don't see any way to use this.$q or $q or useQuasar() in my store file.

My usages are that I need $q.notify(), $q.platform, and $q.screen.

Is there any way to use them inside store file?

Answer 1

Quasar doesn't allow the use this.$q or useQuasar outside of .vue components.

If you want to use outside component, you should use:

import { Quasar, Platform } from 'quasar'

console.log(Quasar.version)
console.log(Platform.is.ios)

Source: https://quasar.dev/options/the-q-object#outside-of-a-vue-file