Modified creation of Vue root app in app.js

  • 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',
      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, {}),
          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.

  • What is Office?


  • Office is javascript API for any Office 365 products. More info can be found here 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

  • 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.


  • 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.

Log in to reply