Cannot insert (named) slots - nested routerviews

[thebrownfox]

Version

4.0.0-beta.6

Reproduction link

https://codepen.io/thefoxie/pen/zYqBLbZ

Steps to reproduce

App.vue

<router-view name="layout">
    <router-view class="fullscreen-layout"></router-view>
</router-view>

Layout.vue

<template>
    <div>Layout</div>
    <slot></slot>
</template>

What is expected?

Get nested router view inside another component dynamically based on route. This has worked before in vue 2. The idea is to get right layout (based on route or another settings from router.js) and put another router-view with the rest of the app inside. Again, this used to work.

What is actually happening?

Everything in the first router-view (layout.vue) gets overwritten (but if there is only second router-view inside the named template, nothing is rendered...only when I add another element/text that would be there) and when I use named slot, then nothing in the named slot is rendered. I know it sounds confusing, it's hard to describe.

---

Doesn't work even when the slots are named. Not sure if it's not @vue/compiler-sfc issue.

vue2 codepen: https://codepen.io/thefoxie/pen/qBZNyLV

vue3 codepen: https://codepen.io/thefoxie/pen/zYqBLbZ

[posva]

This was never intended to work. You should replace the slot in layout.vue with the router view component

[thebrownfox]

@posva as I remember, this wasn't working because it couldn't dynamically load the inner router-view. Only the first one is fully loaded and it kinda makes sense.

[posva]

Ah I see, I couldn't test the vue 2 repro but I thought it was working because you added it 😆

[thebrownfox]

Yeah. I wanted to load layout dynamically via router (is this called appshell?) and load the content via router as well. This worked in vue2 through slot. Niche use case, but it worked. Not sure if it was meant to work or it was working by accident.

Vue2 router-view in slot: https://codepen.io/thefoxie/pen/qBZNyLV (this works)
Vue2 router-view in component: https://codepen.io/thefoxie/pen/BaKzqqJ

Vue3 router-view in slot: https://codepen.io/thefoxie/pen/zYqBLbZ
Vue3 router-view in component: https://codepen.io/thefoxie/pen/dyMXgQX

[thebrownfox]

@posva as you see it works in vue2 and I think this is the only way of doing it on router level. The other option that I can think of is to use <component :is=""> in App.vue and dynamically load layout components (router can be accessed here as well, there is beforeRender if I recall correctly). However, I liked the idea of complete control from router instance with nested router-views. The reason for slots is that it has to be in the same component, because it won't get loaded other way when loaded dynamically from child component (see the other vue2 example that doesn't work). I'm not sure if it's not working because of vue-router or @vue/compiler-sfc (makes sense I guess). I just wanted to bring attention to this and get more info from someone who is behind the package.

[posva]

Named views require multiple router view components at the same level: https://router.vuejs.org/guide/essentials/named-views.html

The nesting using a slot is not supported

[thebrownfox]

@posva so it worked by accident?

[posva]

Yes