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.