router: Suspense doesn't display fallback content and warning is output
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.
About this issue
- Original URL
- State: closed
- Created 4 years ago
- Comments: 15 (5 by maintainers)
@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 https://github.com/vuejs/vue-next/issues/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 https://github.com/vuejs/vue-next/pull/2337 but I need some help to finish the PR.
@cexbrayat
I added
timeout="0"
toSuspense
and the fallback was displayed. Thanks. https://jsfiddle.net/zmpvrxq4/Add this works for me.
I fixed this issue with the wrapping of the
<Component />
in<div>
and it’s work for me.this works well for me after many tries
Although it re-mounts with every route request. any cleaner ideas!
The best way to use RouterView, Suspense, Transition and KeepAlive together is as mentioned on the Vue Docs site under the Suspense Component page
I could fixed the problem by implementing
<Suspense timeout="0">
and by importing{ defineAsyncComponent }
fromvue
in therouter.js
fileAnd in the
App.vue
file:And it works like charm ✨
The only drawback of this solution is that you get the following warning message prompted in the console:
Does someone know how to prevent this warning message from being prompted?
Thanks 🙂