How to use vue3 suspense with dynamically loaded components inside <keep-alive />?

Question

I am trying to use Suspense component to show the loading state of dynamic components in my app. But here I come across the scenario where both keep-alive and Suspense require on single root node.

              <keep-alive>
                <Suspense>
                  <component
                    ref="stepForm"
                    :id="currentTabComponent.id"
                    :key="currentTabComponent.id"
                    :is="currentTabComponent.value"
                    @success="handleSuccess"
                  ></component>
                  <template #fallback>
                    Loading...
                    <img src="@/assets/images/auth-decoration.png" />
                  </template>
                </Suspense>
              </keep-alive>

However in the below code even if have only one root node inside of Suspense. It gives me this error. [Vue warn]: <Suspense> slots expect a single root node.

I am doing exactly as said in the vue docs. Is there any thing that I am missing? I am using Nuxt 3.2.3

Answer 1

I found the issue. I was stupid not enough to figure out I was using two html elements node inside of <template #fallback>. Updated my code and boom the suspense works like charm.

          <keep-alive>
            <Suspense>
              <component
                ref="stepForm"
                :id="currentTabComponent.id"
                :key="currentTabComponent.id"
                :is="currentTabComponent.value"
                @success="handleSuccess"
              ></component>
              <template #fallback>
                // Only one root node here
                <img src="@/assets/images/auth-decoration.png" />
              </template>
            </Suspense>
          </keep-alive>