Nuxt Tip: Managing Page Load States With useLoadingIndicator

When building Nuxt applications, handling loading states efficiently can improve user experience by providing visual feedback while pages load. The useLoadingIndicator composable gives you access to the loading state of the app page, making it easy to display custom indicators or trigger actions during page transitions.

Display Loading Indicator During Page Transitions

To display a progress bar between page transitions in Nuxt, you need to add the <NuxtLoadingIndicator> component in your app.vue or layouts/:

<template>
  <NuxtLoadingIndicator />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

You can customize the appearance using props like color, height, and duration. Read more at Nuxt Loading Indicator.

Control Loading State With useLoadingIndicator

The useLoadingIndicator composable returns the loading state of the page and is used by <NuxtLoadingIndicator> and controllable. It hooks into page:loading:start and page:loading:end to change its state.

Let's see how to use useLoadingIndicator in a Nuxt page:

<script setup lang="ts">
const { progress, isLoading, start, set, finish } = useLoadingIndicator({
  duration: 1000,
  throttle: 300,
});
</script>

<template>
  <div>
    <NuxtLoadingIndicator color="red" height="10" />
    <div class="flex flex-col gap-4">
      <span v-if="isLoading">Is Loading... Progress: {{ progress }}</span>
      <button @click="start">Start</button>
      <button @click="finish">Finish</button>
    </div>
  </div>
</template>

StackBlitz Demo

Try it yourself in the following StackBlitz demo: