Initialization logic before preparing Vue.js Frontend

Question

We are currently implementing a hybrid web application running inside of a webview and decided to use an architecture based on the vue-cli webpack template and vuex.

The container app offers us several APIs (exported to the window object) we have to call during startup in order to prepare our frontend. In addition we have to perform up to two xhr while initializing our application.

Our plan is to run this init logic inside the main.js. Since our APIs are promise-based we will create the Vue instance after all promises are resolved. Does this sounds like a good approach or do you have any suggestions of a better technique?

Why would you wait with creating the Vue instance? You can create the instance and start your calls from a mounted or created lifecycle perfectly fine. Why not simply wait for whatever you need from your Vue instance? Is there specific reasoning behind your decision? — Stephan-v
– Stephan-v, Commented Nov 7, 2017 at 12:06
@Stephan-v Your idea sounds great and we thought about something similar, but we need to overwrite the console as early as possible to ensure our integrated logpanel collects all logs, etc. The overwriting itself depends on several api results. If we initialize vue.js at first and an error occured, we wouldn't be able to print it to our logpanel. As far as I know the created and mounted lifecycles are not blocking, i.e. if you have any kind of async operations you need to set a flag when all promises are resolved and use an if-binding to render the actual content. How would you solve this? — jimmy
– jimmy, Commented Nov 7, 2017 at 12:44

score 4 · Accepted Answer · 2017-11-07 19:02:22Z

4

After your comment i got the point. But you can still integrate your "prevue" and "postvue" steps in single module:

// External function in module
function initializeApp (vueCreated) {
  return new Promise((resolve, reject) => {
    switch (vueCreated) {
      case false: // "prevue" initialization steps
        console.log('vue not yet created, prevue steps happens')
        // ...
        setTimeout(_ => resolve(), 3500) // async call
        break;
      case true: // we can continue/prepare data for Vue
        console.log('vue created, but waiting for next initialization steps and data')
        // ...
        setTimeout(_ => resolve('Mounted / shown when app ready'), 3500) // async call
      }
  })
}

initializeApp(false).then(_ => {
  new Vue({
    template: '#app',
    data: {
      content: null
    },
    async created () {
      this.content = await initializeApp(true)
      this.$mount('#app')
      console.log('all inicialization steps done, data arrived, vue mounted')
    }
  })
})

.fade-enter { opacity: 0; transform: translateY(30px) }
.fade-enter-active { transition: all .4s }

<template id="app">
  <transition name="fade" appear>
    <p>{{ content }}</p>
  </transition>
</template>

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>

edited Nov 7, 2017 at 19:02

answered Nov 7, 2017 at 12:18

user6748331

Sign up to request clarification or add additional context in comments.

2 Comments

jimmy Over a year ago

Thanks a lot! At least for my xhr this would be a much cleaner solution. So maybe we would call the container api at first to decide wether to overwrite the console or not and then initialize vue and perform the xhr the way you suggested.

user6748331 Over a year ago

@jimmy Exactly... In initializationApp() modul just do anything, and let Vue instance waits for resolve(). Optionally, you can resolve() with data needed from initialization, optionally you catch reject() in Vue and let them destroy itself this.$destroy, etc. And this will be still pretty declarative / readable approach with crystal clear entry point.

Collectives™ on Stack Overflow

Initialization logic before preparing Vue.js Frontend

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related