如何正确地在Nuxt.js中使用Suspense

Question

我想在从API获取或加载数据时，使用Skeleton代替轮播图的数据。为此，我正在尝试在我的Nuxtjs3页面中使用suspense。

但是我无法使其正常工作。

在下面的设置中，即使promise得到解决，也不会加载任何内容替换轮播图。如果我删除suspense，则可以正常工作。

这是我到目前为止所做的。

    <template>
        <div class="ttc-py-1 sm:ttc-py-5">
          <div class="ttc-container ttc-mx-auto">
            <SectionHeader :heading="`Activities near you`" />
            <client-only>
              <Carousel
                :items-to-show="3.5"
                :wrap-around="true"
                :breakpoints="breakpoints"
              >

                <Suspense>

                  <Slide
                    v-for="(item, index) in preferredTours"
                    :key="index"
                  >
                    <CardsActivityCard
                      :city="item.city"
                      :country="item.country"
                      :image="`${item.image}`"
                      :packagename="item.package_name"
                      :price="item.price"
                      :uniqueid="item.uniqueId"
                      :slug="item.slug"
                    />
                  </Slide>

                  <template #fallback>
                    <Slide v-for="i in 5" :key="i">
                      <div>loading ...... or Skeltons</div>
                    </Slide>
                  </template>

                </Suspense>

              </Carousel>
            </client-only>
          </div>
        </div>
    </template>
    
    
    <script setup>

    import { ref } from "vue";
    const { apiUrl } = useRuntimeConfig();
    import { Carousel, Slide, Pagination, Navigation } from "vue3-carousel";
    import "vue3-carousel/dist/carousel.css";
    
    const [{ data: FavDests }, { data: preferredTours }] = await Promise.all([
      useFetch(`${apiUrl}/dests/getpopulardests?country=${userCountry}`, 
       { key: "cQsyfYspDP2zM1xMe0YY9Gfv4CgQByAd" }
      ),
      useFetch(
        `${apiUrl}/tours/getpopulartours?country=${userCountry}&usercurrency=${userCurrency}`,
        { key: "Z1rvmHPxAOLvt68WZZq2BUNsHQ8I213Y" }
      ),
    ]);

   </script>

- imthegrv

Answer 1

如果您需要ClientOnly，您还应该指定一个相应的占位符：

    <ClientOnly>
      <Suspense>
        <MyFancyComponent />
        <template #fallback>
            <LoadingScreen />
        </template>
      </Suspense>
      <template #placeholder>
        <LoadingScreen />
      </template>
    </ClientOnly>

- crunchwrap