Vue on ready or installed events for the entire application and all its components

Question

I was wondering if there is a way to check if the enitre Vue app is installed?

I'm loading a dialog script that checks certain links on the page and adds a dialog event to them... but the problem is that it runs too early when the page loads. Use jQuery's .ready() function. But not all components are installed at this point... and some Vue component links don't have dialog link events attached.

I want to be able to do something like this:

$( document ).ready( function () {
    const app = createApp();
    app.component( 'section-header', SectionHeader );
    // more components etc...

    const mountedApp = app.mount( '#app' );

    if (mountedApp.ready()) {
        // now load my custom non-vue dialog script so we are sure the DOM AND the all components are mounted.
        let CsDialog = require( './vendor/cs-dialog.min' );
        dialog = new CsDialog();
        dialog.bindEvents();
    }
});

Answer 1

You don't need jQuery at all.

Application mounted()/onMounted() The hook will run after all components have been mounted.

See playground below.

Application hooks run at the end.

See more about Lifecycle Hooks and onMounted()

const { createApp, onMounted } = Vue
 
const Comp = {
  props: ['num'],
  setup(props) {
    onMounted(() => { console.log(`Comp[${props.num}]: onMounted(): from setup()`)} );
  },
  mounted() {
    console.log(`Comp[${this.num}]:  mounted(): from Options API`)
  }
} 
 
const App = {
  components: {
    Comp
  },
  setup() {
    onMounted(() => { console.log("onMounted(): from setup()")} );
  },
  mounted() {
    console.log("mounted(): from Options API")
  }
}

const app = createApp(App)
app.mount('#app')

#app { line-height: 1.75; }
[v-cloak] { display: none; }

<div id="app" v-cloak>
<comp v-for="n in 100" :key="n" :num="n"></comp>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>