[Vuejs]-How to force vue to wait for async <script> to run before mounting components

by

1👍

According to this issue in Github https://github.com/vuejs/vue/issues/7209 it seems that the async hooks in Vue lifecycle mounted() created() etc, is only for the ability to call async functions. but the lifecycle itself is synchronous.

Here are some ideas to manage this problem:

  1. You can wrap your component with v-if and render it just as soon as your data is ready.

  2. If you render a component by router – you can use the lifecycle of Vue router. and call your async function before enter to Vue page. do it like this:

    export default {
   beforeRouteEnter (to, from, next) {
       // called before the route that renders this component is confirmed.
       next()
   }
}

this next() function calls the first Vue lifecycle hook…

full tutorial: https://router.vuejs.org/guide/advanced/navigation-guards.html#in-component-guards

-1👍

If anyone is interested, here is how I solved my problem:

I modified the js file that the <script> was referencing to set global.initComplete=false initially, and when the script was complete, I marked it as true.

For main.js file, I used:

import Vue from 'vue'
import App from './App.vue'

function init() {
    let vm = await new Vue({
        render: h => h(App),
    })
    if(!global.initComplete) {
        setTimeout(init, 50)
    } else {
        vm.$mount('#app')
    }
}
init()

Leave a comment