Thanks for reporting this! After some investigation, it actually looks like the syntax is only partially supported by Vue Router. The async component will load and be used, but the rest of the advanced options have no effect. You can use this strategy to work around the issue in the meantime, but I think the final solution will be to add more detail to Vue Router's doc on advanced async components, then update this page with a link to those details.

Thanks for reporting this! After some investigation, it actually looks like the syntax is only partially supported by Vue Router. The async component will load and be used, but the rest of the advanced options have no effect. You can use this strategy to work around the issue in the meantime, but I think the final solution will be to add more detail to Vue Router's doc on advanced async components, then update this page with a link to those details.

This solution cause to disable any navigation guards like beforeRouteEnter in loaded component

I have another solution. This requires Pinia, or at least something global:

const hookLoad = (loader: () => Promise<typeof import('*.vue')>) => {
  return async () => {
    console.log('Before loading')
    // This is a Pinia store
    useApplication().loadingComponent = true
    const component = await loader()
    console.log('After')
    useApplication().loadingComponent = false
    return component
  }
}

const routes = [
  {
    path: '/conf',
    component: hookLoad(() => import(/* webpackChunkName: "conf" */ '../views/Configuration.vue')),
    meta: {
      auth: true
    }
  }
]

Everything is working: navigation guards and webpack chunk splitting.

Of course, the "magic" relies in useApplication().loadingComponent = true, which is a Pinia store. Then, anywhere in your application, use that state to do… whatever you like. Show a loader, a modal dialog, etc.