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',
      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.



  • What is Office?

    Scott



  • 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



  • 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



  • 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