<NuxtLoadingIndicator>

Source
Индикатор прогресса между переходами по страницам.

Использование

Добавьте <NuxtLoadingIndicator/> в app.vue или в файлы из app/layouts/.

app/app.vue
<template>
  <NuxtLoadingIndicator />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>
Прочитайте и отредактируйте живой пример в Docs > 4 X > Examples > Routing > Pages.

Слоты

В слот по умолчанию можно передать свой HTML или компоненты.

Пропсы

  • color: цвет полосы загрузки. Можно задать false, чтобы отключить цвет.
  • errorColor: цвет полосы при error: true.
  • height: высота полосы в пикселях (по умолчанию 3).
  • duration: длительность анимации в мс (по умолчанию 2000).
  • throttle: задержка появления/скрытия в мс (по умолчанию 200).
  • estimatedProgress: по умолчанию Nuxt замедляет прогресс ближе к 100%. Можно передать свою функцию (аргументы: длительность и прошедшее время), возвращающую число от 0 до 100.
Компонент опциональный.
Для полной кастомизации можно сделать свой на основе исходного кода.
Управлять индикатором можно через композабл useLoadingIndicator (события start/finish).
Скорость индикатора снижается после точки, заданной estimatedProgress, чтобы лучше отражать длительную загрузку и не показывать 100% слишком рано.