Async code in App Plugins

  • hello,

    so I’m in the process of migrating from 14.1 to 15.8 and trying to move some initialization code over to ‘App Plugins’. I’m using vue-apollo and previously I was adapting ‘main.js’ in order to first setup and then pass the ‘ApolloProvider’ object to Vue.
    I’m trying to move this code to a separate plugin now. However, I doubt this actually makes sense, since I’m executing some ajax calls during setup of Apollo and ‘App plugins’ seem not to take this possibility into account. They do not expect a promise, but rather simply execute the exported default function. So my only possibility would be to make this function block and wait for reponses (or timeout). But maybe I just miss something.
    How should we deal with async code in ‘App plugins’?


  • If you really need async calls to initialize your plugin you should look at the boot plugin :

    This is a special plugin that let’s you launch the app when your are ready, after recieving the ajax callback in your case.

  • hi Slade,

    thanks I will try. Async code during initialization, is it that uncommon?


  • I don’t have enough Vue or Quasar experience to say if it is right or wong to do that. I even did it using the boot plugin at first, but it felt dirty. So i changed my code and used the vuex store on the beforeMount event of my app.

  • I have just found this thread. I’m new to quasar and I was need ajax call to validate token found in localStorage. I failed to do it with regular plugin and I searched for solution. @Slade suggestion to add it to “boot” plugin works really good. Is there something that I’m missing or doing wrong with this approach?

  • @zmilan just make sure you read the corresponding docs. The boot plugin is special

  • @benoitranque yes I read it and I understand that part. My code works exactly like I expected, but what I’m asking is there some “hidden” things that I don’t see at the moment about this usage.
    Here is complete boot plugin code:
    import api from ‘src/api’

    // leave the export, even if you don’t use it
    export default ({ app, store, Vue }) => {
    let tokenKey = api.getTokenKey()
    let token = localStorage.getItem(tokenKey)
    // assign api to Vue for easier access, like this.$api
    Vue.prototype.$api = api

    if (!token || token === ‘undefined’) {
    /* eslint-disable-next-line no-new */
    new Vue(app)

    .then(() => {
    store.commit(‘apiAuth/changeIsGuest’, { status: false }, { root: true })
    store.commit(‘apiAuth/changeToken’, { token: token, store: false }, { root: true })
    .catch(() => {
    // we wish to remove token so we don’t need to check it again on page refresh
    .finally(() => {
    /* eslint-disable-next-line no-new */
    new Vue(app)

    Thanks in advance for any suggestion 🙂

Log in to reply