NuxtLoadingIndicator

Nuxt provides NuxtLoadingIndicator to display a progress bar on page navigation that can be customized! It has the following props

• color: The color of the loading bar.
• 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).

Let's use these props to customize our loading indicator.

Code

app.vue

<template>
  <NuxtLayout>
    <NuxtLoadingIndicator color="#348feb" height="5" />
    <NuxtPage />
  </NuxtLayout>
</template>

Result