<NuxtLoadingIndicator> · Nuxt Components

Usage

Add <NuxtLoadingIndicator/> in your app.vue or layouts/.

app.vue

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

Read and edit a live example in Docs > Examples > Routing > Pages.

Slots

You can pass custom HTML or components through the loading indicator's default slot.

Props

color: The color of the loading bar. It can be set to false to turn off explicit color styling.
height: Height of the loading bar, in pixels (default 3).
duration: Duration of the loading bar, in milliseconds (default 2000).
throttle: Throttle the appearing and hiding, in milliseconds (default 200).

This component is optional.
To achieve full customization, you can implement your own one based on its source code.

You can hook into the underlying indicator instance using the useLoadingIndicator composable, which will allow you to trigger start/finish events yourself.

Nuxt provides <NuxtLink> component to handle any kind of links within your application.

The <NuxtErrorBoundary> component handles client-side errors happening in its default slot.