No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Modified creation of Vue root app in app.js

    Framework
    3
    5
    208
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • J
      jan.vaca92 last edited by

      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.

      1 Reply Last reply Reply Quote 0
      • s.molinari
        s.molinari last edited by

        What is Office?

        Scott

        1 Reply Last reply Reply Quote 0
        • J
          jan.vaca92 last edited by

          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

          1 Reply Last reply Reply Quote 0
          • s.molinari
            s.molinari last edited by

            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

            1 Reply Last reply Reply Quote 0
            • peter.krebs
              peter.krebs last edited by

              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.

              1 Reply Last reply Reply Quote 0
              • First post
                Last post