Suspense doesn't display fallback content and warning is output

[seijikohara]

Version

3.0.2

Reproduction link

https://jsfiddle.net/seijikohara/jmw3rpue/

Steps to reproduce

No fallback content is displayed and warning is output.
The version of Vue is 3.0.2.

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

<router-view v-slot="{ Component }">
  <Suspense>
    <template #default>
      <component :is="Component" />
    </template>
    <template #fallback>
      <span>Loading...</span>
    </template>
  </Suspense>
</router-view>

What is expected?

Show fallback contents until the component of async setup is initialized.

What is actually happening?

No fallback content is displayed and warning is output.

[seijikohara]

ref: vuejs/core#2143 (comment)

[edison1105]

<router-view v-slot="{ Component }">
  <Suspense>
    <template>
	  <template #default>
		<component :is="Component" />
	  </template>
      
	  <template #fallback>
      	<span>Loading...</span>
      </template>
    </template>
    
  </Suspense>
</router-view>

Maybe you should do it like this.

[seijikohara]

@edison1105

<router-view v-slot="{ Component }">
  <Suspense>
    <template>
	  <template #default>
		<component :is="Component" />
	  </template>
      
	  <template #fallback>
      	<span>Loading...</span>
      </template>
    </template>
    
  </Suspense>
</router-view>

Maybe you should do it like this.

Not working.
https://jsfiddle.net/seijikohara/2p34jvyf/7/

[edison1105]

  const Comp = defineComponent({
    render() {
      return h(
        'div',
        {
          class: 'child'
        },
        this.$slots.default({ Component: hello })
      )
    }
  })

I tried to use Comp instead of router-view. it works fine.
maybe its a bug of router-view.

[LinusBorg]

/cc @posva

[seijikohara]

I also tried the case without using router-view and was able to confirm that the fallback content is displayed.
https://jsfiddle.net/gck975e2/

[LinusBorg]

I'll transfer this to the vue-router repo

[cexbrayat]

@seijikohara You may need to add a timeout on your suspense declaration (since changes in Vue 3.0.0-rc.12, see the discussion in vuejs/core#2142).

Something like <Suspense timeout="0"> should work to display the fallback content.

The warning is indeed painful, and is an issue in vue-next @LinusBorg
I wanted to fix it and opened vuejs/core#2337 but I need some help to finish the PR.

[seijikohara]

@cexbrayat

Something like <Suspense timeout="0"> should work to display the fallback content.

I added timeout="0" to Suspense and the fallback was displayed. Thanks.
https://jsfiddle.net/zmpvrxq4/

[risha700]

this works well for me after many tries

    <RouterView name="default" v-slot="{ Component, route }">
      <transition :name="route.meta.transition" mode="out-in" :duration="300" :key="route.path">
        <Suspense >
          <template #default>
            <component :is="Component" :key="route.path"/>
          </template>
          <template #fallback>
            <div>
              Loading...
            </div>
          </template>
        </Suspense>
      </transition>
    </RouterView>

Although it re-mounts with every route request. any cleaner ideas!