additional-hooks.md

Additional Hooks

If you use some Vue plugins like Vue Router, you may want class components to resolve hooks that they provide. In that case, Vue.registerHooks allows you to register such hooks:

// class-component-hooks.js
import { Vue } from 'vue-class-component'

// Register the router hooks with their names
Vue.registerHooks([
  'beforeRouteEnter',
  'beforeRouteLeave',
  'beforeRouteUpdate'
])

After registering the hooks, class component realizes them as class prototype methods:

import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class HelloWorld extends Vue {
  // The class component now treats beforeRouteEnter,
  // beforeRouteUpdate and beforeRouteLeave as Vue Router hooks
  beforeRouteEnter(to, from, next) {
    console.log('beforeRouteEnter')
    next()
  }

  beforeRouteUpdate(to, from, next) {
    console.log('beforeRouteUpdate')
    next()
  }

  beforeRouteLeave(to, from, next) {
    console.log('beforeRouteLeave')
    next()
  }
}

It is recommended to write this registration code in a separated file because you have to register them before any component definitions. You can make sure the execution order by putting import statement for the hooks registration on the top of the main file:

// main.js

// Make sure to register before importing any components
import './class-component-hooks'

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

new Vue({
  el: '#app',
  render: h => h(App)
})