Setting up Quasar plugins without using Quasar CLI: A step-by-step guide

Question

Setting up Quasar plugins without using Quasar CLI: A step-by-step guide

I integrated Quasar into my existing Vue CLI project by running vue add quasar.

Now I'm attempting to utilize the Loading plugin, but unfortunately, it's not functioning as expected.

Here is the configuration setup for Quasar/Vue that I have in place:

import { Quasar } from 'quasar'

Vue.use(Quasar, {
  config: {},
  components: { /* only necessary if importStrategy is 'manual' */ },
  directives: { /* only necessary if importStrategy is '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 have attempted to implement the following options without success. Any suggestions?

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

Answer 1

Answer №1

I managed to successfully implement this in a vue-cli environment using Vue 3 and Quasar 2, thanks to guidance from the "Using Vue" documentation on quasar.

quasar-user-options.js

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

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

Implementation in main.js:

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')

If you encounter issues, ensure that the plugin is imported when added to the plugins configuration.

Answer 2

I managed to successfully implement this in a vue-cli environment using Vue 3 and Quasar 2, thanks to guidance from the "Using Vue" documentation on quasar.

quasar-user-options.js

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

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

Implementation in main.js:

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')

If you encounter issues, ensure that the plugin is imported when added to the plugins configuration.

Answer 3

Answer №2

Due to my decision not to utilize quasar-cli for integrating Quasar into my application, I had to resort to making global calls to the plugin. The approach I took is similar to what was recommended by @Alex Brohshtut in the comments.

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
})

Answer 4

Due to my decision not to utilize quasar-cli for integrating Quasar into my application, I had to resort to making global calls to the plugin. The approach I took is similar to what was recommended by @Alex Brohshtut in the comments.

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
})

Setting up Quasar plugins without using Quasar CLI: A step-by-step guide

Answer №1

Answer №2

Similar questions

CSRF validation did not pass. The request has been cancelled. The failure occurred due to either a missing or incorrect CSRF token

Babel continues to encounter issues with async/await syntax, even with all the necessary presets and plugins installed

Create a VueJs component and globally register it with a unique custom style

Is there a way for me to discover the top trending photos on Instagram today?

Utilize Bootstrap tooltips to display live results fetched via an AJAX call

Leveraging webpack2 for code splitting with the CommonsChunkPlugin

Counting the number of PHP inputs in a field

What is the process for implementing pagination in vue-tables-2 with a Laravel REST API?

The VueJS Store concept featuring data access with get and set functions

Prevent certain dates from being selected in a designated input field

Is it possible to inject JavaScript into the DOM after it has been loaded using an AJAX call?

What is the process of directing a data stream into a function that is stored as a constant?

Issue encountered during JSON file extraction (Firefox)

Is there a difference in performance between using multiple inline scripts versus one combined inline script?

Repeatedly animate elements using jQuery loops

Tips for sending an HTML form through Ajax, storing the data in a file, and then showcasing the results in a div

Embedding a thread in an HTML document (Difficult task)

Having trouble understanding how to receive a response from an AJAX request

Having difficulty locating the login button on the webpage

Activate Jquery to display the submenu when clicked and conceal any other open submenus at the same time