Named Views with vue-router possible?

[jawa-the-hutt]

Is there a way to achieve what's shown here in the Vue Router docs where you essentially end up with a route config that has something like this:

{
  path: '/settings',
  // You could also have named views at the top
  component: UserSettings,
  children: [{
    path: 'emails',
    component: UserEmailsSubscriptions
  }, {
    path: 'profile',
    components: {
      default: UserProfile,
      helper: UserProfilePreview
    }
  }]
}

I'm most interested in the page being loaded into the named view as I have a Tab component in a parent route that I'd like to use to change what's contained in the router-view via the tab header. Right now, all that happens as far as I can tell is that the page is going into the default router-view.

[ranseur92]

There is a way to achieve this, but it's not "pretty".

Register both components globally, and you can pass a components object to the route block.

<route>
{
  components: {
    sidebar: { template: '<accounts-filter />' },
    default: { template: '<accounts />' }
  },
  meta: {
    layout: 'sidebar'
  }
}
</route>

My sidebar layout:

<template>
  <div class="container mx-auto px-4 pt-4 dark:text-light text-dark">
    <Header />
    <div class="flex">
      <RouterView name="sidebar" />
      <RouterView />
    </div>
  </div>
</template>

<script lang="ts" setup>
import Header from "@/components/Header.vue";
</script>