nuxt/nuxt

support `#fallback` slot for lazy Nuxt components

Open

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

在 GitHub 查看
 (2 留言) (5 反應) (0 負責人)TypeScript (60,221 star) (5,607 fork)batch import
good first issue🍰 p2-nice-to-have

描述

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

貢獻者指南