N
Nuxt•2mo ago
StivenKN

Loading with LazyComponent

There is a way to use this vue code? <Suspense> <template #default> <RouterView /> </template> <template #fallback> <div> <h1>Loading....</h1> </div> </template> </Suspense>
2 Replies
kapa.ai
kapa.ai•2mo ago
Hi @StivenKN. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- In Nuxt, you don't need to manually implement the <Suspense> component with <RouterView> as shown in your example, because Nuxt already handles this for you through the <NuxtPage> component. The <NuxtPage> component (which is Nuxt's equivalent of <RouterView>) already includes <Suspense> under the hood. According to the documentation: 
<NuxtPage> includes the following components:

<template>
  <RouterView #default="{ Component }">
    <!-- Optional, when using transitions -->
    <Transition>
      <!-- Optional, when using keep-alive -->
      <KeepAlive>
        <Suspense>
          <component :is="Component" />
        </Suspense>
      </KeepAlive>
    </Transition>
  </RouterView>
</template>
<NuxtPage> includes the following components:

<template>
  <RouterView #default="{ Component }">
    <!-- Optional, when using transitions -->
    <Transition>
      <!-- Optional, when using keep-alive -->
      <KeepAlive>
        <Suspense>
          <component :is="Component" />
        </Suspense>
      </KeepAlive>
    </Transition>
  </RouterView>
</template>
NuxtPage documentation If you want to show a loading state while your components or pages are loading, you have several options: 1. Use <NuxtLoadingIndicator> for page navigation loading: 
<template>
  <div>
    <NuxtLoadingIndicator />
    <NuxtPage />
  </div>
</template>
<template>
  <div>
    <NuxtLoadingIndicator />
    <NuxtPage />
  </div>
</template>
2. For lazy-loaded components, you can use the defineAsyncComponent with a loading component: 
<script setup>
const AsyncComponent = defineAsyncComponent({
  loader: () => import('./components/MyComponent.vue'),
  loadingComponent: LoadingComponent,
  suspensible: false // Important to use your own loading component
})
</script>
<script setup>
const AsyncComponent = defineAsyncComponent({
  loader: () => import('./components/MyComponent.vue'),
  loadingComponent: LoadingComponent,
  suspensible: false // Important to use your own loading component
})
</script>
As noted in a Stack Overflow post, you need to add suspensible: false to make your loading component show up instead of relying on the parent Suspense component's loading state Stack Overflow Post. 3. For data fetching, you can handle loading states manually with useLazyFetch: 
<script setup>
const { status, data } = useLazyFetch('/api/data')
</script>
<template>
  <div v-if="status === 'pending'">
    Loading...
  </div>
  <div v-else>
    {{ data }}
  </div>
</template>
<script setup>
const { status, data } = useLazyFetch('/api/data')
</script>
<template>
  <div v-if="status === 'pending'">
    Loading...
  </div>
  <div v-else>
    {{ data }}
  </div>
</template>
4. You can also use the experimental <NuxtClientFallback> component to handle SSR errors and provide fallback content: 
<NuxtClientFallback>
  <MyComponent />
  <template #fallback>
    <div>Loading...</div>
  </template>
</NuxtClientFallback>
<NuxtClientFallback>
  <MyComponent />
  <template #fallback>
    <div>Loading...</div>
  </template>
</NuxtClientFallback>
NuxtClientFallback documentation These approaches are more aligned with Nuxt's architecture than manually implementing Suspense with RouterView. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@743143557728174181> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?