Nuxt•9mo ago

Loading with LazyComponent

StivenKN · 2025-03-21T22:36:18.099Z

There is a way to use this vue code? Loading....

There is a way to use this vue code?
<Suspense>
<template #default>
<RouterView />
</template>
<template #fallback>
<div>
<h1>Loading....</h1>
</div>
</template>
</Suspense>

kapa.ai•3/21/25, 10:36 PM

Hi @StivenKN. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

kapa.ai•3/21/25, 10:36 PM

----------------------
In Nuxt, you don't need to manually implement the component with as shown in your example, because Nuxt already handles this for you through the component.

The component (which is Nuxt's equivalent of ) already includes under the hood. According to the documentation:

NuxtPage documentation

If you want to show a loading state while your components or pages are loading, you have several options:

Use `<NuxtLoadingIndicator>` for page navigation loading:```vue<template><div> <NuxtLoadingIndicator /> <NuxtPage /></div></template>```
For lazy-loaded components, you can use the `defineAsyncComponent` with a loading component:```vue<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 to make your loading component show up instead of relying on the parent Suspense component's loading state Stack Overflow Post.

For data fetching, you can handle loading states manually with :
```vue
<script setup>
const { status, data } = useLazyFetch('/api/data')
</script>

kapa.ai•3/21/25, 10:36 PM

<template>
<div v-if="status === 'pending'">
Loading...
</div>
<div v-else>
{{ data }}
</div>
</template>

vue
<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

----------------------

kapa.ai•3/21/25, 10:36 PM

@743143557728174181 Kapa.ai is still learning and improving, please let me know how I did by reacting below.