nuxt/nuxt

support `#fallback` slot for lazy Nuxt components

開放

#30,264 建立於 2024年12月15日

 (2 則留言) (5 個反應) (0 位負責人)TypeScript (5,607 個分叉)batch import
good first issue🍰 p2-nice-to-have

倉庫指標

星標
 (60,221 顆星)
PR 合併指標
 (平均合併 3天 7小時) (30 天內合併 114 個 PR)

描述

Describe the feature

Nuxt3 supports built in lazy component by adding Lazy prefix into auto imported component, which is great!

But it does not support #fallback slot with which skeleton screen will be shown while loading lazy component, and this will impact to user experience. In Vue3 suspense experimental component, it supports as below

const Chat = defineAsyncComponent(() => import('/Chat.vue'))

<Suspense>
   <Chat />
   <template #fallback>
       loading....
   </template>
</Suspense>

Is it possible Nuxt built in lazy component to support #fallback slot similar to vue3 Suspense? or else is there any way to show skeleton screen already? or am I wrong to approach problem?

Due to this issue, we went with Suspense experimental solution, but will be happy to replace with Nuxt built lazy load once it supports #fallback slot.

Thanks

Additional information

  • Would you be willing to help implement this feature?
  • Could this feature be implemented as a module?

Final checks

貢獻者指南