Question:

How to use useQuasar() returns undefined in pinia store file in VueJS?

Problem:

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?

Solution:

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

>Invoking Python script from scons and pass ARGLIST

>Migrate From Haruko To AWS App: 5 Simple Steps

>PHP cURL to upload video to azure blob storage