Vue-next: Suspense regression when used with RouterView

[cexbrayat]

Version

3.0.0-rc.12

Reproduction link

https://jsfiddle.net/vmprxysu/

Steps to reproduce

Consider a component like the following:

<Suspense>
  <template #fallback>Loading...</template>
  <router-view />
</Suspense>

with a router config loading an async component

What is expected?

In rc.10, we see the loading indicator and then the async component is displayed

What is actually happening?

In rc.12 nothing is displayed. Is this expected with the recent changes or is it a regression?

[posva]

Probably related to the rendered component being nested. The component is displayed if the v-slot api is used

[cexbrayat]

You mean if we use <hello /> directly instead of <router-view />? If so, yes it does work. But as it was nice to be able to use Suspense around the RouterView to handle the async loading, I thought it was worth opening an issue.

[husayt]

I have the same issue

[yyx990803]

Similar to <transition>, the new Suspense now must be used with <router-view> via its slot-based syntax because it now must have direct access to the toggled root node:

<router-view v-slot="{ Component }">
  <suspense>
    <component :is="Component"/>
  </suspense>
</router-view>

[surmon-china]

Similar to <transition>, the new Suspense now must be used with <router-view> via its slot-based syntax because it now must have direct access to the toggled root node:

<router-view v-slot="{ Component }">
  <suspense>
    <component :is="Component"/>
  </suspense>
</router-view>

[Vue warn]: <Suspense> slots expect a single root node.

[liuweiGL]

Similar to <transition>, the new Suspense now must be used with <router-view> via its slot-based syntax because it now must have direct access to the toggled root node:

<router-view v-slot="{ Component }">
  <suspense>
    <component :is="Component"/>
  </suspense>
</router-view>

[Vue warn]: <Suspense> slots expect a single root node.

Fixed:

  <router-view v-slot="{ Component }">
    <suspense>
      <div>
        <component :is="Component" />
      </div>
    </suspense>
  </router-view>