N
Nuxt•2mo ago
Adnan Erlansyah

How to make loading effect in layout

Create a loading effect in layout from NuxtJS 3.
2 Replies
kapa.ai
kapa.ai•2mo ago
Hi @Adnan Erlansyah. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To create a loading effect in a layout in Nuxt 3, you can use the built-in <NuxtLoadingIndicator /> component. This component displays a progress bar between page navigations and can be added directly to your app.vue or any layout file. Here’s how you can do it: Example in app.vue or a layout file: 
<template>
  <NuxtLoadingIndicator />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
<template>
  <NuxtLoadingIndicator />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
You can customize the loading indicator using its props, such as color, height, duration, and more. For advanced control, you can use the useLoadingIndicator composable to manually start or finish the loading state, or to tie the loading state to custom events (like waiting for images or API calls to finish) Nuxt Loading Indicator Docs. Customizing the loading indicator: 
<template>
  <NuxtLoadingIndicator color="orange" :height="4" :throttle="0" />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
<template>
  <NuxtLoadingIndicator color="orange" :height="4" :throttle="0" />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
If you want to trigger the loading effect manually (for example, when waiting for images or other resources), you can use the useLoadingIndicator composable: 
<script setup lang="ts">
const loadingIndicator = useLoadingIndicator()
loadingIndicator.isLoading.value = true // Start loading

const loadedTheResource = () => {
  loadingIndicator.isLoading.value = false // Stop loading
}
</script>

<template>
  <img @load="loadedTheResource" src="..." />
</template>
<script setup lang="ts">
const loadingIndicator = useLoadingIndicator()
loadingIndicator.isLoading.value = true // Start loading

const loadedTheResource = () => {
  loadingIndicator.isLoading.value = false // Stop loading
}
</script>

<template>
  <img @load="loadedTheResource" src="..." />
</template>
This approach allows you to control exactly when the loading effect appears and disappears, making it suitable for more complex loading scenarios Nuxt Loading Indicator Composable. Summary:
- Add <NuxtLoadingIndicator /> to your layout or app.vue. - Customize it with props as needed. - For manual control, use the useLoadingIndicator composable. For more details and advanced usage, see the official documentation: Nuxt Loading Indicator. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@1079709612078534676> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?