Vue on ready or on mounted event of entire app with all components

Question

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

I am loading a dialog script that checks certain links on the page and add's a dialog event to them.... but the problem is that it runs too early, when the page is loaded. Using jQuery's .ready() function. But at that point not all the components are mounted yet... and some Vue component links are not getting the dialog link events attached.

Something like this I would like to be able to do:

$( 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.

The App mounted()/onMounted() Hooks will be run when all the components are mounted.

See the playground below.

The App Hooks are being ran at the end.

Check the Vue Docs on 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>