How to hook lifecycle events from root App component in Vue.js

Question

The structure of the app:

src/
|-- App.vue
|-- components/
    |-- MyComponent.vue
    |-- OtherComponent.vue

If I do, in MyComponent.vue

// MyComponent.vue

export default {
  name: 'MyComponent',
  methods: {
    mounted() {
      alert('MyComponent mounted')
    }
  }
}

This works as expected — an alert box is triggered when the component is mounted.

However, if I do the exact same thing in App.vue:

// App.vue

import MyComponent from './components/MyComponent.vue'
import OtherComponent from './components/OtherComponent.vue'

export default {
  name: 'app',
  components: {
    MyComponent,
    OtherComponent
  },
  methods: {
    mounted() {
      alert('app mounted')
    }
  }
}

Then nothing happens. I've tried with created, mounted, I've also try to wrap the alert() call into this.$nextTick({ ... }) — no success.

My problem is: I want something to happen (in this example, alert('app mounted')) once the child components have been mounted, because this "thing" needs to have all components mounted before executing.

Is it possible to hook a lifecycle event (ideally, mounted) in the App component?

Answer 1

All lifecycle methods need not to be declared within methods.

Should be as below.

// App.vue

import MyComponent from './components/MyComponent.vue'
import OtherComponent from './components/OtherComponent.vue'

export default {
  name: 'app',
  components: {
    MyComponent,
    OtherComponent
  },
   mounted() {
      alert('app mounted')
  },
  methods: {
  }
}

For more details read here