Как использовать хуки NUXT в модулях?

Question

[Goodie128]

Доброго времени суток. Начал знакомиться с Nuxt и дошел до хуков, в документации на сайте ну очень уж непонятно написано как использовать хуки с Composition API. Я хочу реализовать загрузочный экран для сайта и использовать хук "page:loading:end". Но непонятно где его использовать и как. Кто-нибудь может объяснить как используются хуки в Nuxt или прислать статью? Перерыл гугл, складывается ощущение что только у меня с этим проблема.

Answer 1

[Андрей]

Если нужны именно хуки

const nuxtApp = useNuxtApp();

const loadingStartHook = nuxtApp.hook('page:loading:start', () => {
  ...
});

const loadingFinishHook = nuxtApp.hook('page:loading:end', () => {
  ...
});

const unsubError = nuxtApp.hook('vue:error', () => ...)

В какой-то из версий добавили встроенный композабл useLoadingIndicator . Это удобная обертка над этими хуками, можно в исходниках глянуть.

Использовать достаточно просто

const { progress, isLoading } = useLoadingIndicator();

Тут можно посмотреть пример кастомного индикатора