<NuxtLoadingIndicator>

Exibe uma barra de progresso entre as navegações de página.

Uso

Adicione <NuxtLoadingIndicator/> no seu app.vue ou layouts/.

app.vue

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

Editar e visualizar o código de exemploexamples > routing > pages

Slots

Você pode passar HTML ou componentes personalizados através do slot padrão do indicador de carregamento.

Props

color: A cor da barra de carregamento. Pode ser definido como false para desativar o estilo de cor explícito.
errorColor: A cor da barra de carregamento quando error está definido como true.
height: Altura da barra de carregamento, em pixels (padrão 3).
duration: Duração da barra de carregamento, em milissegundos (padrão 2000).
throttle: Controle de aparecimento e desaparecimento, em milissegundos (padrão 200).
estimatedProgress: Por padrão, o Nuxt irá desacelerar à medida que se aproxima de 100%. Você pode fornecer uma função personalizada para personalizar a estimativa de progresso, que é uma função que recebe a duração da barra de carregamento (acima) e o tempo decorrido. Deve retornar um valor entre 0 e 100.

Este componente é opcional. :br Para obter uma personalização completa, você pode implementar o seu próprio com base no código fonte.

Você pode se conectar à instância subjacente do indicador usando o composable useLoadingIndicator, o que permitirá que você acione eventos de início/conclusão por conta própria.

A velocidade do indicador de carregamento diminui gradualmente após atingir um ponto específico controlado por estimatedProgress. Este ajuste fornece uma reflexão mais precisa dos tempos de carregamento de página mais longos e evita que o indicador mostre prematuramente 100% de conclusão.

※Esta página é uma tradução não oficial da documentação oficial do Nuxt.js.

A página correspondente na documentação oficial está aqui:
https://nuxt.com/docs/3.x/api/components/nuxt-loading-indicator