An example of using custom route hooks in vue universal web application's server entrypoint.

serverEntrypoint.js

export default context => {
  const store = createStore()
  const router = createRouter()
  const app = createApp(store, router)
  
  return new Promise((resolve, reject) => {
    router.onReady(resolve, reject)
    router.push(context.url)
  }).then(() => {
    // onReady hook
    const to = router.currentRoute
    const components = router.getMatchedComponents(to)
    
    // invoke the components' permissions hooks
    const permissionsPromises = components.map(component => {
      // allow hook to be optional
      if (component.permissions) {
        return component.permissions(store, to, {})
      }
      return Promise.resolve()
    })
    
    // Once user demonstrates they have all the permissions
    // Let's start to request the critical data
    return Promise.all(permissionsPromises)
      .then(() => {
        const criticalDataPromises = components.map(component => {
          // allow hook to be optional
          if (component.criticalData) {
            return component.criticalData(store, to, {})
          }
          return Promise.resolve()
        })
        return Promise.all(criticalDataPromises)
      })
      .then(() => {
        // Must wait for critical data during server request lifecycle
        context.state = store.state
        return app
      })
  })
}