I added Quasar to my pre-existing Vue CLI project with vue add quasar.

Now I'm trying to use the Loading plugin, but I can't get it to work.

Here's what I have related to Quasar/Vue setup:

import { Quasar } from 'quasar'

Vue.use(Quasar, {
  config: {},
  ponents: { /* not needed if importStrategy is not 'manual' */ },
  directives: { /* not needed if importStrategy is not 'manual' */ },
  plugins: {},
  cssAddon: true,
  extras: [
    'ionicons-v4',
    'material-icons',
    'material-icons-outlined',
    'material-icons-round',
    'material-icons-sharp',
    'mdi-v3',
    'eva-icons',
    'fontawesome-v5',
    'themify'
  ]
})

I tried with the options below to no avail. Any ideas?

import { Quasar } from 'quasar'

Vue.use(Quasar, {
  ...,
  framework: {
    plugins: [
      'Loading'
    ]
  },
  ...
})

and

import { Quasar } from 'quasar'

Vue.use(Quasar, {
  ...
  plugins: ['Loading'],
  ...
})

I added Quasar to my pre-existing Vue CLI project with vue add quasar.

Now I'm trying to use the Loading plugin, but I can't get it to work.

Here's what I have related to Quasar/Vue setup:

import { Quasar } from 'quasar'

Vue.use(Quasar, {
  config: {},
  ponents: { /* not needed if importStrategy is not 'manual' */ },
  directives: { /* not needed if importStrategy is not 'manual' */ },
  plugins: {},
  cssAddon: true,
  extras: [
    'ionicons-v4',
    'material-icons',
    'material-icons-outlined',
    'material-icons-round',
    'material-icons-sharp',
    'mdi-v3',
    'eva-icons',
    'fontawesome-v5',
    'themify'
  ]
})

I tried with the options below to no avail. Any ideas?

import { Quasar } from 'quasar'

Vue.use(Quasar, {
  ...,
  framework: {
    plugins: [
      'Loading'
    ]
  },
  ...
})

and

import { Quasar } from 'quasar'

Vue.use(Quasar, {
  ...
  plugins: ['Loading'],
  ...
})

• javascript
• vue.js
• loading
• quasar-framework

• This seems to be the right config. How do you try to use it? – Alex Brohshtut Commented Apr 1, 2020 at 5:40
• @AlexBrohshtut this.$q.loading.hide() which tells me $q doesn't exists – tucaz Commented Apr 1, 2020 at 23:09
• 3 If you are adding Quasar to existing project, then this.$q will not work, you need to use global Quasar object instead - read about this here - quasar.dev/start/umd – Alex Brohshtut Commented Apr 2, 2020 at 4:43

2 Answers 2

I got this to work in a similar vue-cli setup with Vue 3 and Quasar 2 with some help from the "Using Vue" docs in quasar.

quasar-user-options.js

import './styles/quasar.sass'
import { Notify } from 'quasar'

// To be used on app.use(Quasar, { ... })
export default {
  config: {
  },
  plugins: [Notify]
}

And in main.js it's used like:

import { createApp } from 'vue'
import App from './App.vue'
import { Quasar } from 'quasar'
import quasarUserOptions from './quasar-user-options'
import router from './router'

createApp(App).use(router).use(Quasar, quasarUserOptions).mount('#app')

I think in your setup you just weren't importing the plugin when you added it to the plugins config.

Since I didn't use quasar-cli to add Quasar to my application I had to resort to global calls to the plugin. Here's how I ended up doing and it is the same thing that @Alex Brohshtut suggested in his ment.

main.ts

import { Loading } from 'quasar';

http.interceptors.request.use(config => {
  Loading.show({
    delay: 500,
    message: 'Please wait...'
  });
  return config
})

http.interceptors.response.use(response => {
  Loading.hide();
  return response
})