Support for multiple route-views inside a transition/keep-alive

[pearofducks]

What problem does this feature solve?

The following is not possible if the my-modal component has transitions.

<my-modal>
  <template #default>
    <router-view>
  </template>
  <template #footer>
    <router-view name="footer">
  </template>
</my-modal>

If there's no footer slot, we can of course use the pattern suggested in the Vue Router docs and use router-view's slot props:

<router-view #default="{ Component }">
  <my-modal>
    <template #default>
      <component :is="Component" />
    </template>
  </my-modal>
</router-view>

But then there's no (apparent) way to solve this usecase for the footer slot.

What does the proposed API look like?

Whatever is most practical.

Provide all named views on the main router-view:

<router-view #default="{ Component, Components }">
  <component :is="Component" />
  <component :is="Components.Footer" />
</router-view>

Or enable nested router-views to work with named routes? (This is the solution the Vue Discord chat thought was working today for this problem)

[posva]

Do you have a boiled down snippet of what you are trying to achieve? It would help understanding

[pearofducks]

Sure!

Effectively what's in the first snippet in my original post.

<my-modal>
  <template #default>
    <router-view>
  </template>
  <template #footer>
    <router-view name="footer">
  </template>
</my-modal>

However, since my-modal uses transitions [0], we instead have to do the following. The default content works fine, but then there's no way to get content from the route-view footer to the footer slot in MyModal.

<router-view #default="{ Component }">
  <my-modal>
    <template #default>
      <component :is="Component" />
    </template>
    <template #footer>
       <!-- how do we get the router-view below to work here? -->
       <router-view name="footer">
    </template
  </my-modal>
</router-view>

---

[0] - MyModal looks something like

<transition>
  <div>
      <slot />
  </div>
  <div>
      <slot name="footer" />
  </div>
</transition>

[posva]

Ah I see now! Yeah that Components variable might be the easiest way

[posva]

After taking a look, this is currently not possible because one RouterView only renders itself and to be able to provide a Components property on the slot, we would have to render all views. So this would require activation through a prop but that simply doesn't sound right.

If your modal looks like

<transition>
  <div>
      <slot />
  </div>
  <div>
      <slot name="footer" />
  </div>
</transition>

Then it doesn't matter how you pass the views as they aren't wrapped by the transition anyway.

Or enable nested router-views to work with named routes? (This is the solution the Vue Discord chat thought was working today for this problem)

That would break the existing usage of nested named views.

Let's give this more thinking. In any case, it definitely requires going through an RFC.

[baybal]

I'm using fragment pages a lot. Now you can mount Vue on body element. There is no need for containers.

[pearofducks]

@baybal - do you have an example of what you're referring to? I'm not sure how any of that relates to this issue.

[baybal]

It just hit me it is not related

[brendomaciel]

I believe I'm trying to achieve something similar for layouts. My ideia was to use named views to pass both view and layout in the route and then render it on the same place, like:

// routes.js
{
    path: 'sign-in',
    components: {
        default: SignInView,
        layout: AuthLayout,
    },
}

Then, in the root component:

<template>
    <RouterView v-slot="{ Component }" name="layout">
        <component :is="Component">
            <RouterView />
        </component>
    </RouterView>
</template>

But unfortunately the inner <RouterView /> don't render, only the outer one.

Live example.