Modified creation of Vue root app in app.js

[jan.vaca92]

Hello everyone,

I try to find way how could reach to be able modified/wrap creation of Vue root app in app.js. The code which is generated by Quasar automatically is look like this

const app = {
  el: '#q-app',
  router,
  store,
  render: h => h(App)
}

My case what I tried to do is wrap this kind code in my solution which look like this

Office.onReady(function () {

    var app = new Vue({
      el: "#q-app",
      render: h => h(App, {}),
      router,
      i18n: i18n,
      store: store
      // comments: { root }  
    })
})

I read the docs that if developer want modified or init something before the app starts then the boot files should be used, but I am not sure if this solution can be reached by the boot file.

I would appreciate any suggestions.
Thank you so much in advance.

[s.molinari]

What is Office?

Scott

[jan.vaca92]

Office is javascript API for any Office 365 products. More info can be found here https://docs.microsoft.com/en-us/office/dev/add-ins/develop/understanding-the-javascript-api-for-office#initialize-with-officeonready and function OnReady means when the API is successfully loaded by any Office 365 clients then this function is called.
And on this event I would like tell quasar do create Vue root app and render it. If my explanation is not enough do not hesitate to ask me more questions and I would try to explain in more details.

Thanks you
Jan Vaca

[s.molinari]

You might be better off (easier to work into the add-in) using Quasar as a Vue plug-in. It’s the components you want and that’s the easiest way to get them.

https://quasar.dev/start/vue-cli-plugin

Scott

[peter.krebs]

This might not work with Office specifically, but a boot file can wait asynchronously:

export default async ({ Vue }) => {
  await Office.onReady(function () {
    // ...
  });
};

Notice the async and await. Add that boot file first thing in the boot array in quasar.conf.js.

I’ve used this pattern to wait fetching a configuration file before my app initializes Vue.