CODEWITHSUNDEEP
javascriptvue.js
jimmy
jimmy

Reputation: 445

Initialization logic before preparing Vue.js Frontend

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?

Upvotes: 2

Views: 3152

Answers (1)

user6748331
user6748331

Reputation:

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>

Upvotes: 4

Related Questions