Vue.js Component Hooks as Events

Published on June 25, 2018

Alex Jover Morales

Vue.js Component Hooks as Events

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Hi Vue developer! Surely you’ve already used lifecycle hooks in Vue in order to perform different actions when the component is created, mounted or destroyed. You’ve also probably used custom events for communication between a component and its parent.

But… did you know that Vue’s lifecycle hooks emit their own custom events? Yeah, that’s something Damian Dulisz showed with this tweet and it was enlightening.

You might be thinking… Why should I care, Alex? Well, it’s a good to know trick that can be useful in some cases. I’m going to show you a couple of them in this article.

Listening to Children Hooks

Vue’s lifecycle hooks emit custom events with the name of the hook itself, prefixed by hook:. For example, the mounted hook will emit a hook:mounted event.

You can therefore listen to children hooks from the parent components, just as you would do with any custom event:

  <Child @hook:mounted="childMounted"/>

import Child from "./Child";

export default {
  components: { Child },
  methods: {
    childMounted() {
      console.log("Child was mounted");

That can be useful as well to react to third-party plugins hooks. For instance, if you want to perform an action when v-runtime-template finishes rendering the template, you could use the @hook:updated event:

  <v-runtime-template @hook:updated="doSomething" :template="template"/>

Seems like magic, ha? Probably you’ve already come across these cases and you created a hook on the child just to let the parent know that the hook was called. Well now you know it’s not necessary.

Registering Hooks Dynamically

Although uncommon, there could be some occasions when you’d need to register a hook dynamically the same way you can create custom events dynamically. You can do that by using the $on, $once and $off hooks.

Take the following example, taken from Damian’s tweet, creating a beforeDestroy hook dynamically due to the fact that is creating a wrapper Vue component for Pickaday: a plain JavaScript date-picker library.

Since the plugin must be created on the mounted hook and it’s not saving the instance in a reactive state variable, the only way to do something with it is by registering the beforeDestroyed hook right after creating the Pickaday instance:

export default {
  mounted() {
    const picker = new Pickaday({
      // ...

    this.$once("hook:beforeDestroy", () => {

Wrapping Up

You’ve seen the trick of using the hook: events to react to the hook calls without the need to emit any event manually.

You can see the code and a demo of this article in this Codesandbox.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us

About the authors
Default avatar
Alex Jover Morales


Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

nice feature

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel