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

clientEntry.js

const store = createStore()

// data populated from server
store.replaceState(window.__INITIAL_STATE__)
const router = createRouter()

const routerReady = new Promise(resolve => {
  router.onReady(resolve)
}).then(() => {
  // onReady hook
  
  // request all the inital route's lazy data without blocking rendering
  router.getMatchedComponents(router.currentRoute).forEach(component => {
    // allow hook to be optional
    if (component.lazyData) {
      component.lazyData(store, router.currentRoute, {})
    }
  })

  // subcribe to the beforeResolve hook to 
  // request permissions for subsequent navigation
  router.beforeResolve((to, from, next) => {
    const matched = router.getMatchedComponents(to)
    const permissionPromises = matched.map(component => {
      // allow hook to be optional
      if (component.permissions) {
        return component.permissions(store, to, from)
      }
      return Promise.resolve()
    })

    Promise.all(permissionPromises)
      .then(() => {
        next()
      })
      .catch(err => {
        console.log(err)
        next(err)
      })
  })
   
  // subcribe to the afterEach hook to 
  // request critical data and lazy data for subsequent navigation
  router.afterEach((to, from) => {
    const matched = router.getMatchedComponents(to)

    matched.forEach(component => {
      // allow hook to be optional
      if (component.criticalData) {
        component.criticalData(store, to, from)
      }
    })

    matched.forEach(component => {
      // allow hook to be optional 
      if (component.lazyData) {
        component.lazyData(store, to, from)
      }
    })
  })
})

const app = createApp(store, router)
routerReady.then(() => {
  app.$mount('#app')
})