<NuxtLoadingIndicator> · Nuxt Components

Usage

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

app.vue

<template>
  <NuxtLayout>
    <div>
      <NuxtLoadingIndicator /> <!-- here -->
      <NuxtPage />
    </div>
  </NuxtLayout>
</template>

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

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

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.

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.