N
Nuxt•5mo ago
LeFt_HitD

Using NuxtPage with Suspense

I would like to add a loading spinner while page (or async page) is loading however I checked NuxtPage does not provide a way to provide suspense fallback template, is there alternative way to combine NuxtPage with Suspense fallback template?
3 Replies
kapa.ai
kapa.ai•5mo ago
Hi @LeFt_HitD. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You're correct that the <NuxtPage> component internally uses Vue's <Suspense>, but it does not expose a direct way to provide a custom suspense fallback template for loading states. The fallback for suspense is managed internally by Nuxt, and there is no documented prop or slot on <NuxtPage> to customize this behavior directly. Alternative approaches: 1. Nuxt Loading Indicator:
You can use the built-in <NuxtLoadingIndicator /> component, which displays a progress bar between page navigations. Place it in your app.vue or layout to show a loading state during navigation. You can also customize its appearance and behavior, or control it programmatically using the useLoadingIndicator composable if you need more control over when it appears or disappears.
   <template>
     <NuxtLoadingIndicator />
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
   </template>
   
   <template>
     <NuxtLoadingIndicator />
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
   </template>
Nuxt Loading Indicator docs 2. Manual Loading State:
You can implement your own loading spinner by listening to Nuxt app hooks like page:start and page:finish to toggle a loading state in your component. This allows you to display a custom spinner or overlay while the page (and its async data) is loading. 
   <template>
     <div v-if="loading" class="spinner">Loading...</div>
     <NuxtPage v-else />
   </template>

   <script setup>
   const nuxtApp = useNuxtApp()
   const loading = ref(false)
   nuxtApp.hook('page:start', () => { loading.value = true })
   nuxtApp.hook('page:finish', () => { loading.value = false })
   </script>
   
   <template>
     <div v-if="loading" class="spinner">Loading...</div>
     <NuxtPage v-else />
   </template>

   <script setup>
   const nuxtApp = useNuxtApp()
   const loading = ref(false)
   nuxtApp.hook('page:start', () => { loading.value = true })
   nuxtApp.hook('page:finish', () => { loading.value = false })
   </script>
Example from Stack Overflow 3. Custom Suspense (Not with NuxtPage):
If you need fine-grained control over suspense fallbacks, you can use <Suspense> directly in your own components, but this is not possible with <NuxtPage> itself since it already wraps its content in <Suspense> and does not expose the fallback slot. For page-level loading, the above methods are recommended. Summary:
There is currently no way to provide a custom suspense fallback directly to <NuxtPage>. Use <NuxtLoadingIndicator> or Nuxt app hooks for custom loading spinners during page navigation and async data fetching.
If you need more advanced control, consider upvoting or following related feature requests in the Nuxt repository. NuxtPage API docs ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•5mo ago
<@189715647293423616> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
LeFt_HitD
LeFt_HitDOP•5mo ago
is there a plan by Nuxt team to allow NuxtPage to provide fallback?

Did you find this page helpful?